Make tile transitions configurable

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

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;
   }
 };
 

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);
 
   /**

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
   });
 
   /**

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

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
   });
 
   /**

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

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

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
   });
 
   /**

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
   });
 
   /**

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;

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_());

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
   });
 
 };

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

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_);
 };

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.<string>|undefined),
- *            wrapX: (boolean|undefined)}}
+ *            wrapX: (boolean|undefined),
+ *            transition: (number|undefined)}}
  */
 ol.SourceUrlTileOptions;
 

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

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}