Fix handling of VectorTile renderBuffer

rendering/cases/layer-vectortile-renderbuffer/main.js

@@ -0,0 +1,59 @@
+import Feature from '../../../src/ol/Feature.js';
+import Map from '../../../src/ol/Map.js';
+import Point from '../../../src/ol/geom/Point.js';
+import VectorTileLayer from '../../../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../../../src/ol/source/VectorTile.js';
+import View from '../../../src/ol/View.js';
+import {Circle, Fill, Stroke, Style} from '../../../src/ol/style.js';
+
+const offset = 1380000;
+const points = [
+  [-offset, -offset],
+  [-offset, offset],
+  [offset, offset],
+  [offset, -offset],
+];
+
+const vectorTileSource = new VectorTileSource({
+  tileUrlFunction: (tileCoord) => tileCoord,
+  tileLoadFunction(tile, tileCoord) {
+    const features = points.map(
+      (corner) =>
+        new Feature({
+          geometry: new Point(corner),
+          tileCoord,
+        })
+    );
+    tile.setFeatures(features);
+  },
+});
+
+const vectorTileLayer = new VectorTileLayer({
+  source: vectorTileSource,
+  style: new Style({
+    image: new Circle({
+      radius: 50,
+      fill: new Fill({
+        color: 'rgba(255, 0, 0, 0.5)',
+      }),
+      stroke: new Stroke({
+        width: 1,
+        color: 'black',
+      }),
+    }),
+  }),
+});
+
+new Map({
+  target: 'map',
+  layers: [vectorTileLayer],
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+    multiWorld: true,
+  }),
+});
+
+render({
+  message: 'Vector tile layer renders tiles from renderBuffer',
+});

src/ol/render/canvas/Executor.js

@@ -110,9 +110,8 @@ class Executor {
    * @param {number} pixelRatio Pixel ratio.
    * @param {boolean} overlaps The replay can have overlapping geometries.
    * @param {import("../canvas.js").SerializableInstructions} instructions The serializable instructions
-   * @param {import("../../size.js").Size} renderBuffer Render buffer (width/height) in pixels.
    */
-  constructor(resolution, pixelRatio, overlaps, instructions, renderBuffer) {
+  constructor(resolution, pixelRatio, overlaps, instructions) {
     /**
      * @protected
      * @type {boolean}
@@ -156,12 +155,6 @@ class Executor {
      */
     this.coordinateCache_ = {};
 
-    /**
-     * @private
-     * @type {import("../../size.js").Size}
-     */
-    this.renderBuffer_ = renderBuffer;
-
     /**
      * @private
      * @type {!import("../../transform.js").Transform}

src/ol/render/canvas/ExecutorGroup.js

@@ -30,8 +30,8 @@ const ORDER = [
 class ExecutorGroup {
   /**
    * @param {import("../../extent.js").Extent} maxExtent Max extent for clipping. When a
-   * `maxExtent` was set on the Buillder for this executor group, the same `maxExtent`
-   * should be set here, unless the target context does not exceet that extent (which
+   * `maxExtent` was set on the Builder for this executor group, the same `maxExtent`
+   * should be set here, unless the target context does not exceed that extent (which
    * can be the case when rendering to tiles).
    * @param {number} resolution Resolution.
    * @param {number} pixelRatio Pixel ratio.
@@ -126,15 +126,13 @@ class ExecutorGroup {
         this.executorsByZIndex_[zIndex] = executors;
       }
       const instructionByZindex = allInstructions[zIndex];
-      const renderBuffer = [this.renderBuffer_ || 0, this.renderBuffer_ || 0];
       for (const builderType in instructionByZindex) {
         const instructions = instructionByZindex[builderType];
         executors[builderType] = new Executor(
           this.resolution_,
           this.pixelRatio_,
           this.overlaps_,
-          instructions,
-          renderBuffer
+          instructions
         );
       }
     }

src/ol/renderer/canvas/VectorTileLayer.js

@@ -282,17 +282,18 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
         sourceTileCoord
       );
       const sharedExtent = getIntersection(tileExtent, sourceTileExtent);
+      const builderExtent = buffer(
+        sharedExtent,
+        layer.getRenderBuffer() * resolution,
+        this.tmpExtent
+      );
       const bufferedExtent = equals(sourceTileExtent, sharedExtent)
         ? null
-        : buffer(
-            sharedExtent,
-            layer.getRenderBuffer() * resolution,
-            this.tmpExtent
-          );
+        : builderExtent;
       builderState.dirty = false;
       const builderGroup = new CanvasBuilderGroup(
         0,
-        sharedExtent,
+        builderExtent,
         resolution,
         pixelRatio
       );