Make tile transitions configurable

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 <code>transition</code> option
+  of the tile source to 0.
+tags: "fade, transition"
+---
+<div id="map" class="map"></div>
+<label>
+  render with an opacity transition
+  <input id="transition" type="checkbox" checked>
+</label>

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

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.<string>|undefined),
- *            wrapX: (boolean|undefined)}}
+ *            wrapX: (boolean|undefined),
+ *            transition: (number|undefined)}}
  */
 olx.source.TileImageOptions;
 
@@ -4998,6 +5026,15 @@ olx.source.TileImageOptions.prototype.urls;
 olx.source.TileImageOptions.prototype.wrapX;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.TileImageOptions.prototype.transition;
+
+
 /**
  * @typedef {{attributions: (ol.AttributionLike|undefined),
  *            cacheSize: (number|undefined),
@@ -5014,7 +5051,8 @@ olx.source.TileImageOptions.prototype.wrapX;
  *            tileUrlFunction: (ol.TileUrlFunctionType|undefined),
  *            url: (string|undefined),
  *            urls: (Array.<string>|undefined),
- *            wrapX: (boolean|undefined)}}
+ *            wrapX: (boolean|undefined),
+ *            transition: (number|undefined)}}
  */
 olx.source.VectorTileOptions;
 
@@ -5154,6 +5192,15 @@ olx.source.VectorTileOptions.prototype.urls;
 olx.source.VectorTileOptions.prototype.wrapX;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.VectorTileOptions.prototype.transition;
+
+
 /**
  * @typedef {{url: (string|undefined),
  *     displayDpi: (number|undefined),
@@ -6070,7 +6117,8 @@ olx.source.ImageStaticOptions.prototype.url;
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     url: (string|undefined),
  *     urls: (Array.<string>|undefined),
- *     wrapX: (boolean|undefined)}}
+ *     wrapX: (boolean|undefined),
+ *     transition: (number|undefined)}}
  */
 olx.source.TileArcGISRestOptions;
 
@@ -6184,6 +6232,15 @@ olx.source.TileArcGISRestOptions.prototype.url;
 olx.source.TileArcGISRestOptions.prototype.wrapX;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.TileArcGISRestOptions.prototype.transition;
+
+
 /**
  * ArcGIS Rest service urls. Use this instead of `url` when the ArcGIS Service supports multiple
  * urls for export requests.
@@ -6202,7 +6259,8 @@ olx.source.TileArcGISRestOptions.prototype.urls;
  *     tileJSON: (TileJSON|undefined),
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     url: (string|undefined),
- *     wrapX: (boolean|undefined)}}
+ *     wrapX: (boolean|undefined),
+ *     transition: (number|undefined)}}
  */
 olx.source.TileJSONOptions;
 
@@ -6293,6 +6351,15 @@ olx.source.TileJSONOptions.prototype.url;
 olx.source.TileJSONOptions.prototype.wrapX;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.TileJSONOptions.prototype.transition;
+
+
 /**
  * @typedef {{attributions: (ol.AttributionLike|undefined),
  *     cacheSize: (number|undefined),
@@ -6311,7 +6378,8 @@ olx.source.TileJSONOptions.prototype.wrapX;
  *     tileLoadFunction: (ol.TileLoadFunctionType|undefined),
  *     url: (string|undefined),
  *     urls: (Array.<string>|undefined),
- *     wrapX: (boolean|undefined)}}
+ *     wrapX: (boolean|undefined),
+ *     transition: (number|undefined)}}
  */
 olx.source.TileWMSOptions;
 
@@ -6475,6 +6543,15 @@ olx.source.TileWMSOptions.prototype.urls;
 olx.source.TileWMSOptions.prototype.wrapX;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.TileWMSOptions.prototype.transition;
+
+
 /**
  * @typedef {{attributions: (ol.AttributionLike|undefined),
  *     features: (Array.<ol.Feature>|ol.Collection.<ol.Feature>|undefined),
@@ -6630,7 +6707,8 @@ olx.source.VectorOptions.prototype.wrapX;
  *     tileClass: (function(new: ol.ImageTile, ol.TileCoord,
  *                          ol.TileState, string, ?string,
  *                          ol.TileLoadFunctionType)|undefined),
- *     wrapX: (boolean|undefined)}}
+ *     wrapX: (boolean|undefined),
+ *     transition: (number|undefined)}}
  */
 olx.source.WMTSOptions;
 
@@ -6814,6 +6892,15 @@ olx.source.WMTSOptions.prototype.urls;
 olx.source.WMTSOptions.prototype.wrapX;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.WMTSOptions.prototype.transition;
+
+
 /**
  * @typedef {{attributions: (ol.AttributionLike|undefined),
  *     cacheSize: (number|undefined),
@@ -6831,7 +6918,8 @@ olx.source.WMTSOptions.prototype.wrapX;
  *     tileUrlFunction: (ol.TileUrlFunctionType|undefined),
  *     url: (string|undefined),
  *     urls: (Array.<string>|undefined),
- *     wrapX: (boolean|undefined)}}
+ *     wrapX: (boolean|undefined),
+ *     transition: (number|undefined)}}
  */
 olx.source.XYZOptions;
 
@@ -6987,6 +7075,16 @@ olx.source.XYZOptions.prototype.urls;
  */
 olx.source.XYZOptions.prototype.wrapX;
 
+
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.XYZOptions.prototype.transition;
+
+
 /**
  * @typedef {{attributions: (ol.AttributionLike|undefined),
  *     cacheSize: (number|undefined),
@@ -7111,7 +7209,8 @@ olx.source.CartoDBOptions.prototype.account;
  *     reprojectionErrorThreshold: (number|undefined),
  *     url: !string,
  *     tierSizeCalculation: (string|undefined),
- *     size: ol.Size}}
+ *     size: ol.Size,
+ *     transition: (number|undefined)}}
  */
 olx.source.ZoomifyOptions;
 
@@ -7202,6 +7301,15 @@ olx.source.ZoomifyOptions.prototype.tierSizeCalculation;
 olx.source.ZoomifyOptions.prototype.size;
 
 
+/**
+ * Duration of the opacity transition for rendering.  To disable the opacity
+ * transition, pass `transition: 0`.
+ * @type {number|undefined}
+ * @api
+ */
+olx.source.ZoomifyOptions.prototype.transition;
+
+
 /**
  * Namespace.
  * @type {Object}

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}

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

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

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

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