From 76726a3a6f87d366f39f2e299566e90a84234e2b Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 16 Sep 2017 15:53:29 -0600 Subject: [PATCH 01/10] Render tiles with an opacity transition --- src/ol/renderer/canvas/tilelayer.js | 18 ++++++++++--- src/ol/tile.js | 42 +++++++++++++++++++++++++++++ 2 files changed, 57 insertions(+), 3 deletions(-) diff --git a/src/ol/renderer/canvas/tilelayer.js b/src/ol/renderer/canvas/tilelayer.js index ab2d0a480b..87537ffc41 100644 --- a/src/ol/renderer/canvas/tilelayer.js +++ b/src/ol/renderer/canvas/tilelayer.js @@ -183,7 +183,7 @@ 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; - if (!newTiles && this.renderedTiles.indexOf(tile) == -1) { + if (!newTiles && (this.renderedTiles.indexOf(tile) === -1 || tile.getAlpha(ol.getUid(this), frameState.time) !== 1)) { newTiles = true; } } @@ -225,7 +225,6 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer canvas.width = width; canvas.height = height; } else { - context.clearRect(0, 0, width, height); oversampling = this.oversampling_; } } @@ -295,13 +294,26 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer * @param {number} gutter Tile gutter. */ ol.renderer.canvas.TileLayer.prototype.drawTileImage = function(tile, frameState, layerState, x, y, w, h, gutter) { - if (!this.getLayer().getSource().getOpaque(frameState.viewState.projection)) { + var alpha = tile.getAlpha(ol.getUid(this), frameState.time); + 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) { + 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; + } } }; diff --git a/src/ol/tile.js b/src/ol/tile.js index 9a1bfe7e84..e5676e9e4b 100644 --- a/src/ol/tile.js +++ b/src/ol/tile.js @@ -1,6 +1,7 @@ goog.provide('ol.Tile'); goog.require('ol'); +goog.require('ol.easing'); goog.require('ol.TileState'); goog.require('ol.events.EventTarget'); goog.require('ol.events.EventType'); @@ -47,6 +48,24 @@ ol.Tile = function(tileCoord, state) { */ this.key = ''; + /** + * The timing function to apply to any opacity transition. + * @type {function(number):number} + */ + this.transitionEasing_ = ol.easing.linear; + + /** + * The duration for the opacity transition. + * @type {number} + */ + this.transitionDuration_ = 250; + + /** + * Lookup of start times for rendering transitions. + * @type {Object.} + */ + this.transitionStarts_ = {}; + }; ol.inherits(ol.Tile, ol.events.EventTarget); @@ -161,3 +180,26 @@ 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.transitionEasing_) { + return 1; + } + + var start = this.transitionStarts_[id]; + if (!start) { + start = time; + this.transitionStarts_[id] = start; + } + var delta = Date.now() - start + (1000 / 60); // avoid rendering at 0 + if (delta >= this.transitionDuration_) { + return 1; + } + return this.transitionEasing_(delta / this.transitionDuration_); +}; From 16e6d137004d8797463d25b6c7a0ecd6c440bccd Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 16 Sep 2017 15:54:29 -0600 Subject: [PATCH 02/10] Make tile transitions configurable --- examples/tile-transitions.html | 15 +++ examples/tile-transitions.js | 31 +++++ externs/olx.js | 126 ++++++++++++++++-- src/ol/imagetile.js | 5 +- src/ol/renderer/canvas/tilelayer.js | 34 ++--- src/ol/reproj/tile.js | 3 +- src/ol/source/bingmaps.js | 3 +- src/ol/source/tile.js | 6 + src/ol/source/tilearcgisrest.js | 3 +- src/ol/source/tileimage.js | 8 +- src/ol/source/tilejson.js | 3 +- src/ol/source/tilewms.js | 3 +- src/ol/source/urltile.js | 3 +- src/ol/source/vectortile.js | 6 +- src/ol/source/wmts.js | 3 +- src/ol/source/xyz.js | 3 +- src/ol/source/zoomify.js | 8 +- src/ol/tile.js | 25 ++-- src/ol/typedefs.js | 6 +- src/ol/vectorimagetile.js | 5 +- src/ol/vectortile.js | 5 +- test/rendering/ol/layer/tile.test.js | 18 ++- test/rendering/ol/layer/vectortile.test.js | 3 +- test/rendering/ol/source/tilewms.test.js | 3 +- .../renderer/canvas/vectortilelayer.test.js | 4 +- 25 files changed, 259 insertions(+), 73 deletions(-) create mode 100644 examples/tile-transitions.html create mode 100644 examples/tile-transitions.js 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 7cc408b62d..555b994392 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 + * a 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 87537ffc41..f9805dfbb9 100644 --- a/src/ol/renderer/canvas/tilelayer.js +++ b/src/ol/renderer/canvas/tilelayer.js @@ -183,7 +183,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; - if (!newTiles && (this.renderedTiles.indexOf(tile) === -1 || tile.getAlpha(ol.getUid(this), frameState.time) !== 1)) { + var inTransition = tile.getAlpha && tile.getAlpha(ol.getUid(this), frameState.time) !== 1; + if (!newTiles && (this.renderedTiles.indexOf(tile) === -1 || inTransition)) { newTiles = true; } } @@ -294,26 +295,27 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer * @param {number} gutter Tile gutter. */ ol.renderer.canvas.TileLayer.prototype.drawTileImage = function(tile, frameState, layerState, x, y, w, h, gutter) { + var image = tile.getImage(this.getLayer()); + if (!image) { + return; + } var alpha = tile.getAlpha(ol.getUid(this), frameState.time); 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) { - 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); + var alphaChanged = alpha !== this.context.globalAlpha; + if (alphaChanged) { + this.context.save(); + this.context.globalAlpha = Math.min(0.5, 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; - } + if (alphaChanged) { + this.context.restore(); + } + if (alpha !== 1) { + frameState.animate = true; } }; 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 e5676e9e4b..43ccf74c35 100644 --- a/src/ol/tile.js +++ b/src/ol/tile.js @@ -1,8 +1,8 @@ goog.provide('ol.Tile'); goog.require('ol'); -goog.require('ol.easing'); goog.require('ol.TileState'); +goog.require('ol.easing'); goog.require('ol.events.EventTarget'); goog.require('ol.events.EventType'); @@ -16,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} */ @@ -48,17 +50,12 @@ ol.Tile = function(tileCoord, state) { */ this.key = ''; - /** - * The timing function to apply to any opacity transition. - * @type {function(number):number} - */ - this.transitionEasing_ = ol.easing.linear; - /** * The duration for the opacity transition. * @type {number} */ - this.transitionDuration_ = 250; + this.transition_ = options.transition === undefined ? + 250 : options.transition; /** * Lookup of start times for rendering transitions. @@ -188,7 +185,7 @@ ol.Tile.prototype.load = function() {}; * @return {number} A number between 0 and 1. */ ol.Tile.prototype.getAlpha = function(id, time) { - if (!this.transitionEasing_) { + if (!this.transition_) { return 1; } @@ -197,9 +194,9 @@ ol.Tile.prototype.getAlpha = function(id, time) { start = time; this.transitionStarts_[id] = start; } - var delta = Date.now() - start + (1000 / 60); // avoid rendering at 0 - if (delta >= this.transitionDuration_) { + var delta = time - start + (1000 / 60); // avoid rendering at 0 + if (delta >= this.transition_) { return 1; } - return this.transitionEasing_(delta / this.transitionDuration_); + return ol.easing.easeIn(delta / this.transition_); }; 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/tile.test.js b/test/rendering/ol/layer/tile.test.js index 74aa976ebf..a86861d255 100644 --- a/test/rendering/ol/layer/tile.test.js +++ b/test/rendering/ol/layer/tile.test.js @@ -77,7 +77,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 }); }); @@ -104,10 +105,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 +179,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 +209,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 +260,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() { From f7bfee8497d7d64626e18a5de24ad8d746ce8955 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 23 Sep 2017 11:17:12 -0600 Subject: [PATCH 03/10] Ensure tile transitions complete --- src/ol/renderer/canvas/tilelayer.js | 15 +++++++-------- src/ol/renderer/canvas/vectortilelayer.js | 2 +- src/ol/tile.js | 21 ++++++++++++++++++++- test/rendering/ol/layer/clip.test.js | 3 ++- 4 files changed, 30 insertions(+), 11 deletions(-) diff --git a/src/ol/renderer/canvas/tilelayer.js b/src/ol/renderer/canvas/tilelayer.js index f9805dfbb9..f19057b74e 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'); @@ -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); 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/tile.js b/src/ol/tile.js index 43ccf74c35..4c2381d12d 100644 --- a/src/ol/tile.js +++ b/src/ol/tile.js @@ -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.} */ 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; +}; 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({ From ecc2a9059e8dcb06f878be4cbbbe301669298803 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sat, 23 Sep 2017 16:54:23 -0700 Subject: [PATCH 04/10] Check for alt tiles when in transition, always prefer higher z --- src/ol/renderer/canvas/tilelayer.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/ol/renderer/canvas/tilelayer.js b/src/ol/renderer/canvas/tilelayer.js index f19057b74e..8a6f8ee823 100644 --- a/src/ol/renderer/canvas/tilelayer.js +++ b/src/ol/renderer/canvas/tilelayer.js @@ -179,24 +179,28 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer tile = tile.getInterimTile(); } if (this.isDrawableTile_(tile)) { + var inTransition = false; if (tile.getState() == ol.TileState.LOADED) { tilesToDrawByZ[z][tile.tileCoord.toString()] = tile; - var inTransition = tile.inTransition && tile.inTransition(ol.getUid(this)); + inTransition = tile.inTransition && tile.inTransition(ol.getUid(this)); if (!newTiles && (inTransition || this.renderedTiles.indexOf(tile) === -1)) { newTiles = true; } } - continue; + if (!inTransition) { + 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); } } From 0f53d043610e69fd0d680a7ce0b8baf4681d6549 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sun, 24 Sep 2017 10:58:01 -0700 Subject: [PATCH 05/10] Only clear canvas when necessary, add tests --- examples/tile-transitions.html | 2 +- externs/olx.js | 2 +- src/ol/renderer/canvas/tilelayer.js | 3 ++ src/ol/tile.js | 2 +- test/rendering/ol/layer/tile.test.js | 15 +++++++ test/spec/ol/tile.test.js | 66 +++++++++++++++++++++++++++- 6 files changed, 85 insertions(+), 5 deletions(-) diff --git a/examples/tile-transitions.html b/examples/tile-transitions.html index ae366f9a93..2f9cd339a5 100644 --- a/examples/tile-transitions.html +++ b/examples/tile-transitions.html @@ -4,7 +4,7 @@ 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 + 275 ms. To disable this behavior, set the transition option of the tile source to 0. tags: "fade, transition" --- diff --git a/externs/olx.js b/externs/olx.js index 555b994392..98da700754 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -472,7 +472,7 @@ olx.TileOptions; /** * A duration for tile opacity transitions. By default, tiles will render with - * a opacity transition that lasts 250 ms. To change the duration, pass a + * a opacity transition that lasts 275 ms. To change the duration, pass a * number in milliseconds. A duration of 0 disables the opacity transition. * @type {number|undefined} * @api diff --git a/src/ol/renderer/canvas/tilelayer.js b/src/ol/renderer/canvas/tilelayer.js index 8a6f8ee823..2971ebd85b 100644 --- a/src/ol/renderer/canvas/tilelayer.js +++ b/src/ol/renderer/canvas/tilelayer.js @@ -228,6 +228,9 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer canvas.width = width; canvas.height = height; } else { + if (this.renderedExtent_ && !ol.extent.equals(imageExtent, this.renderedExtent_)) { + context.clearRect(0, 0, width, height); + } oversampling = this.oversampling_; } } diff --git a/src/ol/tile.js b/src/ol/tile.js index 4c2381d12d..0c56b0d1d7 100644 --- a/src/ol/tile.js +++ b/src/ol/tile.js @@ -55,7 +55,7 @@ ol.Tile = function(tileCoord, state, opt_options) { * @type {number} */ this.transition_ = options.transition === undefined ? - 250 : options.transition; + 275 : options.transition; /** * Lookup of start times for rendering transitions. If the start time is diff --git a/test/rendering/ol/layer/tile.test.js b/test/rendering/ol/layer/tile.test.js index a86861d255..3ff6468064 100644 --- a/test/rendering/ol/layer/tile.test.js +++ b/test/rendering/ol/layer/tile.test.js @@ -72,6 +72,21 @@ 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; diff --git a/test/spec/ol/tile.test.js b/test/spec/ol/tile.test.js index 88bf734073..6bede73d68 100644 --- a/test/spec/ol/tile.test.js +++ b/test/spec/ol/tile.test.js @@ -1,10 +1,72 @@ - - 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(275); + }); + + 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'; + 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); + expect(tile.inTransition(id)).to.be(false); + }); + }); + describe('interimChain', function() { var head, renderTile; beforeEach(function() { From 79e9dc81289406e52a58380ce0b72b3e4089c892 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 25 Sep 2017 08:21:08 -0700 Subject: [PATCH 06/10] Render the view resolution tiles last --- src/ol/renderer/canvas/tilelayer.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/ol/renderer/canvas/tilelayer.js b/src/ol/renderer/canvas/tilelayer.js index 2971ebd85b..b45046cccc 100644 --- a/src/ol/renderer/canvas/tilelayer.js +++ b/src/ol/renderer/canvas/tilelayer.js @@ -5,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'); @@ -238,7 +237,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) { From 22f0b3073790cb82ef16f957f963d6f549ffa029 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 25 Sep 2017 14:47:51 -0700 Subject: [PATCH 07/10] Doc typo --- externs/olx.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/externs/olx.js b/externs/olx.js index 98da700754..7b2ba7a67d 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -472,7 +472,7 @@ olx.TileOptions; /** * A duration for tile opacity transitions. By default, tiles will render with - * a opacity transition that lasts 275 ms. To change the duration, pass a + * an opacity transition that lasts 275 ms. To change the duration, pass a * number in milliseconds. A duration of 0 disables the opacity transition. * @type {number|undefined} * @api From 8033e25663e4be61b309563843b0f674083219e0 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 25 Sep 2017 21:13:00 -0700 Subject: [PATCH 08/10] Vector tile rendering requires canvas to be cleared --- src/ol/renderer/canvas/tilelayer.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/ol/renderer/canvas/tilelayer.js b/src/ol/renderer/canvas/tilelayer.js index b45046cccc..724bf4922c 100644 --- a/src/ol/renderer/canvas/tilelayer.js +++ b/src/ol/renderer/canvas/tilelayer.js @@ -227,9 +227,7 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layer canvas.width = width; canvas.height = height; } else { - if (this.renderedExtent_ && !ol.extent.equals(imageExtent, this.renderedExtent_)) { - context.clearRect(0, 0, width, height); - } + context.clearRect(0, 0, width, height); oversampling = this.oversampling_; } } From 3161e5bbaff9b37184c8a50849498344afe0f4af Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 25 Sep 2017 21:43:40 -0700 Subject: [PATCH 09/10] Back to 250 ms for the transition --- examples/tile-transitions.html | 2 +- externs/olx.js | 2 +- src/ol/tile.js | 2 +- test/spec/ol/tile.test.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/tile-transitions.html b/examples/tile-transitions.html index 2f9cd339a5..ae366f9a93 100644 --- a/examples/tile-transitions.html +++ b/examples/tile-transitions.html @@ -4,7 +4,7 @@ title: Tile Transitions shortdesc: Custom configuration for opacity transitions on tiles. docs: > By default tiles are rendered with an opacity transition - fading in over - 275 ms. To disable this behavior, set the transition option + 250 ms. To disable this behavior, set the transition option of the tile source to 0. tags: "fade, transition" --- diff --git a/externs/olx.js b/externs/olx.js index 7b2ba7a67d..49e539ad2c 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -472,7 +472,7 @@ olx.TileOptions; /** * A duration for tile opacity transitions. By default, tiles will render with - * an opacity transition that lasts 275 ms. To change the duration, pass a + * 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 diff --git a/src/ol/tile.js b/src/ol/tile.js index 0c56b0d1d7..4c2381d12d 100644 --- a/src/ol/tile.js +++ b/src/ol/tile.js @@ -55,7 +55,7 @@ ol.Tile = function(tileCoord, state, opt_options) { * @type {number} */ this.transition_ = options.transition === undefined ? - 275 : options.transition; + 250 : options.transition; /** * Lookup of start times for rendering transitions. If the start time is diff --git a/test/spec/ol/tile.test.js b/test/spec/ol/tile.test.js index 6bede73d68..8e25c9356f 100644 --- a/test/spec/ol/tile.test.js +++ b/test/spec/ol/tile.test.js @@ -9,7 +9,7 @@ describe('ol.Tile', 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(275); + expect(tile.transition_).to.equal(250); }); it('allows the transition to be set', function() { From 68a1a497b0eed0bf54bb9f092bd0287ac1a38e77 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Wed, 27 Sep 2017 11:55:34 -0600 Subject: [PATCH 10/10] Don't look for alt tiles if alpha is 1 --- src/ol/renderer/canvas/tilelayer.js | 12 ++++++++---- src/ol/tile.js | 11 ++++++++++- test/spec/ol/tile.test.js | 15 +-------------- 3 files changed, 19 insertions(+), 19 deletions(-) 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); }); });