ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Ensure tile transitions complete

Browse Source
This commit is contained in:
Tim Schaub
2017-09-23 11:17:12 -06:00
parent 16e6d13700
commit f7bfee8497
4 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/ol/renderer/canvas/tilelayer.js
View File

@@ -1,5 +1,3 @@
// FIXME find correct globalCompositeOperation
goog.provide('ol.renderer.canvas.TileLayer');
goog.require('ol');
@@ -183,8 +181,8 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer
if (this.isDrawableTile_(tile)) {
if (tile.getState() == ol.TileState.LOADED) {
tilesToDrawByZ[z][tile.tileCoord.toString()] = tile;
var inTransition = tile.getAlpha && tile.getAlpha(ol.getUid(this), frameState.time) !== 1;
if (!newTiles && (this.renderedTiles.indexOf(tile) === -1 || inTransition)) {
var inTransition = tile.inTransition && tile.inTransition(ol.getUid(this));
if (!newTiles && (inTransition || this.renderedTiles.indexOf(tile) === -1)) {
newTiles = true;
}
}
@@ -250,7 +248,7 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer
y = (imageExtent[3] - tileExtent[3]) / tileResolution * tilePixelRatio / oversampling;
w = currentTilePixelSize[0] * currentScale / oversampling;
h = currentTilePixelSize[1] * currentScale / oversampling;
this.drawTileImage(tile, frameState, layerState, x, y, w, h, tileGutter);
this.drawTileImage(tile, frameState, layerState, x, y, w, h, tileGutter, z === currentZ);
this.renderedTiles.push(tile);
}
}
@@ -293,20 +291,21 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer
* @param {number} w Width of the tile.
* @param {number} h Height of the tile.
* @param {number} gutter Tile gutter.
* @param {boolean} transition Apply an alpha transition.
*/
ol.renderer.canvas.TileLayer.prototype.drawTileImage = function(tile, frameState, layerState, x, y, w, h, gutter) {
ol.renderer.canvas.TileLayer.prototype.drawTileImage = function(tile, frameState, layerState, x, y, w, h, gutter, transition) {
var image = tile.getImage(this.getLayer());
if (!image) {
return;
}
var alpha = tile.getAlpha(ol.getUid(this), frameState.time);
var alpha = transition ? tile.getAlpha(ol.getUid(this), frameState.time) : 1;
if (alpha === 1 && !this.getLayer().getSource().getOpaque(frameState.viewState.projection)) {
this.context.clearRect(x, y, w, h);
}
var alphaChanged = alpha !== this.context.globalAlpha;
if (alphaChanged) {
this.context.save();
this.context.globalAlpha = Math.min(0.5, alpha);
this.context.globalAlpha = alpha;
}
this.context.drawImage(image, gutter, gutter,
image.width - 2 * gutter, image.height - 2 * gutter, x, y, w, h);

2
src/ol/renderer/canvas/vectortilelayer.js
View File

@@ -224,7 +224,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup_ = function(
* @inheritDoc
*/
ol.renderer.canvas.VectorTileLayer.prototype.drawTileImage = function(
tile, frameState, layerState, x, y, w, h, gutter) {
tile, frameState, layerState, x, y, w, h, gutter, transition) {
var vectorImageTile = /** @type {ol.VectorImageTile} */ (tile);
this.createReplayGroup_(vectorImageTile, frameState);
if (this.context) {

21
src/ol/tile.js
View File

@@ -58,7 +58,8 @@ ol.Tile = function(tileCoord, state, opt_options) {
250 : options.transition;
/**
* Lookup of start times for rendering transitions.
* Lookup of start times for rendering transitions. If the start time is
* equal to -1, the transition is complete.
* @type {Object.<number, number>}
*/
this.transitionStarts_ = {};
@@ -193,10 +194,28 @@ ol.Tile.prototype.getAlpha = function(id, time) {
if (!start) {
start = time;
this.transitionStarts_[id] = start;
} else if (start === -1) {
return 1;
}
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_);
};
/**
* Determine if a tile is in an alpha transition. A tile is considered in
* transition if tile.getAlpha() has not yet been called or has been called
* and returned 1.
* @param {number} id An id for the renderer.
* @return {boolean} The tile is in transition.
*/
ol.Tile.prototype.inTransition = function(id) {
if (!this.transition_) {
return false;
}
return this.transitionStarts_[id] !== -1;
};