diff --git a/src/ol/renderer/canvas/tilelayer.js b/src/ol/renderer/canvas/tilelayer.js index fdf2ce91ca..4a74231471 100644 --- a/src/ol/renderer/canvas/tilelayer.js +++ b/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; } diff --git a/src/ol/renderer/canvas/vectortilelayer.js b/src/ol/renderer/canvas/vectortilelayer.js index 0999ebbb13..1e97862734 100644 --- a/src/ol/renderer/canvas/vectortilelayer.js +++ b/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. diff --git a/test/spec/ol/renderer/canvas/vectortilelayer.test.js b/test/spec/ol/renderer/canvas/vectortilelayer.test.js index 0ff44349d2..e0bcc638a1 100644 --- a/test/spec/ol/renderer/canvas/vectortilelayer.test.js +++ b/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() {