Separate lookups for source tiles by tile coord and tile key

src/ol/source/VectorTile.js

@@ -132,7 +132,7 @@ class VectorTile extends UrlTile {
      * @private
      * @type {Object<string, import("../VectorTile.js").default>}
      */
-    this.sourceTiles_ = {};
+    this.sourceTileByCoordKey_ = {};
 
     /**
      * @private
@@ -173,7 +173,7 @@ class VectorTile extends UrlTile {
    */
   clear() {
     this.tileCache.clear();
-    this.sourceTiles_ = {};
+    this.sourceTileByCoordKey_ = {};
     this.sourceTilesByTileKey_ = {};
   }
 
@@ -199,7 +199,7 @@ class VectorTile extends UrlTile {
     const sourceZ = sourceTileGrid.getZForResolution(resolution, 1);
     const minZoom = sourceTileGrid.getMinZoom();
 
-    const previousSourceTiles = this.sourceTilesByTileKey_[getKey(tile.tileCoord)];
+    const previousSourceTiles = this.sourceTilesByTileKey_[tile.getKey()];
     if (previousSourceTiles && previousSourceTiles.length > 0 && previousSourceTiles[0].tileCoord[0] === sourceZ) {
       return previousSourceTiles;
     }
@@ -212,10 +212,10 @@ class VectorTile extends UrlTile {
       covered = true;
       empty = true;
       sourceTileGrid.forEachTileCoord(extent, loadedZ, function(sourceTileCoord) {
-        const tileKey = getKey(sourceTileCoord);
+        const coordKey = getKey(sourceTileCoord);
         let sourceTile;
-        if (tileKey in this.sourceTiles_) {
+        if (coordKey in this.sourceTileByCoordKey_) {
-          sourceTile = this.sourceTiles_[tileKey];
+          sourceTile = this.sourceTileByCoordKey_[coordKey];
           const state = sourceTile.getState();
           if (state === TileState.LOADED || state === TileState.ERROR || state === TileState.EMPTY) {
             empty = empty && state === TileState.EMPTY;
@@ -230,7 +230,7 @@ class VectorTile extends UrlTile {
             sourceTile.extent = sourceTileGrid.getTileCoordExtent(sourceTileCoord);
             sourceTile.projection = projection;
             sourceTile.resolution = sourceTileGrid.getResolution(sourceTileCoord[0]);
-            this.sourceTiles_[tileKey] = sourceTile;
+            this.sourceTileByCoordKey_[coordKey] = sourceTile;
             empty = false;
             listen(sourceTile, EventType.CHANGE, this.handleTileChange, this);
             sourceTile.load();
@@ -246,7 +246,7 @@ class VectorTile extends UrlTile {
           tile.loadingSourceTiles++;
           const key = listen(sourceTile, EventType.CHANGE, function() {
             const state = sourceTile.getState();
-            const sourceTileKey = getKey(sourceTile.tileCoord);
+            const sourceTileKey = sourceTile.getKey();
             if (state === TileState.LOADED || state === TileState.ERROR) {
               if (state === TileState.LOADED) {
                 unlistenByKey(key);
@@ -289,7 +289,7 @@ class VectorTile extends UrlTile {
    * @param {Array<import("../VectorTile").default>} sourceTiles Source tiles.
    */
   addSourceTiles(tile, sourceTiles) {
-    this.sourceTilesByTileKey_[getKey(tile.tileCoord)] = sourceTiles;
+    this.sourceTilesByTileKey_[tile.getKey()] = sourceTiles;
     for (let i = 0, ii = sourceTiles.length; i < ii; ++i) {
       sourceTiles[i].consumers++;
     }
@@ -299,7 +299,7 @@ class VectorTile extends UrlTile {
    * @param {VectorRenderTile} tile Tile.
    */
   removeSourceTiles(tile) {
-    const tileKey = getKey(tile.tileCoord);
+    const tileKey = tile.getKey();
     if (tileKey in this.sourceTilesByTileKey_) {
       const sourceTiles = this.sourceTilesByTileKey_[tileKey];
       for (let i = 0, ii = sourceTiles.length; i < ii; ++i) {
@@ -307,7 +307,7 @@ class VectorTile extends UrlTile {
         sourceTile.consumers--;
         if (sourceTile.consumers === 0) {
           sourceTile.dispose();
-          delete this.sourceTiles_[getKey(sourceTile.tileCoord)];
+          delete this.sourceTileByCoordKey_[getKey(sourceTile.tileCoord)];
         }
       }
     }
@@ -318,11 +318,11 @@ class VectorTile extends UrlTile {
    * @inheritDoc
    */
   getTile(z, x, y, pixelRatio, projection) {
-    const tileCoordKey = getKeyZXY(z, x, y);
+    const coordKey = getKeyZXY(z, x, y);
     const key = this.getKey();
     let tile;
-    if (this.tileCache.containsKey(tileCoordKey)) {
+    if (this.tileCache.containsKey(coordKey)) {
-      tile = /** @type {!import("../Tile.js").default} */ (this.tileCache.get(tileCoordKey));
+      tile = /** @type {!import("../Tile.js").default} */ (this.tileCache.get(coordKey));
       if (tile.key === key) {
         return tile;
       }
@@ -352,9 +352,9 @@ class VectorTile extends UrlTile {
     if (tile) {
       newTile.interimTile = tile;
       newTile.refreshInterimChain();
-      this.tileCache.replace(tileCoordKey, newTile);
+      this.tileCache.replace(coordKey, newTile);
     } else {
-      this.tileCache.set(tileCoordKey, newTile);
+      this.tileCache.set(coordKey, newTile);
     }
     return newTile;
   }

test/spec/ol/renderer/canvas/vectortilelayer.test.js

@@ -9,6 +9,7 @@ import {getCenter} from '../../../../../src/ol/extent.js';
 import MVT from '../../../../../src/ol/format/MVT.js';
 import Point from '../../../../../src/ol/geom/Point.js';
 import VectorTileLayer from '../../../../../src/ol/layer/VectorTile.js';
+import {getKey} from '../../../../../src/ol/tilecoord.js';
 import {get as getProjection} from '../../../../../src/ol/proj.js';
 import {checkedFonts} from '../../../../../src/ol/render/canvas.js';
 import RenderFeature from '../../../../../src/ol/render/Feature.js';
@@ -300,12 +301,8 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
         tileClass: TileClass,
         tileGrid: createXYZ()
       });
-      source.sourceTiles_ = {
+      source.sourceTileByCoordKey_[getKey(sourceTile.tileCoord)] = sourceTile;
-        '0/0/0': sourceTile
+      source.sourceTilesByTileKey_[sourceTile.getKey()] = [sourceTile];
-      };
-      source.sourceTilesByTileKey_ = {
-        '0/0/0': [sourceTile]
-      };
       executorGroup = {};
       source.getTile = function() {
         const tile = VectorTileSource.prototype.getTile.apply(source, arguments);

test/spec/ol/source/vectortile.test.js

@@ -11,6 +11,7 @@ import {createXYZ} from '../../../../src/ol/tilegrid.js';
 import TileGrid from '../../../../src/ol/tilegrid/TileGrid.js';
 import {listen, unlistenByKey} from '../../../../src/ol/events.js';
 import TileState from '../../../../src/ol/TileState.js';
+import {getCenter} from '../../../../src/ol/extent.js';
 
 describe('ol.source.VectorTile', function() {
 
@@ -203,4 +204,52 @@ describe('ol.source.VectorTile', function() {
 
   });
 
+  it('does not fill up the tile queue', function(done) {
+    const target = document.createElement('div');
+    target.style.width = '100px';
+    target.style.height = '100px';
+    document.body.appendChild(target);
+    const extent = [1824704.739223726, 6141868.096770482, 1827150.7241288517, 6144314.081675608];
+    let url = 'spec/ol/data/14-8938-5680.vector.pbf?';
+    const source = new VectorTileSource({
+      format: new MVT(),
+      url: url,
+      minZoom: 14,
+      maxZoom: 14
+    });
+
+    const map = new Map({
+      target: target,
+      layers: [
+        new VectorTileLayer({
+          extent: extent,
+          source: source
+        })
+      ],
+      view: new View({
+        center: getCenter(extent),
+        zoom: 14
+      })
+    });
+
+    const limit = 3;
+    let count = 0;
+    source.on('tileloadend', function() {
+      setTimeout(function() {
+        ++count;
+        if (count === limit) {
+          document.body.removeChild(target);
+          map.dispose();
+          done();
+        }
+
+        url = url + count;
+        source.setUrl(url);
+        const queue = map.tileQueue_;
+        expect(queue.getTilesLoading()).to.be(0);
+      }, 100);
+    });
+
+  });
+
 });

test/spec/ol/vectorrendertile.test.js

@@ -5,7 +5,6 @@ import {listen, listenOnce, unlistenByKey} from '../../../src/ol/events.js';
 import GeoJSON from '../../../src/ol/format/GeoJSON.js';
 import {createXYZ} from '../../../src/ol/tilegrid.js';
 import TileGrid from '../../../src/ol/tilegrid/TileGrid.js';
-import {getKey} from '../../../src/ol/tilecoord.js';
 import EventType from '../../../src/ol/events/EventType.js';
 
 
@@ -107,7 +106,7 @@ describe('ol.VectorRenderTile', function() {
     tile.load();
     expect(tile.getState()).to.be(TileState.LOADING);
     tile.dispose();
-    expect(source.sourceTilesByTileKey_[getKey(tile)]).to.be(undefined);
+    expect(source.sourceTilesByTileKey_[tile.getKey()]).to.be(undefined);
     expect(tile.getState()).to.be(TileState.ABORT);
   });