Refactor VectorTile renderer and add lower resolution clipping

src/ol/render/canvas/replaygroup.js

@@ -149,6 +149,23 @@ ol.render.canvas.ReplayGroup.prototype.forEachFeatureAtCoordinate = function(
 };
 
 
+/**
+ * @param {ol.Transform} transform Transform.
+ * @return {Array.<number>} Clip coordinates.
+ */
+ol.render.canvas.ReplayGroup.prototype.getClipCoords = function(transform) {
+  var maxExtent = this.maxExtent_;
+  var minX = maxExtent[0];
+  var minY = maxExtent[1];
+  var maxX = maxExtent[2];
+  var maxY = maxExtent[3];
+  var flatClipCoords = [minX, minY, minX, maxY, maxX, maxY, maxX, minY];
+  ol.geom.flat.transform.transform2D(
+      flatClipCoords, 0, 8, 2, transform, flatClipCoords);
+  return flatClipCoords;
+};
+
+
 /**
  * @inheritDoc
  */
@@ -200,14 +217,7 @@ ol.render.canvas.ReplayGroup.prototype.replay = function(context, pixelRatio,
 
   // setup clipping so that the parts of over-simplified geometries are not
   // visible outside the current extent when panning
-  var maxExtent = this.maxExtent_;
+  var flatClipCoords = this.getClipCoords(transform);
-  var minX = maxExtent[0];
-  var minY = maxExtent[1];
-  var maxX = maxExtent[2];
-  var maxY = maxExtent[3];
-  var flatClipCoords = [minX, minY, minX, maxY, maxX, maxY, maxX, minY];
-  ol.geom.flat.transform.transform2D(
-      flatClipCoords, 0, 8, 2, transform, flatClipCoords);
   context.save();
   context.beginPath();
   context.moveTo(flatClipCoords[0], flatClipCoords[1]);

src/ol/renderer/canvas/layer.js

@@ -69,7 +69,7 @@ ol.renderer.canvas.Layer.prototype.clip = function(context, frameState, extent)
  */
 ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerState, context) {
 
-  this.dispatchPreComposeEvent(context, frameState);
+  this.preCompose(context, frameState);
 
   var image = this.getImage();
   if (image) {
@@ -103,8 +103,7 @@ ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerStat
     }
   }
 
-  this.dispatchPostComposeEvent(context, frameState);
+  this.postCompose(context, frameState, layerState);
-
 };
 
 
@@ -138,10 +137,11 @@ ol.renderer.canvas.Layer.prototype.dispatchComposeEvent_ = function(type, contex
 /**
  * @param {CanvasRenderingContext2D} context Context.
  * @param {olx.FrameState} frameState Frame state.
+ * @param {ol.LayerState} layerState Layer state.
  * @param {ol.Transform=} opt_transform Transform.
  * @protected
  */
-ol.renderer.canvas.Layer.prototype.dispatchPostComposeEvent = function(context, frameState, opt_transform) {
+ol.renderer.canvas.Layer.prototype.postCompose = function(context, frameState, layerState, opt_transform) {
   this.dispatchComposeEvent_(ol.render.Event.Type.POSTCOMPOSE, context,
       frameState, opt_transform);
 };
@@ -153,7 +153,7 @@ ol.renderer.canvas.Layer.prototype.dispatchPostComposeEvent = function(context,
  * @param {ol.Transform=} opt_transform Transform.
  * @protected
  */
-ol.renderer.canvas.Layer.prototype.dispatchPreComposeEvent = function(context, frameState, opt_transform) {
+ol.renderer.canvas.Layer.prototype.preCompose = function(context, frameState, opt_transform) {
   this.dispatchComposeEvent_(ol.render.Event.Type.PRECOMPOSE, context,
       frameState, opt_transform);
 };

src/ol/renderer/canvas/tilelayer.js

@@ -27,18 +27,6 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {
    */
   this.context = ol.dom.createCanvasContext2D();
 
-  /**
-   * @private
-   * @type {ol.Extent}
-   */
-  this.renderedExtent_ = ol.extent.createEmpty();
-
-  /**
-   * @private
-   * @type {number}
-   */
-  this.renderedResolution_;
-
   /**
    * @private
    * @type {number}
@@ -47,9 +35,15 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {
 
   /**
    * @private
-   * @type {Array.<string>}
+   * @type {ol.TileRange}
    */
-  this.renderedTileKeys_ = null;
+  this.renderedTileRange_ = null;
+
+  /**
+   * @protected
+   * @type {!Array.<ol.Tile>}
+   */
+  this.renderedTiles = [];
 
   /**
    * @protected
@@ -63,6 +57,12 @@ ol.renderer.canvas.TileLayer = function(tileLayer) {
    */
   this.tmpTileCoord_ = [0, 0, 0];
 
+  /**
+   * @private
+   * @type {ol.TileRange}
+   */
+  this.tmpTileRange_ = new ol.TileRange(0, 0, 0, 0);
+
   /**
    * @private
    * @type {ol.Transform}
@@ -88,8 +88,7 @@ ol.inherits(ol.renderer.canvas.TileLayer, ol.renderer.canvas.Layer);
 /**
  * @inheritDoc
  */
-ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
+ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(frameState, layerState) {
-    frameState, layerState) {
 
   var pixelRatio = frameState.pixelRatio;
   var size = frameState.size;
@@ -121,13 +120,13 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
   var tilePixelRatio = tileSource.getTilePixelRatio(pixelRatio);
   var scale = pixelRatio / tilePixelRatio * tileResolution / viewResolution;
 
-  var transform = ol.transform.compose(ol.transform.reset(this.imageTransform_),
+  var transform = ol.transform.compose(this.imageTransform_,
       pixelRatio * size[0] / 2, pixelRatio * size[1] / 2,
       scale, scale,
       0,
       tilePixelRatio * (imageExtent[0] - viewCenter[0]) / tileResolution,
       tilePixelRatio * (viewCenter[1] - imageExtent[3]) / tileResolution);
-  ol.transform.compose(ol.transform.reset(this.coordinateToCanvasPixelTransform_),
+  ol.transform.compose(this.coordinateToCanvasPixelTransform_,
       pixelRatio * size[0] / 2 - transform[4], pixelRatio * size[1] / 2 - transform[5],
       pixelRatio / viewResolution, -pixelRatio / viewResolution,
       0,
@@ -138,45 +137,38 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
    */
   var tilesToDrawByZ = {};
   tilesToDrawByZ[z] = {};
-  var loadedTileKeys = [];
 
   var findLoadedTiles = this.createLoadedTileFinder(
       tileSource, projection, tilesToDrawByZ);
 
   var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
-
   var tmpExtent = this.tmpExtent;
-  var tmpTileRange = new ol.TileRange(0, 0, 0, 0);
+  var tmpTileRange = this.tmpTileRange_;
-  var childTileRange, fullyLoaded, tile, tileCoordKey, x, y;
+  var newTiles = false;
-  var drawableTile = (
+  var tile, x, y;
-      /**
-       * @param {!ol.Tile} tile Tile.
-       * @return {boolean} Tile is selected.
-       */
-      function(tile) {
-        var tileState = tile.getState();
-        return tileState == ol.Tile.State.LOADED ||
-            tileState == ol.Tile.State.EMPTY ||
-            tileState == ol.Tile.State.ERROR && !useInterimTilesOnError;
-      });
   for (x = tileRange.minX; x <= tileRange.maxX; ++x) {
     for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
       tile = tileSource.getTile(z, x, y, pixelRatio, projection);
-      if (!drawableTile(tile)) {
+      var tileState = tile.getState();
+      var drawable = tileState == ol.Tile.State.LOADED ||
+          tileState == ol.Tile.State.EMPTY ||
+          tileState == ol.Tile.State.ERROR && !useInterimTilesOnError;
+      if (!drawable) {
         tile = tile.getInterimTile();
+      } else {
+        if (tileState == ol.Tile.State.LOADED) {
+          tilesToDrawByZ[z][tile.tileCoord.toString()] = tile;
+          if (!newTiles && this.renderedTiles.indexOf(tile) == -1) {
+            newTiles = true;
           }
-      if (drawableTile(tile)) {
-        if (tile.getState() == ol.Tile.State.LOADED) {
-          loadedTileKeys.push(tileCoordKey);
-          tileCoordKey = tile.tileCoord.toString();
-          tilesToDrawByZ[z][tileCoordKey] = tile;
         }
         continue;
       }
-      fullyLoaded = tileGrid.forEachTileCoordParentTileRange(
+
+      var fullyLoaded = tileGrid.forEachTileCoordParentTileRange(
           tile.tileCoord, findLoadedTiles, null, tmpTileRange, tmpExtent);
       if (!fullyLoaded) {
-        childTileRange = tileGrid.getTileCoordChildTileRange(
+        var childTileRange = tileGrid.getTileCoordChildTileRange(
             tile.tileCoord, tmpTileRange, tmpExtent);
         if (childTileRange) {
           findLoadedTiles(z + 1, childTileRange);
@@ -185,12 +177,10 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
 
     }
   }
-  loadedTileKeys.sort();
 
-  if (tileResolution != this.renderedResolution_ ||
+  if (newTiles || !(this.renderedTileRange_ &&
-      sourceRevision != this.renderedRevision_ ||
+      this.renderedTileRange_.equals(tileRange)) ||
-      !ol.extent.equals(this.renderedExtent_, imageExtent) ||
+      this.renderedRevision_ != sourceRevision) {
-      !ol.array.equals(loadedTileKeys, this.renderedTileKeys_)) {
 
     var tilePixelSize = tileSource.getTilePixelSize(z, pixelRatio, projection);
     var width = tileRange.getWidth() * tilePixelSize[0];
@@ -203,11 +193,12 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
       canvas.height = height;
     }
 
+    this.renderedTiles.length = 0;
     /** @type {Array.<number>} */
     var zs = Object.keys(tilesToDrawByZ).map(Number);
     zs.sort(ol.array.numberSafeCompareFunction);
     var currentResolution, currentScale, currentTilePixelSize, currentZ, i, ii;
-    var image, tileExtent, tileGutter, tilesToDraw, w, h;
+    var tileExtent, tileGutter, tilesToDraw, w, h;
     for (i = 0, ii = zs.length; i < ii; ++i) {
       currentZ = zs[i];
       currentTilePixelSize = tileSource.getTilePixelSize(currentZ, pixelRatio, projection);
@@ -215,7 +206,7 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
       currentScale = currentResolution / tileResolution;
       tileGutter = tilePixelRatio * tileSource.getGutter(projection);
       tilesToDraw = tilesToDrawByZ[currentZ];
-      for (tileCoordKey in tilesToDraw) {
+      for (var tileCoordKey in tilesToDraw) {
         tile = tilesToDraw[tileCoordKey];
         tileExtent = tileGrid.getTileCoordExtent(tile.getTileCoord(), tmpExtent);
         x = (tileExtent[0] - imageExtent[0]) / tileResolution * tilePixelRatio;
@@ -225,12 +216,13 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
         if (!opaque) {
           context.clearRect(x, y, w, h);
         }
-        image = tile.getImage();
+        this.drawTileImage(tile, frameState, layerState, x, y, w, h, tileGutter);
-        context.drawImage(image, tileGutter, tileGutter,
+        this.renderedTiles.push(tile);
-            image.width, image.height, x, y, w, h);
       }
     }
 
+    this.renderedTileRange_ = tileRange;
+    this.renderedRevision_ = sourceRevision;
   }
 
   this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange);
@@ -239,12 +231,26 @@ ol.renderer.canvas.TileLayer.prototype.prepareFrame = function(
   this.scheduleExpireCache(frameState, tileSource);
   this.updateLogos(frameState, tileSource);
 
-  this.renderedTileKeys_ = loadedTileKeys;
+  return this.renderedTiles.length > 0;
-  this.renderedExtent_ = imageExtent;
+};
-  this.renderedResolution_ = tileResolution;
-  this.renderedRevision_ = sourceRevision;
 
-  return true;
+
+/**
+ * @param {ol.Tile} tile Tile.
+ * @param {olx.FrameState} frameState Frame state.
+ * @param {ol.LayerState} layerState Layer state.
+ * @param {number} x Left of the tile.
+ * @param {number} y Top of the tile.
+ * @param {number} w Width of the tile.
+ * @param {number} h Height of the tile.
+ * @param {number} gutter Tile gutter.
+ */
+ol.renderer.canvas.TileLayer.prototype.drawTileImage = function(tile, frameState, layerState, x, y, w, h, gutter) {
+  var image = tile.getImage();
+  if (image) {
+    this.context.drawImage(image, gutter, gutter,
+        image.width - 2 * gutter, image.height - 2 * gutter, x, y, w, h);
+  }
 };
 
 
@@ -279,16 +285,16 @@ ol.renderer.canvas.TileLayer.prototype.getImage = function() {
 };
 
 
+/**
+ * @function
+ * @return {ol.layer.Tile|ol.layer.VectorTile}
+ */
+ol.renderer.canvas.TileLayer.prototype.getLayer;
+
+
 /**
  * @inheritDoc
  */
 ol.renderer.canvas.TileLayer.prototype.getImageTransform = function() {
   return this.imageTransform_;
 };
-
-
-/**
- * @function
- * @return {ol.layer.Tile|ol.layer.VectorTile}
- */
-ol.renderer.canvas.TileLayer.prototype.getLayer;

src/ol/renderer/canvas/vectorlayer.js

@@ -83,7 +83,7 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
 
   var transform = this.getTransform(frameState, 0);
 
-  this.dispatchPreComposeEvent(context, frameState, transform);
+  this.preCompose(context, frameState, transform);
 
   // clipped rendering if layer extent is set
   var clipExtent = layerState.extent;
@@ -169,7 +169,7 @@ ol.renderer.canvas.VectorLayer.prototype.composeFrame = function(frameState, lay
   if (clipped) {
     context.restore();
   }
-  this.dispatchPostComposeEvent(context, frameState, transform);
+  this.postCompose(context, frameState, layerState, transform);
 
 };
 

src/ol/renderer/canvas/vectortilelayer.js

@@ -1,12 +1,10 @@
 goog.provide('ol.renderer.canvas.VectorTileLayer');
 
 goog.require('ol');
-goog.require('ol.array');
 goog.require('ol.extent');
 goog.require('ol.proj');
 goog.require('ol.proj.Units');
 goog.require('ol.layer.VectorTile');
-goog.require('ol.render.Event');
 goog.require('ol.render.ReplayType');
 goog.require('ol.render.canvas');
 goog.require('ol.render.canvas.ReplayGroup');
@@ -66,126 +64,12 @@ ol.renderer.canvas.VectorTileLayer.VECTOR_REPLAYS = {
 };
 
 
-/**
- * @inheritDoc
- */
-ol.renderer.canvas.VectorTileLayer.prototype.composeFrame = function(
-    frameState, layerState, context) {
-  var transform = this.getTransform(frameState, 0);
-  this.dispatchPreComposeEvent(context, frameState, transform);
-
-  // clipped rendering if layer extent is set
-  var extent = layerState.extent;
-  var clipped = extent !== undefined;
-  if (clipped) {
-    this.clip(context, frameState,  /** @type {ol.Extent} */ (extent));
-  }
-
-  var renderMode = this.getLayer().getRenderMode();
-  if (renderMode !== ol.layer.VectorTile.RenderType.VECTOR) {
-    this.renderTileImages(context, frameState, layerState);
-  }
-  if (renderMode !== ol.layer.VectorTile.RenderType.IMAGE) {
-    this.renderTileReplays_(context, frameState, layerState);
-  }
-
-  if (clipped) {
-    context.restore();
-  }
-
-  this.dispatchPostComposeEvent(context, frameState, transform);
-};
-
-
-/**
- * @param {CanvasRenderingContext2D} context Context.
- * @param {olx.FrameState} frameState Frame state.
- * @param {ol.LayerState} layerState Layer state.
- * @private
- */
-ol.renderer.canvas.VectorTileLayer.prototype.renderTileReplays_ = function(
-    context, frameState, layerState) {
-
-  var layer = this.getLayer();
-  var replays = ol.renderer.canvas.VectorTileLayer.VECTOR_REPLAYS[layer.getRenderMode()];
-  var pixelRatio = frameState.pixelRatio;
-  var skippedFeatureUids = layerState.managed ?
-      frameState.skippedFeatureUids : {};
-  var viewState = frameState.viewState;
-  var center = viewState.center;
-  var resolution = viewState.resolution;
-  var rotation = viewState.rotation;
-  var size = frameState.size;
-  var pixelScale = pixelRatio / resolution;
-  var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
-  var tilePixelRatio = source.getTilePixelRatio();
-
-  var transform = this.getTransform(frameState, 0);
-
-  var replayContext;
-  if (layer.hasListener(ol.render.Event.Type.RENDER)) {
-    // resize and clear
-    this.context.canvas.width = context.canvas.width;
-    this.context.canvas.height = context.canvas.height;
-    replayContext = this.context;
-  } else {
-    replayContext = context;
-  }
-  // for performance reasons, context.save / context.restore is not used
-  // to save and restore the transformation matrix and the opacity.
-  // see http://jsperf.com/context-save-restore-versus-variable
-  var alpha = replayContext.globalAlpha;
-  replayContext.globalAlpha = layerState.opacity;
-
-  /** @type {Array.<ol.VectorTile>} */
-  var tilesToDraw = this.renderedTiles;
-
-  var tileGrid = source.getTileGrid();
-
-  var currentZ, i, ii, offsetX, offsetY, origin, pixelSpace, replayState;
-  var tile, tileExtent, tilePixelResolution, tileResolution, tileTransform;
-  for (i = 0, ii = tilesToDraw.length; i < ii; ++i) {
-    tile = tilesToDraw[i];
-    replayState = tile.getReplayState();
-    tileExtent = tileGrid.getTileCoordExtent(
-        tile.getTileCoord(), this.tmpExtent);
-    currentZ = tile.getTileCoord()[0];
-    pixelSpace = tile.getProjection().getUnits() == ol.proj.Units.TILE_PIXELS;
-    tileResolution = tileGrid.getResolution(currentZ);
-    tilePixelResolution = tileResolution / tilePixelRatio;
-    offsetX = Math.round(pixelRatio * size[0] / 2);
-    offsetY = Math.round(pixelRatio * size[1] / 2);
-
-    if (pixelSpace) {
-      origin = ol.extent.getTopLeft(tileExtent);
-      tileTransform = ol.transform.reset(this.tmpTransform_);
-      tileTransform = ol.transform.compose(this.tmpTransform_,
-          offsetX, offsetY,
-          pixelScale * tilePixelResolution, pixelScale * tilePixelResolution,
-          rotation,
-          (origin[0] - center[0]) / tilePixelResolution, (center[1] - origin[1]) / tilePixelResolution);
-    } else {
-      tileTransform = transform;
-    }
-    ol.render.canvas.rotateAtOffset(replayContext, -rotation, offsetX, offsetY);
-    replayState.replayGroup.replay(replayContext, pixelRatio,
-        tileTransform, rotation, skippedFeatureUids, replays);
-    ol.render.canvas.rotateAtOffset(replayContext, rotation, offsetX, offsetY);
-  }
-
-  if (replayContext != context) {
-    this.dispatchRenderEvent(replayContext, frameState, transform);
-    context.drawImage(replayContext.canvas, 0, 0);
-  }
-  replayContext.globalAlpha = alpha;
-};
-
-
 /**
  * @param {ol.VectorTile} tile Tile.
  * @param {olx.FrameState} frameState Frame state.
+ * @private
  */
-ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup = function(tile,
+ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup_ = function(tile,
     frameState) {
   var layer = this.getLayer();
   var pixelRatio = frameState.pixelRatio;
@@ -204,12 +88,11 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup = function(tile,
 
   var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
   var tileGrid = source.getTileGrid();
-  var tileCoord = tile.getTileCoord();
+  var tileCoord = tile.tileCoord;
   var tileProjection = tile.getProjection();
-  var pixelSpace = tileProjection.getUnits() == ol.proj.Units.TILE_PIXELS;
   var resolution = tileGrid.getResolution(tileCoord[0]);
   var extent, reproject, tileResolution;
-  if (pixelSpace) {
+  if (tileProjection.getUnits() == ol.proj.Units.TILE_PIXELS) {
     var tilePixelRatio = tileResolution = source.getTilePixelRatio();
     var tileSize = ol.size.toSize(tileGrid.getTileSize(tileCoord[0]));
     extent = [0, 0, tileSize[0] * tilePixelRatio, tileSize[1] * tilePixelRatio];
@@ -275,6 +158,21 @@ ol.renderer.canvas.VectorTileLayer.prototype.createReplayGroup = function(tile,
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.renderer.canvas.VectorTileLayer.prototype.drawTileImage = function(
+    tile, frameState, layerState, x, y, w, h, gutter) {
+  var vectorTile = /** @type {ol.VectorTile} */ (tile);
+  this.createReplayGroup_(vectorTile, frameState);
+  var layer = this.getLayer();
+  if (layer.getRenderMode() != ol.layer.VectorTile.RenderType.VECTOR) {
+    this.renderTileImage_(vectorTile, frameState, layerState);
+  }
+  ol.renderer.canvas.TileLayer.prototype.drawTileImage.apply(this, arguments);
+};
+
+
 /**
  * @inheritDoc
  */
@@ -295,9 +193,8 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
   var tile, tileCoord, tileExtent, tilePixelRatio, tileResolution;
   for (i = 0, ii = replayables.length; i < ii; ++i) {
     tile = replayables[i];
-    tileCoord = tile.getTileCoord();
+    tileCoord = tile.tileCoord;
-    tileExtent = source.getTileGrid().getTileCoordExtent(tileCoord,
+    tileExtent = source.getTileGrid().getTileCoordExtent(tileCoord, this.tmpExtent);
-        this.tmpExtent);
     if (!ol.extent.containsCoordinate(tileExtent, coordinate)) {
       continue;
     }
@@ -332,6 +229,41 @@ ol.renderer.canvas.VectorTileLayer.prototype.forEachFeatureAtCoordinate = functi
 };
 
 
+/**
+ * @param {ol.Tile} tile Tile.
+ * @param {olx.FrameState} frameState Frame state.
+ * @return {ol.Transform} transform Transform.
+ * @private
+ */
+ol.renderer.canvas.VectorTileLayer.prototype.getReplayTransform_ = function(tile, frameState) {
+  if (tile.getProjection().getUnits() == ol.proj.Units.TILE_PIXELS) {
+    var layer = this.getLayer();
+    var source = /** @type {ol.source.VectorTile} */ (layer.getSource());
+    var tileGrid = source.getTileGrid();
+    var tileCoord = tile.tileCoord;
+    var tileResolution =
+        tileGrid.getResolution(tileCoord[0]) / source.getTilePixelRatio();
+    var viewState = frameState.viewState;
+    var pixelRatio = frameState.pixelRatio;
+    var renderResolution = viewState.resolution / pixelRatio;
+    var tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent);
+    var center = viewState.center;
+    var origin = ol.extent.getTopLeft(tileExtent);
+    var size = frameState.size;
+    var offsetX = Math.round(pixelRatio * size[0] / 2);
+    var offsetY = Math.round(pixelRatio * size[1] / 2);
+    return ol.transform.compose(this.tmpTransform_,
+        offsetX, offsetY,
+        tileResolution / renderResolution, tileResolution / renderResolution,
+        viewState.rotation,
+        (origin[0] - center[0]) / tileResolution,
+        (center[1] - origin[1]) / tileResolution);
+  } else {
+    return this.getTransform(frameState, 0);
+  }
+};
+
+
 /**
  * Handle changes in image style state.
  * @param {ol.events.Event} event Image style change event.
@@ -345,17 +277,53 @@ ol.renderer.canvas.VectorTileLayer.prototype.handleStyleImageChange_ = function(
 /**
  * @inheritDoc
  */
-ol.renderer.canvas.VectorTileLayer.prototype.prepareFrame = function(frameState, layerState) {
+ol.renderer.canvas.VectorTileLayer.prototype.postCompose = function(context, frameState, layerState) {
-  var prepared = ol.renderer.canvas.TileLayer.prototype.prepareFrame.call(this, frameState, layerState);
+  var renderMode = this.getLayer().getRenderMode();
-  if (prepared) {
+  var replays = ol.renderer.canvas.VectorTileLayer.VECTOR_REPLAYS[renderMode];
-    var skippedFeatures = Object.keys(frameState.skippedFeatureUids_ || {});
+  if (replays) {
-    for (var i = 0, ii = this.renderedTiles.length; i < ii; ++i) {
+    var pixelRatio = frameState.pixelRatio;
-      var tile = /** @type {ol.VectorTile} */ (this.renderedTiles[i]);
+    var rotation = frameState.viewState.rotation;
-      this.createReplayGroup(tile, frameState);
+    var size = frameState.size;
-      this.renderTileImage_(tile, frameState, layerState, skippedFeatures);
+    var offsetX = Math.round(pixelRatio * size[0] / 2);
+    var offsetY = Math.round(pixelRatio * size[1] / 2);
+    var tiles = this.renderedTiles;
+    var clips = [];
+    var zs = [];
+    for (var i = tiles.length - 1; i >= 0; --i) {
+      var tile = /** @type {ol.VectorTile} */ (tiles[i]);
+      // Create a clip mask for regions in this low resolution tile that are
+      // already filled by a higher resolution tile
+      var transform = this.getReplayTransform_(tile, frameState);
+      var currentClip = tile.getReplayState().replayGroup.getClipCoords(transform);
+      var currentZ = tile.tileCoord[0];
+      context.save();
+      context.globalAlpha = layerState.opacity;
+      ol.render.canvas.rotateAtOffset(context, -rotation, offsetX, offsetY);
+      for (var j = 0, jj = clips.length; j < jj; ++j) {
+        var clip = clips[j];
+        if (currentZ < zs[j]) {
+          context.beginPath();
+          // counter-clockwise (outer ring) for current tile
+          context.moveTo(currentClip[0], currentClip[1]);
+          context.lineTo(currentClip[2], currentClip[3]);
+          context.lineTo(currentClip[4], currentClip[5]);
+          context.lineTo(currentClip[6], currentClip[7]);
+          // clockwise (inner ring) for higher resolution tile
+          context.moveTo(clip[6], clip[7]);
+          context.lineTo(clip[4], clip[5]);
+          context.lineTo(clip[2], clip[3]);
+          context.lineTo(clip[0], clip[1]);
+          context.clip();
         }
       }
-  return prepared;
+      var replayGroup = tile.getReplayState().replayGroup;
+      replayGroup.replay(context, pixelRatio, transform, rotation, {}, replays);
+      context.restore();
+      clips.push(currentClip);
+      zs.push(currentZ);
+    }
+  }
+  ol.renderer.canvas.TileLayer.prototype.postCompose.apply(this, arguments);
 };
 
 
@@ -391,57 +359,38 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderFeature = function(feature, s
  * @param {ol.VectorTile} tile Tile.
  * @param {olx.FrameState} frameState Frame state.
  * @param {ol.LayerState} layerState Layer state.
- * @param {Array.<string>} skippedFeatures Skipped features.
  * @private
  */
 ol.renderer.canvas.VectorTileLayer.prototype.renderTileImage_ = function(
-    tile, frameState, layerState, skippedFeatures) {
+    tile, frameState, layerState) {
   var layer = this.getLayer();
-  var replays = ol.renderer.canvas.VectorTileLayer.IMAGE_REPLAYS[layer.getRenderMode()];
-  if (!replays) {
-    // do not create an image in 'vector' mode
-    return;
-  }
-  var pixelRatio = frameState.pixelRatio;
   var replayState = tile.getReplayState();
   var revision = layer.getRevision();
-  if (!ol.array.equals(replayState.skippedFeatures, skippedFeatures) ||
+  var replays = ol.renderer.canvas.VectorTileLayer.IMAGE_REPLAYS[layer.getRenderMode()];
-      replayState.renderedTileRevision !== revision) {
+  if (replays && replayState.renderedTileRevision !== revision) {
-    replayState.skippedFeatures = skippedFeatures;
     replayState.renderedTileRevision = revision;
-    var tileContext = tile.getContext();
+    var tileCoord = tile.tileCoord;
+    var z = tile.tileCoord[0];
+    var pixelRatio = frameState.pixelRatio;
     var source = layer.getSource();
     var tileGrid = source.getTileGrid();
-    var currentZ = tile.getTileCoord()[0];
-    var resolution = tileGrid.getResolution(currentZ);
-    var tileSize = ol.size.toSize(tileGrid.getTileSize(currentZ));
-    var tileResolution = tileGrid.getResolution(currentZ);
-    var resolutionRatio = tileResolution / resolution;
-    var width = tileSize[0] * pixelRatio * resolutionRatio;
-    var height = tileSize[1] * pixelRatio * resolutionRatio;
-    tileContext.canvas.width = width / resolutionRatio + 0.5;
-    tileContext.canvas.height = height / resolutionRatio + 0.5;
-    tileContext.scale(1 / resolutionRatio, 1 / resolutionRatio);
-    tileContext.translate(width / 2, height / 2);
-    var pixelSpace = tile.getProjection().getUnits() == ol.proj.Units.TILE_PIXELS;
-    var pixelScale = pixelRatio / resolution;
     var tilePixelRatio = source.getTilePixelRatio();
-    var tilePixelResolution = tileResolution / tilePixelRatio;
+    var transform = ol.transform.reset(this.tmpTransform_);
-    var tileExtent = tileGrid.getTileCoordExtent(
+    if (tile.getProjection().getUnits() == ol.proj.Units.TILE_PIXELS) {
-        tile.getTileCoord(), this.tmpExtent);
+      var renderPixelRatio = pixelRatio / tilePixelRatio;
-    var tileTransform = ol.transform.reset(this.tmpTransform_);
+      ol.transform.scale(transform, renderPixelRatio, renderPixelRatio);
-    if (pixelSpace) {
-      ol.transform.scale(tileTransform,
-          pixelScale * tilePixelResolution, pixelScale * tilePixelResolution);
-      ol.transform.translate(tileTransform,
-          -tileSize[0] * tilePixelRatio / 2, -tileSize[1] * tilePixelRatio / 2);
     } else {
-      var tileCenter = ol.extent.getCenter(tileExtent);
+      var resolution = tileGrid.getResolution(z);
-      ol.transform.scale(tileTransform, pixelScale, -pixelScale);
+      var pixelScale = pixelRatio / resolution;
-      ol.transform.translate(tileTransform, -tileCenter[0], -tileCenter[1]);
+      var tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent);
+      ol.transform.scale(transform, pixelScale, -pixelScale);
+      ol.transform.translate(transform, -tileExtent[0], -tileExtent[3]);
     }
 
-    replayState.replayGroup.replay(tileContext, pixelRatio,
+    var context = tile.getContext();
-        tileTransform, 0, frameState.skippedFeatureUids || {}, replays);
+    var size = source.getTilePixelSize(z, pixelRatio, frameState.viewState.projection);
+    context.canvas.width = size[0];
+    context.canvas.height = size[1];
+    replayState.replayGroup.replay(context, pixelRatio, transform, 0, {}, replays);
   }
 };

test/spec/ol/renderer/canvas/tilelayer.test.js

@@ -32,15 +32,18 @@ describe('ol.renderer.canvas.TileLayer', function() {
       renderer.renderedTiles = [];
       var frameState = {
         viewState: {
-          center: [2, 3],
+          center: [10, 5],
           projection: ol.proj.get('EPSG:3857'),
           resolution: 1,
           rotation: Math.PI
         },
-        size: [10, 10],
+        extent: [0, 0, 20, 10],
+        size: [20, 10],
         pixelRatio: 2,
         coordinateToPixelTransform: ol.transform.create(),
-        pixelToCoordinateTransform: ol.transform.create()
+        pixelToCoordinateTransform: ol.transform.create(),
+        usedTiles: {},
+        wantedTiles: {}
       };
       renderer.getImageTransform = function() {
         return ol.transform.create();
@@ -62,8 +65,9 @@ describe('ol.renderer.canvas.TileLayer', function() {
           return img;
         }
       }];
+      renderer.prepareFrame(frameState, layerState);
       renderer.composeFrame(frameState, layerState, context);
-      expect(context.drawImage.firstCall.args[0].width).to.be(112);
+      expect(context.drawImage.firstCall.args[0].width).to.be(17);
     });
   });
 

test/spec/ol/renderer/canvas/vectortilelayer.test.js

@@ -89,7 +89,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
     it('does not render images for pure vector rendering', function() {
       layer.renderMode_ = 'vector';
       var spy = sinon.spy(ol.renderer.canvas.VectorTileLayer.prototype,
-          'renderTileImages');
+          'renderTileImage_');
       map.renderSync();
       expect(spy.callCount).to.be(0);
       spy.restore();
@@ -98,7 +98,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
     it('does not render replays for pure image rendering', function() {
       layer.renderMode_ = 'image';
       var spy = sinon.spy(ol.renderer.canvas.VectorTileLayer.prototype,
-          'renderTileReplays_');
+          'getReplayTransform_');
       map.renderSync();
       expect(spy.callCount).to.be(0);
       spy.restore();
@@ -106,9 +106,9 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
 
     it('renders both replays and images for hybrid rendering', function() {
       var spy1 = sinon.spy(ol.renderer.canvas.VectorTileLayer.prototype,
-          'renderTileReplays_');
+          'getReplayTransform_');
       var spy2 = sinon.spy(ol.renderer.canvas.VectorTileLayer.prototype,
-          'renderTileImages');
+          'renderTileImage_');
       map.renderSync();
       expect(spy1.callCount).to.be(1);
       expect(spy2.callCount).to.be(1);