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

Merge pull request #7267 from tschaub/fade

Browse Source 
Render tiles with an opacity transition
This commit is contained in:
Tim Schaub
2017-09-27 19:51:55 -07:00
committed by GitHub
parent 64aa3c25a4 68a1a497b0
commit 8354d5f0a6
28 changed files with 418 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
examples/tile-transitions.html Normal file
View File

@@ -0,0 +1,15 @@
---
layout: example.html
title: Tile Transitions
shortdesc: Custom configuration for opacity transitions on tiles.
docs: >
By default tiles are rendered with an opacity transition - fading in over
250 ms. To disable this behavior, set the <code>transition</code> option
of the tile source to 0.
tags: "fade, transition"
---
<div id="map" class="map"></div>
<label>
render with an opacity transition
<input id="transition" type="checkbox" checked>
</label>

31
examples/tile-transitions.js Normal file
View File

@@ -0,0 +1,31 @@
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.layer.Tile');
goog.require('ol.source.XYZ');
var url = 'https://{a-c}.tiles.mapbox.com/v3/mapbox.world-bright/{z}/{x}/{y}.png';
var withTransition = new ol.layer.Tile({
source: new ol.source.XYZ({url: url})
});
var withoutTransition = new ol.layer.Tile({
source: new ol.source.XYZ({url: url, transition: 0}),
visible: false
});
var map = new ol.Map({
layers: [withTransition, withoutTransition],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2,
maxZoom: 11
})
});
document.getElementById('transition').addEventListener('change', function(event) {
var transition = event.target.checked;
withTransition.setVisible(transition);
withoutTransition.setVisible(!transition);
});

126
externs/olx.js
View File

@@ -463,6 +463,23 @@ olx.SphereMetricOptions.prototype.projection;
olx.SphereMetricOptions.prototype.radius;
/**
* Options for tile constructors.
* @typedef {{transition: (number|undefined)}}
*/
olx.TileOptions;
/**
* A duration for tile opacity transitions. By default, tiles will render with
* an opacity transition that lasts 250 ms. To change the duration, pass a
* number in milliseconds. A duration of 0 disables the opacity transition.
* @type {number|undefined}
* @api
*/
olx.TileOptions.prototype.transition;
/**
* Object literal with options for the {@link ol.Map#forEachFeatureAtPixel} and
* {@link ol.Map#hasFeatureAtPixel} methods.
@@ -4597,7 +4614,8 @@ olx.source;
* maxZoom: (number|undefined),
* reprojectionErrorThreshold: (number|undefined),
* tileLoadFunction: (ol.TileLoadFunctionType|undefined),
* wrapX: (boolean|undefined)}}
* wrapX: (boolean|undefined),
* transition: (number|undefined)}}
*/
olx.source.BingMapsOptions;
@@ -4681,6 +4699,15 @@ olx.source.BingMapsOptions.prototype.tileLoadFunction;
olx.source.BingMapsOptions.prototype.wrapX;
/**
* Duration of the opacity transition for rendering. To disable the opacity
* transition, pass `transition: 0`.
* @type {number|undefined}
* @api
*/
olx.source.BingMapsOptions.prototype.transition;
/**
* @typedef {{attributions: (ol.AttributionLike|undefined),
* distance: (number|undefined),
@@ -4845,7 +4872,8 @@ olx.source.TileUTFGridOptions.prototype.url;
* tileUrlFunction: (ol.TileUrlFunctionType|undefined),
* url: (string|undefined),
* urls: (Array.<string>|undefined),
* wrapX: (boolean|undefined)}}
* wrapX: (boolean|undefined),
* transition: (number|undefined)}}
*/
olx.source.TileImageOptions;
@@ -4998,6 +5026,15 @@ olx.source.TileImageOptions.prototype.urls;
olx.source.TileImageOptions.prototype.wrapX;
/**
* Duration of the opacity transition for rendering. To disable the opacity
* transition, pass `transition: 0`.
* @type {number|undefined}
* @api
*/
olx.source.TileImageOptions.prototype.transition;
/**
* @typedef {{attributions: (ol.AttributionLike|undefined),
* cacheSize: (number|undefined),
@@ -5014,7 +5051,8 @@ olx.source.TileImageOptions.prototype.wrapX;
* tileUrlFunction: (ol.TileUrlFunctionType|undefined),
* url: (string|undefined),
* urls: (Array.<string>|undefined),
* wrapX: (boolean|undefined)}}
* wrapX: (boolean|undefined),
* transition: (number|undefined)}}
*/
olx.source.VectorTileOptions;
@@ -5154,6 +5192,15 @@ olx.source.VectorTileOptions.prototype.urls;
olx.source.VectorTileOptions.prototype.wrapX;
/**
* Duration of the opacity transition for rendering. To disable the opacity
* transition, pass `transition: 0`.
* @type {number|undefined}
* @api
*/
olx.source.VectorTileOptions.prototype.transition;
/**
* @typedef {{url: (string|undefined),
* displayDpi: (number|undefined),
@@ -6070,7 +6117,8 @@ olx.source.ImageStaticOptions.prototype.url;
* tileLoadFunction: (ol.TileLoadFunctionType|undefined),
* url: (string|undefined),
* urls: (Array.<string>|undefined),
* wrapX: (boolean|undefined)}}
* wrapX: (boolean|undefined),
* transition: (number|undefined)}}
*/
olx.source.TileArcGISRestOptions;
@@ -6184,6 +6232,15 @@ olx.source.TileArcGISRestOptions.prototype.url;
olx.source.TileArcGISRestOptions.prototype.wrapX;
/**
* Duration of the opacity transition for rendering. To disable the opacity
* transition, pass `transition: 0`.
* @type {number|undefined}
* @api
*/
olx.source.TileArcGISRestOptions.prototype.transition;
/**
* ArcGIS Rest service urls. Use this instead of `url` when the ArcGIS Service supports multiple
* urls for export requests.
@@ -6202,7 +6259,8 @@ olx.source.TileArcGISRestOptions.prototype.urls;
* tileJSON: (TileJSON|undefined),
* tileLoadFunction: (ol.TileLoadFunctionType|undefined),
* url: (string|undefined),
* wrapX: (boolean|undefined)}}
* wrapX: (boolean|undefined),
* transition: (number|undefined)}}
*/
olx.source.TileJSONOptions;
@@ -6293,6 +6351,15 @@ olx.source.TileJSONOptions.prototype.url;
olx.source.TileJSONOptions.prototype.wrapX;
/**
* Duration of the opacity transition for rendering. To disable the opacity
* transition, pass `transition: 0`.
* @type {number|undefined}
* @api
*/
olx.source.TileJSONOptions.prototype.transition;
/**
* @typedef {{attributions: (ol.AttributionLike|undefined),
* cacheSize: (number|undefined),
@@ -6311,7 +6378,8 @@ olx.source.TileJSONOptions.prototype.wrapX;
* tileLoadFunction: (ol.TileLoadFunctionType|undefined),
* url: (string|undefined),
* urls: (Array.<string>|undefined),
* wrapX: (boolean|undefined)}}
* wrapX: (boolean|undefined),
* transition: (number|undefined)}}
*/
olx.source.TileWMSOptions;
@@ -6475,6 +6543,15 @@ olx.source.TileWMSOptions.prototype.urls;
olx.source.TileWMSOptions.prototype.wrapX;
/**
* Duration of the opacity transition for rendering. To disable the opacity
* transition, pass `transition: 0`.
* @type {number|undefined}
* @api
*/
olx.source.TileWMSOptions.prototype.transition;
/**
* @typedef {{attributions: (ol.AttributionLike|undefined),
* features: (Array.<ol.Feature>|ol.Collection.<ol.Feature>|undefined),
@@ -6630,7 +6707,8 @@ olx.source.VectorOptions.prototype.wrapX;
* tileClass: (function(new: ol.ImageTile, ol.TileCoord,
* ol.TileState, string, ?string,
* ol.TileLoadFunctionType)|undefined),
* wrapX: (boolean|undefined)}}
* wrapX: (boolean|undefined),
* transition: (number|undefined)}}
*/
olx.source.WMTSOptions;
@@ -6814,6 +6892,15 @@ olx.source.WMTSOptions.prototype.urls;
olx.source.WMTSOptions.prototype.wrapX;
/**
* Duration of the opacity transition for rendering. To disable the opacity
* transition, pass `transition: 0`.
* @type {number|undefined}
* @api
*/
olx.source.WMTSOptions.prototype.transition;
/**
* @typedef {{attributions: (ol.AttributionLike|undefined),
* cacheSize: (number|undefined),
@@ -6831,7 +6918,8 @@ olx.source.WMTSOptions.prototype.wrapX;
* tileUrlFunction: (ol.TileUrlFunctionType|undefined),
* url: (string|undefined),
* urls: (Array.<string>|undefined),
* wrapX: (boolean|undefined)}}
* wrapX: (boolean|undefined),
* transition: (number|undefined)}}
*/
olx.source.XYZOptions;
@@ -6987,6 +7075,16 @@ olx.source.XYZOptions.prototype.urls;
*/
olx.source.XYZOptions.prototype.wrapX;
/**
* Duration of the opacity transition for rendering. To disable the opacity
* transition, pass `transition: 0`.
* @type {number|undefined}
* @api
*/
olx.source.XYZOptions.prototype.transition;
/**
* @typedef {{attributions: (ol.AttributionLike|undefined),
* cacheSize: (number|undefined),
@@ -7111,7 +7209,8 @@ olx.source.CartoDBOptions.prototype.account;
* reprojectionErrorThreshold: (number|undefined),
* url: !string,
* tierSizeCalculation: (string|undefined),
* size: ol.Size}}
* size: ol.Size,
* transition: (number|undefined)}}
*/
olx.source.ZoomifyOptions;
@@ -7202,6 +7301,15 @@ olx.source.ZoomifyOptions.prototype.tierSizeCalculation;
olx.source.ZoomifyOptions.prototype.size;
/**
* Duration of the opacity transition for rendering. To disable the opacity
* transition, pass `transition: 0`.
* @type {number|undefined}
* @api
*/
olx.source.ZoomifyOptions.prototype.transition;
/**
* Namespace.
* @type {Object}

5
src/ol/imagetile.js
View File

@@ -16,10 +16,11 @@ goog.require('ol.events.EventType');
* @param {string} src Image source URI.
* @param {?string} crossOrigin Cross origin.
* @param {ol.TileLoadFunctionType} tileLoadFunction Tile load function.
* @param {olx.TileOptions=} opt_options Tile options.
*/
ol.ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction) {
ol.ImageTile = function(tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) {
ol.Tile.call(this, tileCoord, state);
ol.Tile.call(this, tileCoord, state, opt_options);
/**
* Image URI

71
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');
@@ -7,7 +5,6 @@ goog.require('ol.LayerType');
goog.require('ol.TileRange');
goog.require('ol.TileState');
goog.require('ol.ViewHint');
goog.require('ol.array');
goog.require('ol.dom');
goog.require('ol.extent');
goog.require('ol.renderer.Type');
@@ -181,23 +178,29 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer
tile = tile.getInterimTile();
}
if (this.isDrawableTile_(tile)) {
var uid = ol.getUid(this);
if (tile.getState() == ol.TileState.LOADED) {
tilesToDrawByZ[z][tile.tileCoord.toString()] = tile;
if (!newTiles && this.renderedTiles.indexOf(tile) == -1) {
var inTransition = tile.inTransition(uid);
if (!newTiles && (inTransition || this.renderedTiles.indexOf(tile) === -1)) {
newTiles = true;
}
}
continue;
if (tile.getAlpha(uid, frameState.time) === 1) {
// don't look for alt tiles if alpha is 1
continue;
}
}
var fullyLoaded = tileGrid.forEachTileCoordParentTileRange(
tile.tileCoord, findLoadedTiles, null, tmpTileRange, tmpExtent);
if (!fullyLoaded) {
var childTileRange = tileGrid.getTileCoordChildTileRange(
tile.tileCoord, tmpTileRange, tmpExtent);
if (childTileRange) {
findLoadedTiles(z + 1, childTileRange);
}
var childTileRange = tileGrid.getTileCoordChildTileRange(
tile.tileCoord, tmpTileRange, tmpExtent);
var covered = false;
if (childTileRange) {
covered = findLoadedTiles(z + 1, childTileRange);
}
if (!covered) {
tileGrid.forEachTileCoordParentTileRange(
tile.tileCoord, findLoadedTiles, null, tmpTileRange, tmpExtent);
}
}
@@ -233,7 +236,15 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer
this.renderedTiles.length = 0;
/** @type {Array.<number>} */
var zs = Object.keys(tilesToDrawByZ).map(Number);
zs.sort(ol.array.numberSafeCompareFunction);
zs.sort(function(a, b) {
if (a === z) {
return 1;
} else if (b === z) {
return -1;
} else {
return a > b ? 1 : a < b ? -1 : 0;
}
});
var currentResolution, currentScale, currentTilePixelSize, currentZ, i, ii;
var tileExtent, tileGutter, tilesToDraw, w, h;
for (i = 0, ii = zs.length; i < ii; ++i) {
@@ -250,7 +261,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,15 +304,33 @@ 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) {
if (!this.getLayer().getSource().getOpaque(frameState.viewState.projection)) {
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 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);
}
var image = tile.getImage(this.getLayer());
if (image) {
this.context.drawImage(image, gutter, gutter,
image.width - 2 * gutter, image.height - 2 * gutter, x, y, w, h);
var alphaChanged = alpha !== this.context.globalAlpha;
if (alphaChanged) {
this.context.save();
this.context.globalAlpha = alpha;
}
this.context.drawImage(image, gutter, gutter,
image.width - 2 * gutter, image.height - 2 * gutter, x, y, w, h);
if (alphaChanged) {
this.context.restore();
}
if (alpha !== 1) {
frameState.animate = true;
} else if (transition) {
tile.endTransition(uid);
}
};

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) {

3
src/ol/reproj/tile.js
View File

@@ -34,8 +34,7 @@ goog.require('ol.reproj.Triangulation');
ol.reproj.Tile = function(sourceProj, sourceTileGrid,
targetProj, targetTileGrid, tileCoord, wrappedTileCoord,
pixelRatio, gutter, getTileFunction,
opt_errorThreshold,
opt_renderEdges) {
opt_errorThreshold, opt_renderEdges) {
ol.Tile.call(this, tileCoord, ol.TileState.IDLE);
/**

3
src/ol/source/bingmaps.js
View File

@@ -38,7 +38,8 @@ ol.source.BingMaps = function(options) {
state: ol.source.State.LOADING,
tileLoadFunction: options.tileLoadFunction,
tilePixelRatio: this.hidpi_ ? 2 : 1,
wrapX: options.wrapX !== undefined ? options.wrapX : true
wrapX: options.wrapX !== undefined ? options.wrapX : true,
transition: options.transition
});
/**

6
src/ol/source/tile.js
View File

@@ -71,6 +71,12 @@ ol.source.Tile = function(options) {
*/
this.key_ = '';
/**
* @protected
* @type {olx.TileOptions}
*/
this.tileOptions = {transition: options.transition};
};
ol.inherits(ol.source.Tile, ol.source.Source);

3
src/ol/source/tilearcgisrest.js
View File

@@ -39,7 +39,8 @@ ol.source.TileArcGISRest = function(opt_options) {
tileLoadFunction: options.tileLoadFunction,
url: options.url,
urls: options.urls,
wrapX: options.wrapX !== undefined ? options.wrapX : true
wrapX: options.wrapX !== undefined ? options.wrapX : true,
transition: options.transition
});
/**

8
src/ol/source/tileimage.js
View File

@@ -39,7 +39,8 @@ ol.source.TileImage = function(options) {
tileUrlFunction: options.tileUrlFunction,
url: options.url,
urls: options.urls,
wrapX: options.wrapX
wrapX: options.wrapX,
transition: options.transition
});
/**
@@ -52,7 +53,7 @@ ol.source.TileImage = function(options) {
/**
* @protected
* @type {function(new: ol.ImageTile, ol.TileCoord, ol.TileState, string,
* ?string, ol.TileLoadFunctionType)}
* ?string, ol.TileLoadFunctionType, olx.TileOptions=)}
*/
this.tileClass = options.tileClass !== undefined ?
options.tileClass : ol.ImageTile;
@@ -222,7 +223,8 @@ ol.source.TileImage.prototype.createTile_ = function(z, x, y, pixelRatio, projec
tileUrl !== undefined ? ol.TileState.IDLE : ol.TileState.EMPTY,
tileUrl !== undefined ? tileUrl : '',
this.crossOrigin,
this.tileLoadFunction);
this.tileLoadFunction,
this.tileOptions);
tile.key = key;
ol.events.listen(tile, ol.events.EventType.CHANGE,
this.handleTileChange, this);

3
src/ol/source/tilejson.js
View File

@@ -43,7 +43,8 @@ ol.source.TileJSON = function(options) {
reprojectionErrorThreshold: options.reprojectionErrorThreshold,
state: ol.source.State.LOADING,
tileLoadFunction: options.tileLoadFunction,
wrapX: options.wrapX !== undefined ? options.wrapX : true
wrapX: options.wrapX !== undefined ? options.wrapX : true,
transition: options.transition
});
if (options.url) {

3
src/ol/source/tilewms.js
View File

@@ -47,7 +47,8 @@ ol.source.TileWMS = function(opt_options) {
tileLoadFunction: options.tileLoadFunction,
url: options.url,
urls: options.urls,
wrapX: options.wrapX !== undefined ? options.wrapX : true
wrapX: options.wrapX !== undefined ? options.wrapX : true,
transition: options.transition
});
/**

3
src/ol/source/urltile.js
View File

@@ -29,7 +29,8 @@ ol.source.UrlTile = function(options) {
state: options.state,
tileGrid: options.tileGrid,
tilePixelRatio: options.tilePixelRatio,
wrapX: options.wrapX
wrapX: options.wrapX,
transition: options.transition
});
/**

6
src/ol/source/vectortile.js
View File

@@ -51,7 +51,8 @@ ol.source.VectorTile = function(options) {
tileUrlFunction: options.tileUrlFunction,
url: options.url,
urls: options.urls,
wrapX: options.wrapX === undefined ? true : options.wrapX
wrapX: options.wrapX === undefined ? true : options.wrapX,
transition: options.transition
});
/**
@@ -125,7 +126,8 @@ ol.source.VectorTile.prototype.getTile = function(z, x, y, pixelRatio, projectio
this.format_, this.tileLoadFunction, urlTileCoord, this.tileUrlFunction,
this.tileGrid, this.getTileGridForProjection(projection),
this.sourceTiles_, pixelRatio, projection, this.tileClass,
this.handleTileChange.bind(this));
this.handleTileChange.bind(this),
this.tileOptions);
this.tileCache.set(tileCoordKey, tile);
return tile;

3
src/ol/source/wmts.js
View File

@@ -166,7 +166,8 @@ ol.source.WMTS = function(options) {
tilePixelRatio: options.tilePixelRatio,
tileUrlFunction: tileUrlFunction,
urls: urls,
wrapX: options.wrapX !== undefined ? options.wrapX : false
wrapX: options.wrapX !== undefined ? options.wrapX : false,
transition: options.transition
});
this.setKey(this.getKeyForDimensions_());

3
src/ol/source/xyz.js
View File

@@ -54,7 +54,8 @@ ol.source.XYZ = function(opt_options) {
tileUrlFunction: options.tileUrlFunction,
url: options.url,
urls: options.urls,
wrapX: options.wrapX !== undefined ? options.wrapX : true
wrapX: options.wrapX !== undefined ? options.wrapX : true,
transition: options.transition
});
};

8
src/ol/source/zoomify.js
View File

@@ -139,7 +139,8 @@ ol.source.Zoomify = function(opt_options) {
reprojectionErrorThreshold: options.reprojectionErrorThreshold,
tileClass: ol.source.Zoomify.Tile_,
tileGrid: tileGrid,
tileUrlFunction: tileUrlFunction
tileUrlFunction: tileUrlFunction,
transition: options.transition
});
};
@@ -154,12 +155,13 @@ ol.inherits(ol.source.Zoomify, ol.source.TileImage);
* @param {string} src Image source URI.
* @param {?string} crossOrigin Cross origin.
* @param {ol.TileLoadFunctionType} tileLoadFunction Tile load function.
* @param {olx.TileOptions=} opt_options Tile options.
* @private
*/
ol.source.Zoomify.Tile_ = function(
tileCoord, state, src, crossOrigin, tileLoadFunction) {
tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) {
ol.ImageTile.call(this, tileCoord, state, src, crossOrigin, tileLoadFunction);
ol.ImageTile.call(this, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options);
/**
* @private

71
src/ol/tile.js
View File

@@ -2,6 +2,7 @@ goog.provide('ol.Tile');
goog.require('ol');
goog.require('ol.TileState');
goog.require('ol.easing');
goog.require('ol.events.EventTarget');
goog.require('ol.events.EventType');
@@ -15,11 +16,13 @@ goog.require('ol.events.EventType');
* @extends {ol.events.EventTarget}
* @param {ol.TileCoord} tileCoord Tile coordinate.
* @param {ol.TileState} state State.
* @param {olx.TileOptions=} opt_options Tile options.
*/
ol.Tile = function(tileCoord, state) {
ol.Tile = function(tileCoord, state, opt_options) {
ol.events.EventTarget.call(this);
var options = opt_options ? opt_options : {};
/**
* @type {ol.TileCoord}
*/
@@ -47,6 +50,20 @@ ol.Tile = function(tileCoord, state) {
*/
this.key = '';
/**
* The duration for the opacity transition.
* @type {number}
*/
this.transition_ = options.transition === undefined ?
250 : options.transition;
/**
* 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_ = {};
};
ol.inherits(ol.Tile, ol.events.EventTarget);
@@ -161,3 +178,53 @@ ol.Tile.prototype.setState = function(state) {
* @api
*/
ol.Tile.prototype.load = function() {};
/**
* Get the alpha value for rendering.
* @param {number} id An id for the renderer.
* @param {number} time The render frame time.
* @return {number} A number between 0 and 1.
*/
ol.Tile.prototype.getAlpha = function(id, time) {
if (!this.transition_) {
return 1;
}
var start = this.transitionStarts_[id];
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_) {
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;
};
/**
* 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;
}
};

6
src/ol/typedefs.js
View File

@@ -580,7 +580,8 @@ ol.SourceSourceOptions;
* projection: ol.ProjectionLike,
* state: (ol.source.State|undefined),
* tileGrid: (ol.tilegrid.TileGrid|undefined),
* wrapX: (boolean|undefined)}}
* wrapX: (boolean|undefined),
* transition: (number|undefined)}}
*/
ol.SourceTileOptions;
@@ -599,7 +600,8 @@ ol.SourceTileOptions;
* tileUrlFunction: (ol.TileUrlFunctionType|undefined),
* url: (string|undefined),
* urls: (Array.<string>|undefined),
* wrapX: (boolean|undefined)}}
* wrapX: (boolean|undefined),
* transition: (number|undefined)}}
*/
ol.SourceUrlTileOptions;

5
src/ol/vectorimagetile.js
View File

@@ -30,12 +30,13 @@ goog.require('ol.featureloader');
* instantiate for source tiles.
* @param {function(this: ol.source.VectorTile, ol.events.Event)} handleTileChange
* 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) {
pixelRatio, projection, tileClass, handleTileChange, opt_options) {
ol.Tile.call(this, tileCoord, state);
ol.Tile.call(this, tileCoord, state, opt_options);
/**
* @private

5
src/ol/vectortile.js
View File

@@ -13,10 +13,11 @@ goog.require('ol.TileState');
* @param {string} src Data source url.
* @param {ol.format.Feature} format Feature format.
* @param {ol.TileLoadFunctionType} tileLoadFunction Tile load function.
* @param {olx.TileOptions=} opt_options Tile options.
*/
ol.VectorTile = function(tileCoord, state, src, format, tileLoadFunction) {
ol.VectorTile = function(tileCoord, state, src, format, tileLoadFunction, opt_options) {
ol.Tile.call(this, tileCoord, state);
ol.Tile.call(this, tileCoord, state, opt_options);
/**
* @type {number}

3
test/rendering/ol/layer/clip.test.js
View File

@@ -58,7 +58,8 @@ describe('layer clipping', function() {
it('clips to all parts of the MultiPolygon', function(done) {
var source = new ol.source.XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
});
var layer = new ol.layer.Tile({

33
test/rendering/ol/layer/tile.test.js
View File

@@ -72,12 +72,28 @@ describe('ol.rendering.layer.Tile', function() {
});
}
describe('with tile transition', function() {
it('renders correctly after the transition', function(done) {
createMap('canvas');
var source = new ol.source.XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
});
waitForTiles([source], {}, function() {
setTimeout(function() {
expectResemble(map, 'rendering/ol/layer/expected/osm-canvas.png',
IMAGE_TOLERANCE, done);
}, 500);
});
});
});
describe('single tile layer', function() {
var source;
beforeEach(function() {
source = new ol.source.XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
});
});
@@ -104,10 +120,12 @@ describe('ol.rendering.layer.Tile', function() {
beforeEach(function() {
source1 = new ol.source.XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
});
source2 = new ol.source.XYZ({
url: 'rendering/ol/data/tiles/stamen-labels/{z}/{x}/{y}.png'
url: 'rendering/ol/data/tiles/stamen-labels/{z}/{x}/{y}.png',
transition: 0
});
});
@@ -176,7 +194,8 @@ describe('ol.rendering.layer.Tile', function() {
beforeEach(function() {
source = new ol.source.XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
});
});
@@ -205,7 +224,8 @@ describe('ol.rendering.layer.Tile', function() {
url: 'rendering/ol/data/tiles/' + tileSize + '/{z}/{x}/{y}.png',
tileGrid: ol.tilegrid.createXYZ({
tileSize: tileSize.split('x')
})
}),
transition: 0
});
}
@@ -255,7 +275,8 @@ describe('ol.rendering.layer.Tile', function() {
beforeEach(function() {
source = new ol.source.XYZ({
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png',
transition: 0
});
onAddLayer = function(evt) {
evt.element.on('render', function(e) {

3
test/rendering/ol/layer/vectortile.test.js
View File

@@ -65,7 +65,8 @@ describe('ol.rendering.layer.VectorTile', function() {
source = new ol.source.VectorTile({
format: new ol.format.MVT(),
tileGrid: ol.tilegrid.createXYZ(),
url: 'rendering/ol/data/tiles/mvt/{z}-{x}-{y}.vector.pbf'
url: 'rendering/ol/data/tiles/mvt/{z}-{x}-{y}.vector.pbf',
transition: 0
});
});

3
test/rendering/ol/source/tilewms.test.js
View File

@@ -51,7 +51,8 @@ describe('ol.rendering.source.TileWMS', function() {
'LAYERS': 'layer'
},
gutter: gutter,
url: 'rendering/ol/data/tiles/wms/wms' + gutter + '.png'
url: 'rendering/ol/data/tiles/wms/wms' + gutter + '.png',
transition: 0
});
}

4
test/spec/ol/renderer/canvas/vectortilelayer.test.js
View File

@@ -199,7 +199,8 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
it('re-renders when layer changed', function() {
var layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
tileGrid: ol.tilegrid.createXYZ()
tileGrid: ol.tilegrid.createXYZ(),
transition: 0
})
});
var sourceTile = new ol.VectorTile([0, 0, 0], 2);
@@ -209,6 +210,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
return document.createElement('canvas');
};
var tile = new ol.VectorImageTile([0, 0, 0]);
tile.transition_ = 0;
tile.wrappedTileCoord = [0, 0, 0];
tile.setState(ol.TileState.LOADED);
tile.getSourceTile = function() {

53
test/spec/ol/tile.test.js
View File

@@ -1,10 +1,59 @@
goog.require('ol');
goog.require('ol.ImageTile');
goog.require('ol.Tile');
goog.require('ol.TileState');
describe('ol.Tile', function() {
describe('constructor', function() {
it('sets a default transition', function() {
var coord = [0, 0, 0];
var tile = new ol.Tile(coord, ol.TileState.IDLE);
expect(tile.transition_).to.equal(250);
});
it('allows the transition to be set', function() {
var coord = [0, 0, 0];
var transition = 500;
var tile = new ol.Tile(coord, ol.TileState.IDLE, {transition: transition});
expect(tile.transition_).to.equal(transition);
});
});
describe('#getAlpha()', function() {
it('returns the alpha value for a tile in transition', function() {
var coord = [0, 0, 0];
var tile = new ol.Tile(coord, ol.TileState.IDLE);
var id = 'test';
var time = Date.now();
var startAlpha = tile.getAlpha(id, time);
expect(startAlpha > 0).to.be(true);
expect(startAlpha < 1).to.be(true);
time += tile.transition_ / 2;
var midAlpha = tile.getAlpha(id, time);
expect(midAlpha > startAlpha).to.be(true);
expect(midAlpha < 1).to.be(true);
time += tile.transition_ / 2;
var endAlpha = tile.getAlpha(id, time);
expect(endAlpha).to.be(1);
});
});
describe('#inTransition()', function() {
it('determines if the tile is in transition', function() {
var coord = [0, 0, 0];
var tile = new ol.Tile(coord, ol.TileState.IDLE);
var id = 'test';
expect(tile.inTransition(id)).to.be(true);
tile.endTransition(id);
expect(tile.inTransition(id)).to.be(false);
});
});
describe('interimChain', function() {
var head, renderTile;
beforeEach(function() {