Return two canvases from the vector tile layer renderer

src/ol/renderer/canvas/VectorTileLayer.js

@@ -2,6 +2,7 @@
  * @module ol/renderer/canvas/VectorTileLayer
  */
 import {getUid} from '../../util.js';
+import {createCanvasContext2D} from '../../dom.js';
 import TileState from '../../TileState.js';
 import ViewHint from '../../ViewHint.js';
 import {listen, unlisten} from '../../events.js';
@@ -12,7 +13,7 @@ import VectorTileRenderType from '../../layer/VectorTileRenderType.js';
 import {equivalent as equivalentProjection} from '../../proj.js';
 import Units from '../../proj/Units.js';
 import ReplayType from '../../render/ReplayType.js';
-import {labelCache, rotateAtOffset} from '../../render/canvas.js';
+import {labelCache} from '../../render/canvas.js';
 import CanvasBuilderGroup from '../../render/canvas/BuilderGroup.js';
 import {ORDER} from '../../render/replay.js';
 import CanvasTileLayerRenderer from './TileLayer.js';
@@ -60,6 +61,33 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
   constructor(layer) {
     super(layer);
 
+    const baseCanvas = this.context.canvas;
+
+    /**
+     * @private
+     * @type {CanvasRenderingContext2D}
+     */
+    this.overlayContext_ = createCanvasContext2D();
+
+    const overlayCanvas = this.overlayContext_.canvas;
+    overlayCanvas.style.position = 'absolute';
+
+    const container = document.createElement('div');
+    const style = container.style;
+    style.position = 'absolute';
+    style.display = 'flex';
+    style.alignItems = 'center';
+    style.justifyContent = 'center';
+
+    container.appendChild(baseCanvas);
+    container.appendChild(overlayCanvas);
+
+    /**
+     * @private
+     * @type {HTMLElement}
+     */
+    this.container_ = container;
+
     /**
      * Declutter tree.
      * @private
@@ -224,9 +252,9 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
           render.call(this, feature);
         }
       }
-      const replayGroupInstructions = builderGroup.finish();
+      const executorGroupInstructions = builderGroup.finish();
       const renderingReplayGroup = new CanvasExecutorGroup(0, sharedExtent, resolution,
-        pixelRatio, source.getOverlaps(), this.declutterTree_, replayGroupInstructions, layer.getRenderBuffer());
+        pixelRatio, source.getOverlaps(), this.declutterTree_, executorGroupInstructions, layer.getRenderBuffer());
       sourceTile.setExecutorGroup(layer, tile.tileCoord.toString(), renderingReplayGroup);
     }
     builderState.renderedRevision = revision;
@@ -329,101 +357,125 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
   /**
    * @inheritDoc
    */
-  postCompose(context, frameState, layerState) {
+  renderFrame(frameState, layerState) {
+    super.renderFrame(frameState, layerState);
+
     const layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
     const renderMode = layer.getRenderMode();
-    if (renderMode != VectorTileRenderType.IMAGE) {
+    if (renderMode === VectorTileRenderType.IMAGE) {
-      const declutterReplays = layer.getDeclutter() ? {} : null;
+      return this.container_;
-      const source = /** @type {import("../../source/VectorTile.js").default} */ (layer.getSource());
+    }
-      const replayTypes = VECTOR_REPLAYS[renderMode];
+
-      const pixelRatio = frameState.pixelRatio;
+    const context = this.overlayContext_;
-      const rotation = frameState.viewState.rotation;
+    const declutterReplays = layer.getDeclutter() ? {} : null;
-      const size = frameState.size;
+    const source = /** @type {import("../../source/VectorTile.js").default} */ (layer.getSource());
-      let offsetX, offsetY;
+    const replayTypes = VECTOR_REPLAYS[renderMode];
-      if (rotation) {
+    const pixelRatio = frameState.pixelRatio;
-        offsetX = Math.round(pixelRatio * size[0] / 2);
+    const rotation = frameState.viewState.rotation;
-        offsetY = Math.round(pixelRatio * size[1] / 2);
+    const size = frameState.size;
-        rotateAtOffset(context, -rotation, offsetX, offsetY);
+
+    // resize and clear
+    const canvas = context.canvas;
+    let width = Math.round(size[0] * pixelRatio);
+    let height = Math.round(size[1] * pixelRatio);
+    if (rotation) {
+      const size = Math.round(Math.sqrt(width * width + height * height));
+      width = height = size;
+    }
+    if (canvas.width != width || canvas.height != height) {
+      canvas.width = width;
+      canvas.height = height;
+      canvas.style.width = (width / pixelRatio) + 'px';
+      canvas.style.height = (height / pixelRatio) + 'px';
+    } else {
+      context.clearRect(0, 0, width, height);
+    }
+
+    if (declutterReplays) {
+      this.declutterTree_.clear();
+    }
+    const viewHints = frameState.viewHints;
+    const snapToPixel = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
+    const tiles = this.renderedTiles;
+    const tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
+    const clips = [];
+    const zs = [];
+    for (let i = tiles.length - 1; i >= 0; --i) {
+      const tile = /** @type {import("../../VectorImageTile.js").default} */ (tiles[i]);
+      if (tile.getState() == TileState.ABORT) {
+        continue;
       }
-      if (declutterReplays) {
+      const tileCoord = tile.tileCoord;
-        this.declutterTree_.clear();
+      const worldOffset = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent)[0] - tile.extent[0];
-      }
+      let transform = undefined;
-      const viewHints = frameState.viewHints;
+      for (let t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
-      const snapToPixel = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
+        const sourceTile = tile.getTile(tile.tileKeys[t]);
-      const tiles = this.renderedTiles;
+        if (sourceTile.getState() != TileState.LOADED) {
-      const tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
-      const clips = [];
-      const zs = [];
-      for (let i = tiles.length - 1; i >= 0; --i) {
-        const tile = /** @type {import("../../VectorImageTile.js").default} */ (tiles[i]);
-        if (tile.getState() == TileState.ABORT) {
           continue;
         }
-        const tileCoord = tile.tileCoord;
+        const executorGroup = /** @type {CanvasExecutorGroup} */ (sourceTile.getExecutorGroup(layer, tileCoord.toString()));
-        const worldOffset = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent)[0] - tile.extent[0];
+        if (!executorGroup || !executorGroup.hasExecutors(replayTypes)) {
-        let transform = undefined;
+          // sourceTile was not yet loaded when this.createReplayGroup_() was
-        for (let t = 0, tt = tile.tileKeys.length; t < tt; ++t) {
+          // called, or it has no replays of the types we want to render
-          const sourceTile = tile.getTile(tile.tileKeys[t]);
+          continue;
-          if (sourceTile.getState() != TileState.LOADED) {
-            continue;
-          }
-          const executorGroup = /** @type {CanvasExecutorGroup} */ (sourceTile.getExecutorGroup(layer, tileCoord.toString()));
-          if (!executorGroup || !executorGroup.hasExecutors(replayTypes)) {
-            // sourceTile was not yet loaded when this.createReplayGroup_() was
-            // called, or it has no replays of the types we want to render
-            continue;
-          }
-          if (!transform) {
-            transform = this.getTransform(frameState, worldOffset);
-          }
-          const currentZ = sourceTile.tileCoord[0];
-          const currentClip = executorGroup.getClipCoords(transform);
-          context.save();
-          context.globalAlpha = layerState.opacity;
-          // Create a clip mask for regions in this low resolution tile that are
-          // already filled by a higher resolution tile
-          for (let j = 0, jj = clips.length; j < jj; ++j) {
-            const 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();
-            }
-          }
-          executorGroup.execute(context, transform, rotation, {}, snapToPixel, replayTypes, declutterReplays);
-          context.restore();
-          clips.push(currentClip);
-          zs.push(currentZ);
         }
-      }
+        if (!transform) {
-      if (declutterReplays) {
+          transform = this.getTransform(frameState, worldOffset);
-        replayDeclutter(declutterReplays, context, rotation, snapToPixel);
+        }
-      }
+        const currentZ = sourceTile.tileCoord[0];
-      if (rotation) {
+        const currentClip = executorGroup.getClipCoords(transform);
-        rotateAtOffset(context, rotation,
+        context.save();
-          /** @type {number} */ (offsetX), /** @type {number} */ (offsetY));
+
+        // Create a clip mask for regions in this low resolution tile that are
+        // already filled by a higher resolution tile
+        for (let j = 0, jj = clips.length; j < jj; ++j) {
+          const 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();
+          }
+        }
+        executorGroup.execute(context, transform, rotation, {}, snapToPixel, replayTypes, declutterReplays);
+        context.restore();
+        clips.push(currentClip);
+        zs.push(currentZ);
       }
     }
-    super.postCompose(context, frameState, layerState);
+    if (declutterReplays) {
+      replayDeclutter(declutterReplays, context, rotation, snapToPixel);
+    }
+
+    const opacity = layerState.opacity;
+    if (opacity !== canvas.style.opacity) {
+      canvas.style.opacity = opacity;
+    }
+
+    const canvasTransform = 'rotate(' + rotation + 'rad)';
+    if (canvasTransform !== canvas.style.transform) {
+      canvas.style.transform = canvasTransform;
+    }
+
+    return this.container_;
   }
 
   /**
    * @param {import("../../Feature.js").FeatureLike} feature Feature.
    * @param {number} squaredTolerance Squared tolerance.
    * @param {import("../../style/Style.js").default|Array<import("../../style/Style.js").default>} styles The style or array of styles.
-   * @param {import("../../render/canvas/BuilderGroup.js").default} replayGroup Replay group.
+   * @param {import("../../render/canvas/BuilderGroup.js").default} executorGroup Replay group.
    * @return {boolean} `true` if an image is loading.
    */
-  renderFeature(feature, squaredTolerance, styles, replayGroup) {
+  renderFeature(feature, squaredTolerance, styles, executorGroup) {
     if (!styles) {
       return false;
     }
@@ -431,12 +483,12 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     if (Array.isArray(styles)) {
       for (let i = 0, ii = styles.length; i < ii; ++i) {
         loading = renderFeature(
-          replayGroup, feature, styles[i], squaredTolerance,
+          executorGroup, feature, styles[i], squaredTolerance,
           this.handleStyleImageChange_, this) || loading;
       }
     } else {
       loading = renderFeature(
-        replayGroup, feature, styles, squaredTolerance,
+        executorGroup, feature, styles, squaredTolerance,
         this.handleStyleImageChange_, this);
     }
     return loading;