Do not use tileUrlFunction for renderer tile coordinates

src/ol/source/vectortile.js

@@ -118,12 +118,10 @@ ol.source.VectorTile.prototype.getTile = function(z, x, y, pixelRatio, projectio
     var tileCoord = [z, x, y];
     var urlTileCoord = this.getTileCoordForTileUrlFunction(
         tileCoord, projection);
-    var tileUrl = urlTileCoord ?
-      this.tileUrlFunction(urlTileCoord, pixelRatio, projection) : undefined;
     var tile = new ol.VectorImageTile(
         tileCoord,
-        tileUrl !== undefined ? ol.TileState.IDLE : ol.TileState.EMPTY,
-        tileUrl !== undefined ? tileUrl : '',
+        urlTileCoord !== undefined ? ol.TileState.IDLE : ol.TileState.EMPTY,
+        this.getRevision(),
         this.format_, this.tileLoadFunction, urlTileCoord, this.tileUrlFunction,
         this.tileGrid, this.getTileGridForProjection(projection),
         this.sourceTiles_, pixelRatio, projection, this.tileClass,

src/ol/vectorimagetile.js

@@ -15,7 +15,7 @@ goog.require('ol.featureloader');
  * @extends {ol.Tile}
  * @param {ol.TileCoord} tileCoord Tile coordinate.
  * @param {ol.TileState} state State.
- * @param {string} src Data source url.
+ * @param {number} sourceRevision Source revision.
  * @param {ol.format.Feature} format Feature format.
  * @param {ol.TileLoadFunctionType} tileLoadFunction Tile load function.
  * @param {ol.TileCoord} urlTileCoord Wrapped tile coordinate for source urls.
@@ -32,9 +32,9 @@ goog.require('ol.featureloader');
  *     Function to call when a source tile's state changes.
  * @param {olx.TileOptions=} opt_options Tile options.
  */
-ol.VectorImageTile = function(tileCoord, state, src, format, tileLoadFunction,
-    urlTileCoord, tileUrlFunction, sourceTileGrid, tileGrid, sourceTiles,
-    pixelRatio, projection, tileClass, handleTileChange, opt_options) {
+ol.VectorImageTile = function(tileCoord, state, sourceRevision, format,
+    tileLoadFunction, urlTileCoord, tileUrlFunction, sourceTileGrid, tileGrid,
+    sourceTiles, pixelRatio, projection, tileClass, handleTileChange, opt_options) {
 
   ol.Tile.call(this, tileCoord, state, opt_options);
 
@@ -69,9 +69,9 @@ ol.VectorImageTile = function(tileCoord, state, src, format, tileLoadFunction,
   this.tileKeys = [];
 
   /**
-   * @type {string}
+   * @type {number}
    */
-  this.src_ = src;
+  this.sourceRevision_ = sourceRevision;
 
   /**
    * @type {ol.TileCoord}
@@ -197,7 +197,7 @@ ol.VectorImageTile.prototype.getReplayState = function(layer) {
  * @inheritDoc
  */
 ol.VectorImageTile.prototype.getKey = function() {
-  return this.tileKeys.join('/') + '/' + this.src_;
+  return this.tileKeys.join('/') + '-' + this.sourceRevision_;
 };
 
 

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

@@ -1,11 +1,14 @@
-
-
+goog.require('ol.Map');
+goog.require('ol.View');
 goog.require('ol.VectorImageTile');
 goog.require('ol.VectorTile');
 goog.require('ol.format.MVT');
+goog.require('ol.layer.VectorTile');
 goog.require('ol.proj');
+goog.require('ol.proj.Projection');
 goog.require('ol.source.VectorTile');
 goog.require('ol.tilegrid');
+goog.require('ol.tilegrid.TileGrid');
 
 describe('ol.source.VectorTile', function() {
 
@@ -71,4 +74,79 @@ describe('ol.source.VectorTile', function() {
     });
   });
 
+  describe('different source and render tile grids', function() {
+
+    var source, map, loaded, requested, target;
+
+    beforeEach(function() {
+
+      loaded = [];
+      requested = 0;
+
+      function tileUrlFunction(tileUrl) {
+        ++requested;
+        if (tileUrl.toString() == '6,27,55') {
+          return tileUrl.join('/');
+        }
+      }
+
+      function tileLoadFunction(tile, src) {
+        tile.setLoader(function() {});
+        loaded.push(src);
+      }
+
+      var proj = ol.proj.Projection({
+        code: 'EPSG:3006',
+        units: 'm'
+      });
+
+      var extent = [665584.2026596286, 7033250.839875697, 667162.0221431496, 7035280.378636755];
+
+      source = new ol.source.VectorTile({
+        projection: proj,
+        tileGrid: new ol.tilegrid.TileGrid({
+          origin: [218128, 6126002],
+          resolutions: [4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5]
+        }),
+        tileUrlFunction: tileUrlFunction,
+        tileLoadFunction: tileLoadFunction
+      });
+
+      target = document.createElement('div');
+      target.style.width = target.style.height = '100px';
+      document.body.appendChild(target);
+
+      map = new ol.Map({
+        layers: [
+          new ol.layer.VectorTile({
+            visible: true,
+            extent: extent,
+            source: source
+          })
+        ],
+        target: target,
+        view: new ol.View({
+          projection: proj,
+          zoom: 11,
+          center: [666373.1624999996, 7034265.3572]
+        })
+      });
+
+    });
+
+    afterEach(function() {
+      document.body.removeChild(target);
+    });
+
+    it('loads available tiles', function(done) {
+      map.renderSync();
+      setTimeout(function() {
+        expect(requested).to.be.greaterThan(1);
+        expect(loaded).to.eql(['6/27/55']);
+        done();
+      }, 0);
+    });
+
+  });
+
 });