diff --git a/src/ol/renderer/canvas/tilelayer.js b/src/ol/renderer/canvas/tilelayer.js index 724bf4922c..ab7ad60e1d 100644 --- a/src/ol/renderer/canvas/tilelayer.js +++ b/src/ol/renderer/canvas/tilelayer.js @@ -178,15 +178,16 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer tile = tile.getInterimTile(); } if (this.isDrawableTile_(tile)) { - var inTransition = false; + var uid = ol.getUid(this); if (tile.getState() == ol.TileState.LOADED) { tilesToDrawByZ[z][tile.tileCoord.toString()] = tile; - inTransition = tile.inTransition && tile.inTransition(ol.getUid(this)); + var inTransition = tile.inTransition(uid); if (!newTiles && (inTransition || this.renderedTiles.indexOf(tile) === -1)) { newTiles = true; } } - if (!inTransition) { + if (tile.getAlpha(uid, frameState.time) === 1) { + // don't look for alt tiles if alpha is 1 continue; } } @@ -310,7 +311,8 @@ ol.renderer.canvas.TileLayer.prototype.drawTileImage = function(tile, frameState if (!image) { return; } - var alpha = transition ? tile.getAlpha(ol.getUid(this), frameState.time) : 1; + var uid = ol.getUid(this); + var alpha = transition ? tile.getAlpha(uid, frameState.time) : 1; if (alpha === 1 && !this.getLayer().getSource().getOpaque(frameState.viewState.projection)) { this.context.clearRect(x, y, w, h); } @@ -327,6 +329,8 @@ ol.renderer.canvas.TileLayer.prototype.drawTileImage = function(tile, frameState } if (alpha !== 1) { frameState.animate = true; + } else if (transition) { + tile.endTransition(uid); } }; diff --git a/src/ol/tile.js b/src/ol/tile.js index 4c2381d12d..aec795d436 100644 --- a/src/ol/tile.js +++ b/src/ol/tile.js @@ -200,7 +200,6 @@ ol.Tile.prototype.getAlpha = function(id, time) { var delta = time - start + (1000 / 60); // avoid rendering at 0 if (delta >= this.transition_) { - this.transitionStarts_[id] = -1; return 1; } return ol.easing.easeIn(delta / this.transition_); @@ -219,3 +218,13 @@ ol.Tile.prototype.inTransition = function(id) { } return this.transitionStarts_[id] !== -1; }; + +/** + * Mark a transition as complete. + * @param {number} id An id for the renderer. + */ +ol.Tile.prototype.endTransition = function(id) { + if (this.transition_) { + this.transitionStarts_[id] = -1; + } +}; diff --git a/test/spec/ol/tile.test.js b/test/spec/ol/tile.test.js index 8e25c9356f..a8d2b39115 100644 --- a/test/spec/ol/tile.test.js +++ b/test/spec/ol/tile.test.js @@ -47,22 +47,9 @@ describe('ol.Tile', function() { var coord = [0, 0, 0]; var tile = new ol.Tile(coord, ol.TileState.IDLE); var id = 'test'; - var time = Date.now(); expect(tile.inTransition(id)).to.be(true); - - // start of transition - tile.getAlpha(id, time); - expect(tile.inTransition(id)).to.be(true); - - // mid way through transition - time += tile.transition_ / 2; - tile.getAlpha(id, time); - expect(tile.inTransition(id)).to.be(true); - - // end of transition - time += tile.transition_ / 2; - tile.getAlpha(id, time); + tile.endTransition(id); expect(tile.inTransition(id)).to.be(false); }); });