Re-render vector tiles when layer has changed

src/ol/renderer/canvas/tilelayer.js

@@ -34,10 +34,10 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {
   this.renderedExtent_ = null;
 
   /**
-   * @private
+   * @protected
    * @type {number}
    */
-  this.renderedRevision_;
+  this.renderedRevision;
 
   /**
    * @protected
@@ -164,7 +164,7 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer
       (hints[ol.View.Hint.ANIMATING] || hints[ol.View.Hint.INTERACTING])) &&
       (newTiles || !(this.renderedExtent_ &&
       ol.extent.equals(this.renderedExtent_, imageExtent)) ||
-      this.renderedRevision_ != sourceRevision)) {
+      this.renderedRevision != sourceRevision)) {
 
     var tilePixelSize = tileSource.getTilePixelSize(z, pixelRatio, projection);
     var width = tileRange.getWidth() * tilePixelSize[0];
@@ -207,7 +207,7 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer
       }
     }
 
-    this.renderedRevision_ = sourceRevision;
+    this.renderedRevision = sourceRevision;
     this.renderedResolution = tileResolution;
     this.renderedExtent_ = imageExtent;
   }

src/ol/renderer/canvas/vectortilelayer.js

@@ -30,6 +30,12 @@ ol.renderer.canvas.VectorTileLayer = function(layer) {
    */
   this.dirty_ = false;
 
+  /**
+   * @private
+   * @type {number}
+   */
+  this.renderedLayerRevision_;
+
   /**
    * @private
    * @type {ol.Transform}
@@ -64,6 +70,19 @@ ol.renderer.canvas.VectorTileLayer.VECTOR_REPLAYS = {
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.renderer.canvas.VectorTileLayer.prototype.prepareFrame = function(frameState, layerState) {
+  var layerRevision = this.getLayer().getRevision();
+  if (this.renderedLayerRevision_ != layerRevision) {
+    this.renderedTiles.length = 0;
+  }
+  this.renderedLayerRevision_ = layerRevision;
+  return ol.renderer.canvas.TileLayer.prototype.prepareFrame.apply(this, arguments);
+};
+
+
 /**
  * @param {ol.VectorTile} tile Tile.
  * @param {olx.FrameState} frameState Frame state.

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

@@ -149,6 +149,46 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
 
   });
 
+  describe('#prepareFrame', function() {
+    it('re-renders when layer changed', function() {
+      var layer = new ol.layer.VectorTile({
+        source: new ol.source.VectorTile({
+          tileGrid: ol.tilegrid.createXYZ()
+        })
+      });
+      var tile = new ol.VectorTile([0, 0, 0], 2);
+      tile.projection_ = ol.proj.get('EPSG:3857');
+      tile.features_ = [];
+      tile.getImage = function() {
+        return document.createElement('canvas');
+      };
+      layer.getSource().getTile = function() {
+        return tile;
+      };
+      var renderer = new ol.renderer.canvas.VectorTileLayer(layer);
+      renderer.renderTileImage_ = sinon.spy();
+      var proj = ol.proj.get('EPSG:3857');
+      var frameState = {
+        extent: proj.getExtent(),
+        viewState: {
+          center: [0, 0],
+          resolution: 156543.03392804097,
+          projection: proj
+        },
+        size: [256, 256],
+        usedTiles: {},
+        wantedTiles: {}
+      };
+      renderer.prepareFrame(frameState, {});
+      expect(renderer.renderTileImage_.getCalls().length).to.be(1);
+      renderer.prepareFrame(frameState, {});
+      expect(renderer.renderTileImage_.getCalls().length).to.be(1);
+      layer.changed();
+      renderer.prepareFrame(frameState, {});
+      expect(renderer.renderTileImage_.getCalls().length).to.be(2);
+    });
+  });
+
   describe('#forEachFeatureAtCoordinate', function() {
     var layer, renderer, replayGroup;
     var TileClass = function() {