Separate lookups for source tiles by tile coord and tile key

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_ = {
-        '0/0/0': sourceTile
-      };
-      source.sourceTilesByTileKey_ = {
-        '0/0/0': [sourceTile]
-      };
+      source.sourceTileByCoordKey_[getKey(sourceTile.tileCoord)] = sourceTile;
+      source.sourceTilesByTileKey_[sourceTile.getKey()] = [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);
   });