Fix interim tile handing for vector tiles

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

@@ -9,7 +9,6 @@ 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';
@@ -317,7 +316,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
         tileClass: TileClass,
         tileGrid: createXYZ()
       });
-      source.sourceTileByCoordKey_[getKey(sourceTile.tileCoord)] = sourceTile;
+      source.sourceTileByKey_[sourceTile.getKey()] = sourceTile;
       source.sourceTilesByTileKey_[sourceTile.getKey()] = [sourceTile];
       executorGroup = {};
       source.getTile = function() {

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

@@ -11,6 +11,8 @@ 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';
+import {unByKey} from '../../../../src/ol/Observable.js';
 
 describe('ol.source.VectorTile', function() {
 
@@ -295,4 +297,61 @@ describe('ol.source.VectorTile', function() {
 
   });
 
+  describe('interim tile handling', function() {
+
+    let map, source, target;
+
+    beforeEach(function() {
+      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];
+      source = new VectorTileSource({
+        format: new MVT(),
+        url: 'spec/ol/data/14-8938-5680.vector.pbf',
+        minZoom: 14,
+        maxZoom: 14
+      });
+      map = new Map({
+        pixelRatio: 1,
+        target: target,
+        layers: [
+          new VectorTileLayer({
+            extent: extent,
+            source: source
+          })
+        ],
+        view: new View({
+          center: getCenter(extent),
+          zoom: 15
+        })
+      });
+    });
+
+    afterEach(function() {
+      map.setTarget(null);
+      document.body.removeChild(target);
+    });
+
+    it('re-renders when source changes', function(done) {
+      map.once('rendercomplete', function() {
+        const key = map.on('rendercomplete', function() {
+          const tile = source.getTile(14, 8938, 5680, 1, map.getView().getProjection());
+          expect(tile.getKey()).to.be('spec/ol/data/14-8938-5680.vector.pbf?new/14,8938,5680');
+          expect(tile.interimTile).to.be.a(VectorRenderTile);
+          expect(tile.interimTile.getKey()).to.be('spec/ol/data/14-8938-5680.vector.pbf/14,8938,5680');
+          const sourceTiles = source.getSourceTiles(1, map.getView().getProjection(), tile);
+          if (sourceTiles) {
+            expect(sourceTiles[0].getKey()).to.be('spec/ol/data/14-8938-5680.vector.pbf?new');
+            unByKey(key);
+            done();
+          }
+        });
+        source.setUrl('spec/ol/data/14-8938-5680.vector.pbf?new');
+      });
+    });
+
+  });
+
 });

test/spec/ol/vectorrendertile.test.js

@@ -116,7 +116,7 @@ describe('ol.VectorRenderTile', function() {
   it('#dispose() when source tiles are loaded', function(done) {
     const source = new VectorTileSource({
       format: new GeoJSON(),
-      url: 'spec/ol/data/point.json',
+      url: 'spec/ol/data/point.json?{z}/{x}/{y}',
       tileGrid: createXYZ()
     });
     source.getTileGridForProjection = function() {