@loaders.gl/tiles - npm Package Compare versions

Comparing version 3.0.0-alpha.10 to 3.0.0-alpha.11

dist/es5/tileset/tile-3d.js

@@ -51,3 +51,3 @@ "use strict";
 var TileHeader = function () {
-  function TileHeader(tileset, header, parentHeader) {
+  function TileHeader(tileset, header, parentHeader, basePath, extendedId) {
     (0, _classCallCheck2.default)(this, TileHeader);
@@ -57,3 +57,3 @@ (0, _loaderUtils.assert)((0, _typeof2.default)(header) === 'object');
     this.tileset = tileset;
-    this.id = header.id;
+    this.id = extendedId || header.id;
     this.url = header.url;
@@ -72,2 +72,3 @@ this.parent = parentHeader;
     this.depth = 0;
+    this.viewportIds = [];
     this._cacheNode = null;
@@ -303,3 +304,3 @@ this._frameNumber = null;
     key: "updateVisibility",
-    value: function updateVisibility(frameState) {
+    value: function updateVisibility(frameState, viewportIds) {
       if (this._frameNumber === frameState.frameNumber) {
@@ -322,2 +323,3 @@ return;
       this._frameNumber = frameState.frameNumber;
+      this.viewportIds = viewportIds;
     }
@@ -324,0 +326,0 @@ }, {

dist/es5/tileset/tileset-3d.js

@@ -125,2 +125,3 @@ "use strict";
     this.root = null;
+    this.roots = {};
     this.cartographicCenter = null;
@@ -143,2 +144,3 @@ this.cartesianCenter = null;
     this._selectedTilesToStyle = [];
+    this.frameStateData = {};
     this._queryParams = {};
@@ -185,2 +187,7 @@ this._queryParamsString = null;
   }, {
+    key: "frameNumber",
+    get: function get() {
+      return this._frameNumber;
+    }
+  }, {
     key: "getTileUrl",
@@ -198,49 +205,137 @@ value: function getTileUrl(tilePath) {
     key: "update",
-    value: function update(viewport) {
-      if (viewport instanceof Array) {
-        viewport = viewport[0];
+    value: function update(viewports) {
+      if (this.traverseCounter > 0) {
+        return;
       }
 
+      if (!(viewports instanceof Array)) {
+        viewports = [viewports];
+      }
+
       this._cache.reset();
 
       this._frameNumber++;
-      this._frameState = (0, _frameState.getFrameState)(viewport, this._frameNumber);
+      this.traverseCounter = viewports.length;
+      var viewportsToTraverse = [];
 
-      this._traverser.traverse(this.root, this._frameState, this.options);
+      var _iterator = _createForOfIteratorHelper(viewports),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var viewport = _step.value;
+          var id = viewport.id;
+
+          if (this._needTraverse(id)) {
+            viewportsToTraverse.push(id);
+          } else {
+            this.traverseCounter--;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      var _iterator2 = _createForOfIteratorHelper(viewports),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _viewport = _step2.value;
+          var _id = _viewport.id;
+
+          if (!this.roots[_id]) {
+            this.roots[_id] = this._initializeTileHeaders(this.tileset, null, this.basePath);
+          }
+
+          if (!viewportsToTraverse.includes(_id)) {
+            continue;
+          }
+
+          var frameState = (0, _frameState.getFrameState)(_viewport, this._frameNumber);
+
+          this._traverser.traverse(this.roots[_id], frameState, this.options);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
     }
   }, {
+    key: "_needTraverse",
+    value: function _needTraverse(viewportId) {
+      var traverserId = viewportId;
+
+      if (this.options.viewportTraversersMap) {
+        traverserId = this.options.viewportTraversersMap[viewportId];
+      }
+
+      if (traverserId !== viewportId) {
+        return false;
+      }
+
+      return true;
+    }
+  }, {
     key: "_onTraversalEnd",
-    value: function _onTraversalEnd() {
+    value: function _onTraversalEnd(frameState) {
+      var id = frameState.viewport.id;
+
+      if (!this.frameStateData[id]) {
+        this.frameStateData[id] = {
+          selectedTiles: [],
+          _requestedTiles: [],
+          _emptyTiles: []
+        };
+      }
+
+      var currentFrameStateData = this.frameStateData[id];
       var selectedTiles = Object.values(this._traverser.selectedTiles);
+      currentFrameStateData.selectedTiles = selectedTiles;
+      currentFrameStateData._requestedTiles = Object.values(this._traverser.requestedTiles);
+      currentFrameStateData._emptyTiles = Object.values(this._traverser.emptyTiles);
+      this.traverseCounter--;
 
-      if (this._tilesChanged(this.selectedTiles, selectedTiles)) {
-        this._updateFrameNumber++;
+      if (this.traverseCounter > 0) {
+        return;
       }
 
-      this.selectedTiles = selectedTiles;
+      this._updateTiles();
+    }
+  }, {
+    key: "_updateTiles",
+    value: function _updateTiles() {
+      this.selectedTiles = [];
+      this._requestedTiles = [];
+      this._emptyTiles = [];
 
-      var _iterator = _createForOfIteratorHelper(this.selectedTiles),
-          _step;
+      for (var frameStateKey in this.frameStateData) {
+        var frameStateDataValue = this.frameStateData[frameStateKey];
+        this.selectedTiles = this.selectedTiles.concat(frameStateDataValue.selectedTiles);
+        this._requestedTiles = this._requestedTiles.concat(frameStateDataValue._requestedTiles);
+        this._emptyTiles = this._emptyTiles.concat(frameStateDataValue._emptyTiles);
+      }
 
+      var _iterator3 = _createForOfIteratorHelper(this.selectedTiles),
+          _step3;
+
       try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var tile = _step.value;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var tile = _step3.value;
           this._tiles[tile.id] = tile;
         }
       } catch (err) {
-        _iterator.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator.f();
+        _iterator3.f();
       }
 
-      this._requestedTiles = Object.values(this._traverser.requestedTiles);
-      this._emptyTiles = Object.values(this._traverser.emptyTiles);
+      this._loadTiles();
 
-      this._loadTiles(this._frameState);
-
       this._unloadTiles();
 
       this._updateStats();
-
-      return this._updateFrameNumber;
     }
@@ -270,18 +365,18 @@ }, {
     key: "_loadTiles",
-    value: function _loadTiles(frameState) {
-      var _iterator2 = _createForOfIteratorHelper(this._requestedTiles),
-          _step2;
+    value: function _loadTiles() {
+      var _iterator4 = _createForOfIteratorHelper(this._requestedTiles),
+          _step4;
 
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var tile = _step2.value;
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var tile = _step4.value;
 
           if (tile.contentUnloaded) {
-            this._loadTile(tile, frameState);
+            this._loadTile(tile);
           }
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator4.e(err);
       } finally {
-        _iterator2.f();
+        _iterator4.f();
       }
@@ -302,8 +397,8 @@ }
 
-      var _iterator3 = _createForOfIteratorHelper(this.selectedTiles),
-          _step3;
+      var _iterator5 = _createForOfIteratorHelper(this.selectedTiles),
+          _step5;
 
       try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          var tile = _step3.value;
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var tile = _step5.value;
 
@@ -319,5 +414,5 @@ if (tile.contentAvailable) {
       } catch (err) {
-        _iterator3.e(err);
+        _iterator5.e(err);
       } finally {
-        _iterator3.f();
+        _iterator5.f();
       }
@@ -394,8 +489,8 @@
 
-          var _iterator4 = _createForOfIteratorHelper(children),
-              _step4;
+          var _iterator6 = _createForOfIteratorHelper(children),
+              _step6;
 
           try {
-            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-              var childHeader = _step4.value;
+            for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+              var childHeader = _step6.value;
               var childTile = new _tile3d.default(this, childHeader, tile, basePath);
@@ -407,5 +502,5 @@ tile.children.push(childTile);
           } catch (err) {
-            _iterator4.e(err);
+            _iterator6.e(err);
           } finally {
-            _iterator4.f();
+            _iterator6.f();
           }
@@ -449,3 +544,3 @@ }
     value: function () {
-      var _loadTile2 = (0, _asyncToGenerator2.default)(_regenerator.default.mark(function _callee(tile, frameState) {
+      var _loadTile2 = (0, _asyncToGenerator2.default)(_regenerator.default.mark(function _callee(tile) {
         var loaded;
@@ -461,3 +556,3 @@ return _regenerator.default.wrap(function _callee$(_context) {
                 _context.next = 4;
-                return tile.loadContent(frameState);
+                return tile.loadContent();
 
@@ -492,3 +587,3 @@ case 4:
 
-      function _loadTile(_x, _x2) {
+      function _loadTile(_x) {
         return _loadTile2.apply(this, arguments);
@@ -572,14 +667,14 @@ }
 
-        var _iterator5 = _createForOfIteratorHelper(tile.children),
-            _step5;
+        var _iterator7 = _createForOfIteratorHelper(tile.children),
+            _step7;
 
         try {
-          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-            var child = _step5.value;
+          for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+            var child = _step7.value;
             stack.push(child);
           }
         } catch (err) {
-          _iterator5.e(err);
+          _iterator7.e(err);
         } finally {
-          _iterator5.f();
+          _iterator7.f();
         }
@@ -602,14 +697,14 @@
 
-        var _iterator6 = _createForOfIteratorHelper(tile.children),
-            _step6;
+        var _iterator8 = _createForOfIteratorHelper(tile.children),
+            _step8;
 
         try {
-          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-            var child = _step6.value;
+          for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+            var child = _step8.value;
             stack.push(child);
           }
         } catch (err) {
-          _iterator6.e(err);
+          _iterator8.e(err);
         } finally {
-          _iterator6.f();
+          _iterator8.f();
         }
@@ -616,0 +711,0 @@

dist/es5/tileset/traversers/i3s-tilset-traverser.js

@@ -85,4 +85,5 @@ "use strict";
           var child = _step.value;
+          var extendedId = "".concat(child.id, "-").concat(frameState.viewport.id);
           var childTile = childTiles && childTiles.find(function (t) {
-            return t.id === child.id;
+            return t.id === extendedId;
           });
@@ -95,3 +96,3 @@
 
-            var cachedRequest = _this2._tileManager.find(child.id);
+            var cachedRequest = _this2._tileManager.find(extendedId);
 
@@ -105,7 +106,7 @@ if (!cachedRequest) {
 
-              _this2._tileManager.add(request, child.id, function (header) {
-                return _this2._onTileLoad(header, tile);
+              _this2._tileManager.add(request, extendedId, function (header) {
+                return _this2._onTileLoad(header, tile, extendedId);
               }, frameState);
             } else {
-              _this2._tileManager.update(child.id, frameState);
+              _this2._tileManager.update(extendedId, frameState);
             }
@@ -165,5 +166,5 @@ } else if (childTile) {
     key: "_onTileLoad",
-    value: function _onTileLoad(header, tile) {
+    value: function _onTileLoad(header, tile, extendedId) {
       var basePath = this.options.basePath;
-      var childTile = new _tile3d.default(tile.tileset, header, tile, basePath);
+      var childTile = new _tile3d.default(tile.tileset, header, tile, basePath, extendedId);
       tile.children.push(childTile);
@@ -170,0 +171,0 @@

dist/es5/tileset/traversers/tileset-3d-traverser.js

@@ -14,2 +14,4 @@ "use strict";
 
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
@@ -47,3 +49,3 @@
     value: function updateTileVisibility(tile, frameState) {
-      tile.updateVisibility(frameState);
+      (0, _get2.default)((0, _getPrototypeOf2.default)(Tileset3DTraverser.prototype), "updateTileVisibility", this).call(this, tile, frameState);
 
@@ -50,0 +52,0 @@ if (!tile.isVisibleAndInRequestVolume) {

dist/es5/tileset/traversers/tileset-traverser.js

@@ -266,3 +266,17 @@ "use strict";
     value: function updateTileVisibility(tile, frameState) {
-      tile.updateVisibility(frameState);
+      var viewportIds = [];
+
+      if (this.options.viewportTraversersMap) {
+        for (var key in this.options.viewportTraversersMap) {
+          var value = this.options.viewportTraversersMap[key];
+
+          if (value === frameState.viewport.id) {
+            viewportIds.push(key);
+          }
+        }
+      } else {
+        viewportIds.push(frameState.viewport.id);
+      }
+
+      tile.updateVisibility(frameState, viewportIds);
     }
@@ -269,0 +283,0 @@ }, {

dist/esm/tileset/tile-3d.js

@@ -28,3 +28,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var TileHeader = function () {
-  function TileHeader(tileset, header, parentHeader) {
+  function TileHeader(tileset, header, parentHeader, basePath, extendedId) {
     _classCallCheck(this, TileHeader);
@@ -35,3 +35,3 @@
     this.tileset = tileset;
-    this.id = header.id;
+    this.id = extendedId || header.id;
     this.url = header.url;
@@ -50,2 +50,3 @@ this.parent = parentHeader;
     this.depth = 0;
+    this.viewportIds = [];
     this._cacheNode = null;
@@ -281,3 +282,3 @@ this._frameNumber = null;
     key: "updateVisibility",
-    value: function updateVisibility(frameState) {
+    value: function updateVisibility(frameState, viewportIds) {
       if (this._frameNumber === frameState.frameNumber) {
@@ -300,2 +301,3 @@ return;
       this._frameNumber = frameState.frameNumber;
+      this.viewportIds = viewportIds;
     }
@@ -302,0 +304,0 @@ }, {

dist/esm/tileset/tileset-3d.js

@@ -101,2 +101,3 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
     this.root = null;
+    this.roots = {};
     this.cartographicCenter = null;
@@ -119,2 +120,3 @@ this.cartesianCenter = null;
     this._selectedTilesToStyle = [];
+    this.frameStateData = {};
     this._queryParams = {};
@@ -161,2 +163,7 @@ this._queryParamsString = null;
   }, {
+    key: "frameNumber",
+    get: function get() {
+      return this._frameNumber;
+    }
+  }, {
     key: "getTileUrl",
@@ -174,49 +181,137 @@ value: function getTileUrl(tilePath) {
     key: "update",
-    value: function update(viewport) {
-      if (viewport instanceof Array) {
-        viewport = viewport[0];
+    value: function update(viewports) {
+      if (this.traverseCounter > 0) {
+        return;
       }
 
+      if (!(viewports instanceof Array)) {
+        viewports = [viewports];
+      }
+
       this._cache.reset();
 
       this._frameNumber++;
-      this._frameState = getFrameState(viewport, this._frameNumber);
+      this.traverseCounter = viewports.length;
+      var viewportsToTraverse = [];
 
-      this._traverser.traverse(this.root, this._frameState, this.options);
+      var _iterator = _createForOfIteratorHelper(viewports),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var viewport = _step.value;
+          var id = viewport.id;
+
+          if (this._needTraverse(id)) {
+            viewportsToTraverse.push(id);
+          } else {
+            this.traverseCounter--;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      var _iterator2 = _createForOfIteratorHelper(viewports),
+          _step2;
+
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _viewport = _step2.value;
+          var _id = _viewport.id;
+
+          if (!this.roots[_id]) {
+            this.roots[_id] = this._initializeTileHeaders(this.tileset, null, this.basePath);
+          }
+
+          if (!viewportsToTraverse.includes(_id)) {
+            continue;
+          }
+
+          var frameState = getFrameState(_viewport, this._frameNumber);
+
+          this._traverser.traverse(this.roots[_id], frameState, this.options);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
     }
   }, {
+    key: "_needTraverse",
+    value: function _needTraverse(viewportId) {
+      var traverserId = viewportId;
+
+      if (this.options.viewportTraversersMap) {
+        traverserId = this.options.viewportTraversersMap[viewportId];
+      }
+
+      if (traverserId !== viewportId) {
+        return false;
+      }
+
+      return true;
+    }
+  }, {
     key: "_onTraversalEnd",
-    value: function _onTraversalEnd() {
+    value: function _onTraversalEnd(frameState) {
+      var id = frameState.viewport.id;
+
+      if (!this.frameStateData[id]) {
+        this.frameStateData[id] = {
+          selectedTiles: [],
+          _requestedTiles: [],
+          _emptyTiles: []
+        };
+      }
+
+      var currentFrameStateData = this.frameStateData[id];
       var selectedTiles = Object.values(this._traverser.selectedTiles);
+      currentFrameStateData.selectedTiles = selectedTiles;
+      currentFrameStateData._requestedTiles = Object.values(this._traverser.requestedTiles);
+      currentFrameStateData._emptyTiles = Object.values(this._traverser.emptyTiles);
+      this.traverseCounter--;
 
-      if (this._tilesChanged(this.selectedTiles, selectedTiles)) {
-        this._updateFrameNumber++;
+      if (this.traverseCounter > 0) {
+        return;
       }
 
-      this.selectedTiles = selectedTiles;
+      this._updateTiles();
+    }
+  }, {
+    key: "_updateTiles",
+    value: function _updateTiles() {
+      this.selectedTiles = [];
+      this._requestedTiles = [];
+      this._emptyTiles = [];
 
-      var _iterator = _createForOfIteratorHelper(this.selectedTiles),
-          _step;
+      for (var frameStateKey in this.frameStateData) {
+        var frameStateDataValue = this.frameStateData[frameStateKey];
+        this.selectedTiles = this.selectedTiles.concat(frameStateDataValue.selectedTiles);
+        this._requestedTiles = this._requestedTiles.concat(frameStateDataValue._requestedTiles);
+        this._emptyTiles = this._emptyTiles.concat(frameStateDataValue._emptyTiles);
+      }
 
+      var _iterator3 = _createForOfIteratorHelper(this.selectedTiles),
+          _step3;
+
       try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var tile = _step.value;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var tile = _step3.value;
           this._tiles[tile.id] = tile;
         }
       } catch (err) {
-        _iterator.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator.f();
+        _iterator3.f();
       }
 
-      this._requestedTiles = Object.values(this._traverser.requestedTiles);
-      this._emptyTiles = Object.values(this._traverser.emptyTiles);
+      this._loadTiles();
 
-      this._loadTiles(this._frameState);
-
       this._unloadTiles();
 
       this._updateStats();
-
-      return this._updateFrameNumber;
     }
@@ -246,18 +341,18 @@ }, {
     key: "_loadTiles",
-    value: function _loadTiles(frameState) {
-      var _iterator2 = _createForOfIteratorHelper(this._requestedTiles),
-          _step2;
+    value: function _loadTiles() {
+      var _iterator4 = _createForOfIteratorHelper(this._requestedTiles),
+          _step4;
 
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var tile = _step2.value;
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var tile = _step4.value;
 
           if (tile.contentUnloaded) {
-            this._loadTile(tile, frameState);
+            this._loadTile(tile);
           }
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator4.e(err);
       } finally {
-        _iterator2.f();
+        _iterator4.f();
       }
@@ -278,8 +373,8 @@ }
 
-      var _iterator3 = _createForOfIteratorHelper(this.selectedTiles),
-          _step3;
+      var _iterator5 = _createForOfIteratorHelper(this.selectedTiles),
+          _step5;
 
       try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          var tile = _step3.value;
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+          var tile = _step5.value;
 
@@ -295,5 +390,5 @@ if (tile.contentAvailable) {
       } catch (err) {
-        _iterator3.e(err);
+        _iterator5.e(err);
       } finally {
-        _iterator3.f();
+        _iterator5.f();
       }
@@ -370,8 +465,8 @@
 
-          var _iterator4 = _createForOfIteratorHelper(children),
-              _step4;
+          var _iterator6 = _createForOfIteratorHelper(children),
+              _step6;
 
           try {
-            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-              var childHeader = _step4.value;
+            for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+              var childHeader = _step6.value;
               var childTile = new Tile3D(this, childHeader, tile, basePath);
@@ -383,5 +478,5 @@ tile.children.push(childTile);
           } catch (err) {
-            _iterator4.e(err);
+            _iterator6.e(err);
           } finally {
-            _iterator4.f();
+            _iterator6.f();
           }
@@ -425,3 +520,3 @@ }
     value: function () {
-      var _loadTile2 = _asyncToGenerator(_regeneratorRuntime.mark(function _callee(tile, frameState) {
+      var _loadTile2 = _asyncToGenerator(_regeneratorRuntime.mark(function _callee(tile) {
         var loaded;
@@ -437,3 +532,3 @@ return _regeneratorRuntime.wrap(function _callee$(_context) {
                 _context.next = 4;
-                return tile.loadContent(frameState);
+                return tile.loadContent();
 
@@ -468,3 +563,3 @@ case 4:
 
-      function _loadTile(_x, _x2) {
+      function _loadTile(_x) {
         return _loadTile2.apply(this, arguments);
@@ -548,14 +643,14 @@ }
 
-        var _iterator5 = _createForOfIteratorHelper(tile.children),
-            _step5;
+        var _iterator7 = _createForOfIteratorHelper(tile.children),
+            _step7;
 
         try {
-          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-            var child = _step5.value;
+          for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+            var child = _step7.value;
             stack.push(child);
           }
         } catch (err) {
-          _iterator5.e(err);
+          _iterator7.e(err);
         } finally {
-          _iterator5.f();
+          _iterator7.f();
         }
@@ -578,14 +673,14 @@
 
-        var _iterator6 = _createForOfIteratorHelper(tile.children),
-            _step6;
+        var _iterator8 = _createForOfIteratorHelper(tile.children),
+            _step8;
 
         try {
-          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-            var child = _step6.value;
+          for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+            var child = _step8.value;
             stack.push(child);
           }
         } catch (err) {
-          _iterator6.e(err);
+          _iterator8.e(err);
         } finally {
-          _iterator6.f();
+          _iterator8.f();
         }
@@ -592,0 +687,0 @@

dist/esm/tileset/traversers/i3s-tilset-traverser.js

@@ -66,4 +66,5 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
           var child = _step.value;
+          var extendedId = "".concat(child.id, "-").concat(frameState.viewport.id);
           var childTile = childTiles && childTiles.find(function (t) {
-            return t.id === child.id;
+            return t.id === extendedId;
           });
@@ -76,3 +77,3 @@
 
-            var cachedRequest = _this2._tileManager.find(child.id);
+            var cachedRequest = _this2._tileManager.find(extendedId);
 
@@ -86,7 +87,7 @@ if (!cachedRequest) {
 
-              _this2._tileManager.add(request, child.id, function (header) {
-                return _this2._onTileLoad(header, tile);
+              _this2._tileManager.add(request, extendedId, function (header) {
+                return _this2._onTileLoad(header, tile, extendedId);
               }, frameState);
             } else {
-              _this2._tileManager.update(child.id, frameState);
+              _this2._tileManager.update(extendedId, frameState);
             }
@@ -146,5 +147,5 @@ } else if (childTile) {
     key: "_onTileLoad",
-    value: function _onTileLoad(header, tile) {
+    value: function _onTileLoad(header, tile, extendedId) {
       var basePath = this.options.basePath;
-      var childTile = new TileHeader(tile.tileset, header, tile, basePath);
+      var childTile = new TileHeader(tile.tileset, header, tile, basePath, extendedId);
       tile.children.push(childTile);
@@ -151,0 +152,0 @@

dist/esm/tileset/traversers/tileset-3d-traverser.js

 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _get from "@babel/runtime/helpers/esm/get";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -33,3 +34,3 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
     value: function updateTileVisibility(tile, frameState) {
-      tile.updateVisibility(frameState);
+      _get(_getPrototypeOf(Tileset3DTraverser.prototype), "updateTileVisibility", this).call(this, tile, frameState);
 
@@ -36,0 +37,0 @@ if (!tile.isVisibleAndInRequestVolume) {

dist/esm/tileset/traversers/tileset-traverser.js

@@ -252,3 +252,17 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
     value: function updateTileVisibility(tile, frameState) {
-      tile.updateVisibility(frameState);
+      var viewportIds = [];
+
+      if (this.options.viewportTraversersMap) {
+        for (var key in this.options.viewportTraversersMap) {
+          var value = this.options.viewportTraversersMap[key];
+
+          if (value === frameState.viewport.id) {
+            viewportIds.push(key);
+          }
+        }
+      } else {
+        viewportIds.push(frameState.viewport.id);
+      }
+
+      tile.updateVisibility(frameState, viewportIds);
     }
@@ -255,0 +269,0 @@ }, {

package.json

 {
   "name": "@loaders.gl/tiles",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.11",
   "description": "Common components for different tiles loaders.",
@@ -35,5 +35,5 @@ "license": "MIT",
   "dependencies": {
-    "@loaders.gl/core": "3.0.0-alpha.10",
-    "@loaders.gl/loader-utils": "3.0.0-alpha.10",
-    "@loaders.gl/math": "3.0.0-alpha.10",
+    "@loaders.gl/core": "3.0.0-alpha.11",
+    "@loaders.gl/loader-utils": "3.0.0-alpha.11",
+    "@loaders.gl/math": "3.0.0-alpha.11",
     "@math.gl/core": "^3.3.0",
@@ -48,3 +48,3 @@ "@math.gl/culling": "^3.3.0",
   },
-  "gitHead": "53814c1fff52f3e42c817b24053f86794ff40a2e"
+  "gitHead": "41ed37ca53c92c3eef79fefde2f1c51ad98ebf27"
 }

src/tileset/tile-3d.js

@@ -25,4 +25,14 @@ // This file is derived from the Cesium code base under Apache 2 license
 export default class TileHeader {
+  /**
+   * @constructs
+   * Create a TileHeader instance
+   * @param {Tileset3D} tileset - Tileset3D instance
+   * @param {Object} header - tile header - JSON loaded from a dataset
+   * @param {TileHeader} parentHeader - parent TileHeader instance
+   * @param {string} basePath - base path / url of the tile
+   * @param {string} extendedId - optional ID to separate copies of a tile for different viewports.
+   *                              const extendedId = `${tile.id}-${frameState.viewport.id}`;
+   */
   // eslint-disable-next-line max-statements
-  constructor(tileset, header, parentHeader) {
+  constructor(tileset, header, parentHeader, basePath, extendedId) {
     assert(typeof header === 'object');
@@ -35,3 +45,3 @@
     this.tileset = tileset;
-    this.id = header.id;
+    this.id = extendedId || header.id;
     this.url = header.url;
@@ -57,2 +67,3 @@ // This tile's parent or `undefined` if this tile is the root.
     this.depth = 0;
+    this.viewportIds = [];
 
@@ -252,4 +263,9 @@ // PRIVATE MEMBERS
 
-  // Update the tile's visibility.
-  updateVisibility(frameState) {
+  /**
+   * Update the tile's visibility
+   * @param {Object} frameState - frame state for tile culling
+   * @param {string[]} viewportIds - a list of viewport ids that show this tile
+   * @return {void}
+   */
+  updateVisibility(frameState, viewportIds) {
     if (this._frameNumber === frameState.frameNumber) {
@@ -276,2 +292,3 @@ // Return early if visibility has already been checked during the traversal.
     this._frameNumber = frameState.frameNumber;
+    this.viewportIds = viewportIds;
   }
@@ -278,0 +295,0 @@

src/tileset/tileset-3d.js

@@ -143,2 +143,3 @@ // This file is derived from the Cesium code base under Apache 2 license
     this.root = null;
+    this.roots = {};
     // view props
@@ -170,2 +171,3 @@ this.cartographicCenter = null;
     this._selectedTilesToStyle = [];
+    this.frameStateData = {};
 
@@ -216,2 +218,6 @@ this._queryParams = {};
 
+  get frameNumber() {
+    return this._frameNumber;
+  }
+
   getTileUrl(tilePath) {
@@ -225,31 +231,109 @@ const isDataUrl = tilePath.startsWith('data:');
 
-  update(viewport) {
-    // TODO: update traverser to work with multiple viewports. Take viewport[0] for now
-    if (viewport instanceof Array) {
-      viewport = viewport[0];
+  /**
+   * Update visible tiles relying on a list of deck.gl viewports
+   * @param {WebMercatorViewport[]} viewports - list of deck.gl viewports
+   * @return {void}
+   */
+  update(viewports) {
+    if (this.traverseCounter > 0) {
+      return;
     }
+    if (!(viewports instanceof Array)) {
+      viewports = [viewports];
+    }
+
     this._cache.reset();
     this._frameNumber++;
-    this._frameState = getFrameState(viewport, this._frameNumber);
-    this._traverser.traverse(this.root, this._frameState, this.options);
+    this.traverseCounter = viewports.length;
+    const viewportsToTraverse = [];
+    // First loop to decrement traverseCounter
+    for (const viewport of viewports) {
+      const id = viewport.id;
+      if (this._needTraverse(id)) {
+        viewportsToTraverse.push(id);
+      } else {
+        this.traverseCounter--;
+      }
+    }
+
+    // Second loop to traverse
+    for (const viewport of viewports) {
+      const id = viewport.id;
+      if (!this.roots[id]) {
+        this.roots[id] = this._initializeTileHeaders(this.tileset, null, this.basePath);
+      }
+
+      if (!viewportsToTraverse.includes(id)) {
+        continue; // eslint-disable-line no-continue
+      }
+      const frameState = getFrameState(viewport, this._frameNumber);
+      this._traverser.traverse(this.roots[id], frameState, this.options);
+    }
   }
 
-  _onTraversalEnd() {
+  /**
+   * Check if traversal is needed for particular viewport
+   * @param {string} viewportId - id of a viewport
+   * @return {boolean}
+   */
+  _needTraverse(viewportId) {
+    let traverserId = viewportId;
+    if (this.options.viewportTraversersMap) {
+      traverserId = this.options.viewportTraversersMap[viewportId];
+    }
+    if (traverserId !== viewportId) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * The callback to post-process tiles after traversal procedure
+   * @param {TilesetTraverser} traverser - the TilesetTraverser instance that just finished traversal
+   * @param {Object} frameState - frame state for tile culling
+   * @return {void}
+   */
+  _onTraversalEnd(frameState) {
+    const id = frameState.viewport.id;
+    if (!this.frameStateData[id]) {
+      this.frameStateData[id] = {selectedTiles: [], _requestedTiles: [], _emptyTiles: []};
+    }
+    const currentFrameStateData = this.frameStateData[id];
     const selectedTiles = Object.values(this._traverser.selectedTiles);
-    if (this._tilesChanged(this.selectedTiles, selectedTiles)) {
-      this._updateFrameNumber++;
+    currentFrameStateData.selectedTiles = selectedTiles;
+    currentFrameStateData._requestedTiles = Object.values(this._traverser.requestedTiles);
+    currentFrameStateData._emptyTiles = Object.values(this._traverser.emptyTiles);
+
+    this.traverseCounter--;
+    if (this.traverseCounter > 0) {
+      return;
     }
 
-    this.selectedTiles = selectedTiles;
+    this._updateTiles();
+  }
+
+  /**
+   * Update tiles relying on data from all traversers
+   * @return {void}
+   */
+  _updateTiles() {
+    this.selectedTiles = [];
+    this._requestedTiles = [];
+    this._emptyTiles = [];
+
+    for (const frameStateKey in this.frameStateData) {
+      const frameStateDataValue = this.frameStateData[frameStateKey];
+      this.selectedTiles = this.selectedTiles.concat(frameStateDataValue.selectedTiles);
+      this._requestedTiles = this._requestedTiles.concat(frameStateDataValue._requestedTiles);
+      this._emptyTiles = this._emptyTiles.concat(frameStateDataValue._emptyTiles);
+    }
+
     for (const tile of this.selectedTiles) {
       this._tiles[tile.id] = tile;
     }
-    this._requestedTiles = Object.values(this._traverser.requestedTiles);
-    this._emptyTiles = Object.values(this._traverser.emptyTiles);
 
-    this._loadTiles(this._frameState);
+    this._loadTiles();
     this._unloadTiles();
     this._updateStats();
-
-    return this._updateFrameNumber;
   }
@@ -268,3 +352,3 @@
 
-  _loadTiles(frameState) {
+  _loadTiles() {
     // Sort requests by priority before making any requests.
@@ -275,3 +359,3 @@ // This makes it less likely this requests will be cancelled after being issued.
       if (tile.contentUnloaded) {
-        this._loadTile(tile, frameState);
+        this._loadTile(tile);
       }
@@ -407,7 +491,7 @@ }
 
-  async _loadTile(tile, frameState) {
+  async _loadTile(tile) {
     let loaded;
     try {
       this._onStartTileLoading();
-      loaded = await tile.loadContent(frameState);
+      loaded = await tile.loadContent();
     } catch (error) {
@@ -414,0 +498,0 @@ this._onTileLoadError(tile, error);

src/tileset/traversers/i3s-tilset-traverser.js

@@ -27,7 +27,8 @@ import {load} from '@loaders.gl/core';
     for (const child of children) {
+      const extendedId = `${child.id}-${frameState.viewport.id}`;
       // if child tile is not fetched
-      const childTile = childTiles && childTiles.find(t => t.id === child.id);
+      const childTile = childTiles && childTiles.find(t => t.id === extendedId);
       if (!childTile) {
         let request = () => this._loadTile(child.id, tileset);
-        const cachedRequest = this._tileManager.find(child.id);
+        const cachedRequest = this._tileManager.find(extendedId);
         if (!cachedRequest) {
@@ -40,4 +41,4 @@ // eslint-disable-next-line max-depth
             request,
-            child.id,
-            header => this._onTileLoad(header, tile),
+            extendedId,
+            header => this._onTileLoad(header, tile, extendedId),
             frameState
@@ -47,3 +48,3 @@ );
           // update frameNumber since it is still needed in current frame
-          this._tileManager.update(child.id, frameState);
+          this._tileManager.update(extendedId, frameState);
         }
@@ -72,6 +73,14 @@ } else if (childTile) {
 
-  _onTileLoad(header, tile) {
+  /**
+   * The callback to init TileHeader instance after loading the tile JSON
+   * @param {Object} header - the tile JSON from a dataset
+   * @param {TileHeader} tile - the parent TileHeader instance
+   * @param {string} extendedId - optional ID to separate copies of a tile for different viewports.
+   *                              const extendedId = `${tile.id}-${frameState.viewport.id}`;
+   * @return {void}
+   */
+  _onTileLoad(header, tile, extendedId) {
     const basePath = this.options.basePath;
     // after child tile is fetched
-    const childTile = new TileHeader(tile.tileset, header, tile, basePath);
+    const childTile = new TileHeader(tile.tileset, header, tile, basePath, extendedId);
     tile.children.push(childTile);
@@ -78,0 +87,0 @@ const frameState = this._tileManager.find(childTile.id).frameState;

src/tileset/traversers/tileset-3d-traverser.js

@@ -16,3 +16,3 @@ // This file is derived from the Cesium code base under Apache 2 license
   updateTileVisibility(tile, frameState) {
-    tile.updateVisibility(frameState);
+    super.updateTileVisibility(tile, frameState);
 
@@ -19,0 +19,0 @@ //  Optimization - if none of the tile's children are visible then this tile isn't visible

src/tileset/traversers/tileset-traverser.js

@@ -255,3 +255,14 @@ import ManagedArray from '../../utils/managed-array';
   updateTileVisibility(tile, frameState) {
-    tile.updateVisibility(frameState);
+    const viewportIds = [];
+    if (this.options.viewportTraversersMap) {
+      for (const key in this.options.viewportTraversersMap) {
+        const value = this.options.viewportTraversersMap[key];
+        if (value === frameState.viewport.id) {
+          viewportIds.push(key);
+        }
+      }
+    } else {
+      viewportIds.push(frameState.viewport.id);
+    }
+    tile.updateVisibility(frameState, viewportIds);
   }
@@ -258,0 +269,0 @@

No alert changes

Improved metrics

Total package byte prevSize

2678377

increased by1.48%

Lines of code

27382

increased by1.58%

Dependency changes

• + [e-mail]/core@3.0.0-alpha.11(transitive)

• + [e-mail]/images@3.0.0-alpha.11(transitive)

• + [e-mail]/loader-utils@3.0.0-alpha.11(transitive)

• + [e-mail]/math@3.0.0-alpha.11(transitive)

• + [e-mail]/worker-utils@3.0.0-alpha.11(transitive)

• - [e-mail]/core@3.0.0-alpha.10(transitive)

• - [e-mail]/images@3.0.0-alpha.10(transitive)

• - [e-mail]/loader-utils@3.0.0-alpha.10(transitive)

• - [e-mail]/math@3.0.0-alpha.10(transitive)

• - [e-mail]/worker-utils@3.0.0-alpha.10(transitive)

• [e-mail]/core@3.0.0-alpha.11

• [e-mail]/loader-utils@3.0.0-alpha.11

• [e-mail]/math@3.0.0-alpha.11