Merge pull request #13939 from ahocevar/vectortile-postrender

Render vector tile vectors in correct sequence for the postrender event

src/ol/renderer/canvas/VectorTileLayer.js

@@ -617,18 +617,16 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
   }
 
   /**
-   * Render the layer.
+   * Render the vectors for this layer.
+   * @param {CanvasRenderingContext2D} context Target context.
    * @param {import("../../Map.js").FrameState} frameState Frame state.
-   * @param {HTMLElement} target Target that may be used to render content to.
-   * @return {HTMLElement} The rendered element.
    */
-  renderFrame(frameState, target) {
+  postRender(context, frameState) {
     const viewHints = frameState.viewHints;
     const hifi = !(
       viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]
     );
 
-    super.renderFrame(frameState, target);
     this.renderedPixelToCoordinateTransform_ =
       frameState.pixelToCoordinateTransform.slice();
     this.renderedRotation_ = frameState.viewState.rotation;
@@ -637,7 +635,6 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       this.getLayer()
     );
     const renderMode = layer.getRenderMode();
-    const context = this.context;
     const alpha = context.globalAlpha;
     context.globalAlpha = layer.getOpacity();
     const replayTypes = VECTOR_REPLAYS[renderMode];
@@ -725,7 +722,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     context.globalAlpha = alpha;
     this.ready = ready;
 
-    return this.container;
+    super.postRender(context, frameState);
   }
 
   /**

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

@@ -400,6 +400,88 @@ describe('ol/renderer/canvas/VectorTileLayer', function () {
     });
   });
 
+  describe('#renderFrame', function () {
+    it('uses correct image - vector sequence in vector mode', function () {
+      const layer = new VectorTileLayer({
+        renderMode: 'vector',
+        source: new VectorTileSource({
+          tileGrid: createXYZ(),
+        }),
+      });
+      const sourceTile = new VectorTile([0, 0, 0], 2);
+      sourceTile.features_ = [new RenderFeature('Point', [0, 0])];
+      sourceTile.getImage = function () {
+        return document.createElement('canvas');
+      };
+      layer.getSource().getSourceTiles = () => [sourceTile];
+      const tile = new VectorRenderTile([0, 0, 0], 1, [0, 0, 0], function () {
+        return sourceTile;
+      });
+      tile.transition_ = 0;
+      tile.replayState_[getUid(layer)] = [{dirty: true}];
+      tile.setState(TileState.LOADED);
+      layer.getSource().getTile = function () {
+        return tile;
+      };
+      const renderer = new CanvasVectorTileLayerRenderer(layer);
+      renderer.isDrawableTile = function () {
+        return true;
+      };
+      const proj = getProjection('EPSG:3857');
+      const frameState = {
+        layerStatesArray: [layer.getLayerState()],
+        layerIndex: 0,
+        extent: proj.getExtent(),
+        pixelRatio: 1,
+        pixelToCoordinateTransform: create(),
+        time: Date.now(),
+        viewHints: [],
+        viewState: {
+          center: [0, 0],
+          resolution: 156543.03392804097,
+          projection: proj,
+        },
+        size: [256, 256],
+        usedTiles: {},
+        wantedTiles: {},
+      };
+
+      renderer.container = {};
+      const sequence = [];
+      renderer.context = {
+        clearRect: () => sequence.push('clearRect'),
+        save: () => sequence.push('save'),
+        restore: () => sequence.push('restore'),
+        beginPath: () => sequence.push('beginPath'),
+        moveTo: () => sequence.push('moveTo'),
+        lineTo: () => sequence.push('lineTo'),
+        clip: () => sequence.push('clip'),
+        canvas: {
+          style: {
+            transform: '',
+          },
+        },
+      };
+
+      layer.on('prerender', () => sequence.push('prerender'));
+      layer.on('postrender', () => sequence.push('postrender'));
+      renderer.renderFrame(frameState);
+      expect(sequence).to.eql([
+        'prerender',
+        'clearRect',
+        'save',
+        'beginPath',
+        'moveTo',
+        'lineTo',
+        'lineTo',
+        'lineTo',
+        'clip',
+        'restore',
+        'postrender',
+      ]);
+    });
+  });
+
   describe('#forEachFeatureAtCoordinate', function () {
     /** @type {VectorTileLayer] */ let layer;
     /** @type {CanvasVectorTileLayerRenderer} */ let renderer;