diff --git a/rendering/cases/layer-vectortile-renderbuffer/expected.png b/rendering/cases/layer-vectortile-renderbuffer/expected.png new file mode 100644 index 0000000000..95fadf80ba Binary files /dev/null and b/rendering/cases/layer-vectortile-renderbuffer/expected.png differ diff --git a/rendering/cases/layer-vectortile-renderbuffer/main.js b/rendering/cases/layer-vectortile-renderbuffer/main.js new file mode 100644 index 0000000000..439c671a65 --- /dev/null +++ b/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', +}); diff --git a/src/ol/render/canvas/Executor.js b/src/ol/render/canvas/Executor.js index 058961edaf..38722993c0 100644 --- a/src/ol/render/canvas/Executor.js +++ b/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} diff --git a/src/ol/render/canvas/ExecutorGroup.js b/src/ol/render/canvas/ExecutorGroup.js index 12f5c7ca1e..540dc828d4 100644 --- a/src/ol/render/canvas/ExecutorGroup.js +++ b/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 ); } } diff --git a/src/ol/renderer/canvas/VectorTileLayer.js b/src/ol/renderer/canvas/VectorTileLayer.js index 91cbf57935..39b6676075 100644 --- a/src/ol/renderer/canvas/VectorTileLayer.js +++ b/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 );