diff --git a/examples/tile-transitions.html b/examples/tile-transitions.html new file mode 100644 index 0000000000..ae366f9a93 --- /dev/null +++ b/examples/tile-transitions.html @@ -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 transition option + of the tile source to 0. +tags: "fade, transition" +--- +
+ diff --git a/examples/tile-transitions.js b/examples/tile-transitions.js new file mode 100644 index 0000000000..83a9b01dda --- /dev/null +++ b/examples/tile-transitions.js @@ -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); +}); diff --git a/externs/olx.js b/externs/olx.js index 8b3cc7a22c..3d93c0073c 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -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.|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.|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.|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.|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.Collection.|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.|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} diff --git a/src/ol/imagetile.js b/src/ol/imagetile.js index 86c75d8183..ad7acec21c 100644 --- a/src/ol/imagetile.js +++ b/src/ol/imagetile.js @@ -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 diff --git a/src/ol/renderer/canvas/tilelayer.js b/src/ol/renderer/canvas/tilelayer.js index ab2d0a480b..ab7ad60e1d 100644 --- a/src/ol/renderer/canvas/tilelayer.js +++ b/src/ol/renderer/canvas/tilelayer.js @@ -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.} */ 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); } }; diff --git a/src/ol/renderer/canvas/vectortilelayer.js b/src/ol/renderer/canvas/vectortilelayer.js index 23474f5711..99af6a4bee 100644 --- a/src/ol/renderer/canvas/vectortilelayer.js +++ b/src/ol/renderer/canvas/vectortilelayer.js @@ -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) { diff --git a/src/ol/reproj/tile.js b/src/ol/reproj/tile.js index a79055faa2..71d77b318a 100644 --- a/src/ol/reproj/tile.js +++ b/src/ol/reproj/tile.js @@ -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); /** diff --git a/src/ol/source/bingmaps.js b/src/ol/source/bingmaps.js index b79be85304..1c340a15ad 100644 --- a/src/ol/source/bingmaps.js +++ b/src/ol/source/bingmaps.js @@ -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 }); /** diff --git a/src/ol/source/tile.js b/src/ol/source/tile.js index 0ee8f9f3cb..a757935d88 100644 --- a/src/ol/source/tile.js +++ b/src/ol/source/tile.js @@ -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); diff --git a/src/ol/source/tilearcgisrest.js b/src/ol/source/tilearcgisrest.js index a78e0e027a..3a504de7a4 100644 --- a/src/ol/source/tilearcgisrest.js +++ b/src/ol/source/tilearcgisrest.js @@ -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 }); /** diff --git a/src/ol/source/tileimage.js b/src/ol/source/tileimage.js index d394bf28e1..acffdf50bf 100644 --- a/src/ol/source/tileimage.js +++ b/src/ol/source/tileimage.js @@ -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); diff --git a/src/ol/source/tilejson.js b/src/ol/source/tilejson.js index 48e9db0fad..d3ab7cb923 100644 --- a/src/ol/source/tilejson.js +++ b/src/ol/source/tilejson.js @@ -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) { diff --git a/src/ol/source/tilewms.js b/src/ol/source/tilewms.js index a28b55586a..979981988d 100644 --- a/src/ol/source/tilewms.js +++ b/src/ol/source/tilewms.js @@ -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 }); /** diff --git a/src/ol/source/urltile.js b/src/ol/source/urltile.js index c66d78d515..39c3ffe06f 100644 --- a/src/ol/source/urltile.js +++ b/src/ol/source/urltile.js @@ -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 }); /** diff --git a/src/ol/source/vectortile.js b/src/ol/source/vectortile.js index e8a9283e83..e54f680bd7 100644 --- a/src/ol/source/vectortile.js +++ b/src/ol/source/vectortile.js @@ -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; diff --git a/src/ol/source/wmts.js b/src/ol/source/wmts.js index 4aedb54dc1..7ec74c36a4 100644 --- a/src/ol/source/wmts.js +++ b/src/ol/source/wmts.js @@ -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_()); diff --git a/src/ol/source/xyz.js b/src/ol/source/xyz.js index 6beb9eae70..eeee16f8fb 100644 --- a/src/ol/source/xyz.js +++ b/src/ol/source/xyz.js @@ -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 }); }; diff --git a/src/ol/source/zoomify.js b/src/ol/source/zoomify.js index f0c0ffed47..467f8aee79 100644 --- a/src/ol/source/zoomify.js +++ b/src/ol/source/zoomify.js @@ -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 diff --git a/src/ol/tile.js b/src/ol/tile.js index 9a1bfe7e84..aec795d436 100644 --- a/src/ol/tile.js +++ b/src/ol/tile.js @@ -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.} + */ + 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; + } +}; diff --git a/src/ol/typedefs.js b/src/ol/typedefs.js index c3483a6170..2781cb321a 100644 --- a/src/ol/typedefs.js +++ b/src/ol/typedefs.js @@ -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.|undefined), - * wrapX: (boolean|undefined)}} + * wrapX: (boolean|undefined), + * transition: (number|undefined)}} */ ol.SourceUrlTileOptions; diff --git a/src/ol/vectorimagetile.js b/src/ol/vectorimagetile.js index 4c3545ef26..5c4a871918 100644 --- a/src/ol/vectorimagetile.js +++ b/src/ol/vectorimagetile.js @@ -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 diff --git a/src/ol/vectortile.js b/src/ol/vectortile.js index 553d7ea35a..a4536fe025 100644 --- a/src/ol/vectortile.js +++ b/src/ol/vectortile.js @@ -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} diff --git a/test/rendering/ol/layer/clip.test.js b/test/rendering/ol/layer/clip.test.js index b131a08d0f..eb09be1e40 100644 --- a/test/rendering/ol/layer/clip.test.js +++ b/test/rendering/ol/layer/clip.test.js @@ -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({ diff --git a/test/rendering/ol/layer/tile.test.js b/test/rendering/ol/layer/tile.test.js index 74aa976ebf..3ff6468064 100644 --- a/test/rendering/ol/layer/tile.test.js +++ b/test/rendering/ol/layer/tile.test.js @@ -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) { diff --git a/test/rendering/ol/layer/vectortile.test.js b/test/rendering/ol/layer/vectortile.test.js index 24e591dfe0..0568e46701 100644 --- a/test/rendering/ol/layer/vectortile.test.js +++ b/test/rendering/ol/layer/vectortile.test.js @@ -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 }); }); diff --git a/test/rendering/ol/source/tilewms.test.js b/test/rendering/ol/source/tilewms.test.js index 4286bc7494..4c2972c434 100644 --- a/test/rendering/ol/source/tilewms.test.js +++ b/test/rendering/ol/source/tilewms.test.js @@ -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 }); } diff --git a/test/spec/ol/renderer/canvas/vectortilelayer.test.js b/test/spec/ol/renderer/canvas/vectortilelayer.test.js index 5c5fa6b589..a1e24ca89c 100644 --- a/test/spec/ol/renderer/canvas/vectortilelayer.test.js +++ b/test/spec/ol/renderer/canvas/vectortilelayer.test.js @@ -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() { diff --git a/test/spec/ol/tile.test.js b/test/spec/ol/tile.test.js index 88bf734073..a8d2b39115 100644 --- a/test/spec/ol/tile.test.js +++ b/test/spec/ol/tile.test.js @@ -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() {