From c24976155b9ceec900e1f199bf955699ebaf0b9f Mon Sep 17 00:00:00 2001
From: ahocevar <andreas.hocevar@gmail.com>
Date: Thu, 24 May 2018 15:56:26 +0200
Subject: [PATCH] Prepare tiles for rendering earlier

By overriding getTile() and creating replay and image there, we can do
all preparations earlier and stop creating new tiles when we have maxed
out the frame time budget. It also allows us to get rid of the
drawTileImage override.
---
 src/ol/renderer/canvas/VectorTileLayer.js | 48 +++++++++++------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/ol/renderer/canvas/VectorTileLayer.js b/src/ol/renderer/canvas/VectorTileLayer.js
index f4530c302a..0ec433cdc9 100644
--- a/src/ol/renderer/canvas/VectorTileLayer.js
+++ b/src/ol/renderer/canvas/VectorTileLayer.js
@@ -126,6 +126,21 @@ CanvasVectorTileLayerRenderer.prototype.disposeInternal = function() {
 };
 
 
+/**
+ * @inheritDoc
+ */
+CanvasVectorTileLayerRenderer.prototype.getTile = function(z, x, y, pixelRatio, projection) {
+  const tile = CanvasTileLayerRenderer.prototype.getTile.call(this, z, x, y, pixelRatio, projection);
+  if (tile.getState() === TileState.LOADED) {
+    this.createReplayGroup_(tile, pixelRatio, projection);
+    if (this.context) {
+      this.renderTileImage_(tile, pixelRatio, projection);
+    }
+  }
+  return tile;
+};
+
+
 /**
  * @inheritDoc
  */
@@ -149,13 +164,12 @@ CanvasVectorTileLayerRenderer.prototype.prepareFrame = function(frameState, laye
 
 /**
  * @param {module:ol/VectorImageTile} tile Tile.
- * @param {module:ol/PluggableMap~FrameState} frameState Frame state.
+ * @param {number} pixelRatio Pixel ratio.
+ * @param {module:ol/proj/Projection} projection Projection.
  * @private
  */
-CanvasVectorTileLayerRenderer.prototype.createReplayGroup_ = function(tile, frameState) {
+CanvasVectorTileLayerRenderer.prototype.createReplayGroup_ = function(tile, pixelRatio, projection) {
   const layer = this.getLayer();
-  const pixelRatio = frameState.pixelRatio;
-  const projection = frameState.viewState.projection;
   const revision = layer.getRevision();
   const renderOrder = /** @type {module:ol/render~OrderFunction} */ (layer.getRenderOrder()) || null;
 
@@ -241,20 +255,6 @@ CanvasVectorTileLayerRenderer.prototype.createReplayGroup_ = function(tile, fram
 };
 
 
-/**
- * @inheritDoc
- */
-CanvasVectorTileLayerRenderer.prototype.drawTileImage = function(
-  tile, frameState, layerState, x, y, w, h, gutter, transition) {
-  const vectorImageTile = /** @type {module:ol/VectorImageTile} */ (tile);
-  this.createReplayGroup_(vectorImageTile, frameState);
-  if (this.context) {
-    this.renderTileImage_(vectorImageTile, frameState, layerState);
-    CanvasTileLayerRenderer.prototype.drawTileImage.apply(this, arguments);
-  }
-};
-
-
 /**
  * @inheritDoc
  */
@@ -466,12 +466,12 @@ CanvasVectorTileLayerRenderer.prototype.renderFeature = function(feature, square
 
 /**
  * @param {module:ol/VectorImageTile} tile Tile.
- * @param {module:ol/PluggableMap~FrameState} frameState Frame state.
- * @param {module:ol/layer/Layer~State} layerState Layer state.
+ * @param {number} pixelRatio Pixel ratio.
+ * @param {module:ol/proj/Projection} projection Projection.
  * @private
  */
 CanvasVectorTileLayerRenderer.prototype.renderTileImage_ = function(
-  tile, frameState, layerState) {
+  tile, pixelRatio, projection) {
   const layer = this.getLayer();
   const replayState = tile.getReplayState(layer);
   const revision = layer.getRevision();
@@ -480,12 +480,11 @@ CanvasVectorTileLayerRenderer.prototype.renderTileImage_ = function(
     replayState.renderedTileRevision = revision;
     const tileCoord = tile.wrappedTileCoord;
     const z = tileCoord[0];
-    const pixelRatio = frameState.pixelRatio;
     const source = /** @type {module:ol/source/VectorTile} */ (layer.getSource());
-    const tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
+    const tileGrid = source.getTileGridForProjection(projection);
     const resolution = tileGrid.getResolution(z);
     const context = tile.getContext(layer);
-    const size = source.getTilePixelSize(z, pixelRatio, frameState.viewState.projection);
+    const size = source.getTilePixelSize(z, pixelRatio, projection);
     context.canvas.width = size[0];
     context.canvas.height = size[1];
     const tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent);
@@ -503,4 +502,5 @@ CanvasVectorTileLayerRenderer.prototype.renderTileImage_ = function(
     }
   }
 };
+
 export default CanvasVectorTileLayerRenderer;