Ensure tile transitions complete

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;
+          var inTransition = tile.inTransition && tile.inTransition(ol.getUid(this));
-          if (!newTiles && (this.renderedTiles.indexOf(tile) === -1 || inTransition)) {
+          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);

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

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.<number, number>}
    */
   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;
+};

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