planning

node_modules/ol/renderer/canvas/ImageLayer.d.ts

@@ -0,0 +1,28 @@
+export default CanvasImageLayerRenderer;
+/**
+ * @classdesc
+ * Canvas renderer for image layers.
+ * @api
+ */
+declare class CanvasImageLayerRenderer extends CanvasLayerRenderer<any> {
+    /**
+     * @param {import("../../layer/Image.js").default} imageLayer Image layer.
+     */
+    constructor(imageLayer: import("../../layer/Image.js").default<any>);
+    /**
+     * @protected
+     * @type {?import("../../ImageBase.js").default}
+     */
+    protected image_: import("../../ImageBase.js").default | null;
+    /**
+     * @return {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} Image.
+     */
+    getImage(): HTMLCanvasElement | HTMLImageElement | HTMLVideoElement;
+    /**
+     * @param {import("../../pixel.js").Pixel} pixel Pixel.
+     * @return {Uint8ClampedArray} Data at the pixel location.
+     */
+    getData(pixel: import("../../pixel.js").Pixel): Uint8ClampedArray;
+}
+import CanvasLayerRenderer from "./Layer.js";
+//# sourceMappingURL=ImageLayer.d.ts.map

node_modules/ol/renderer/canvas/ImageLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageLayer.d.ts","sourceRoot":"","sources":["../../src/renderer/canvas/ImageLayer.js"],"names":[],"mappings":";AA0BA;;;;GAIG;AACH;IACE;;OAEG;IACH,qEAQC;IALC;;;OAGG;IACH,kBAFW,OAAO,oBAAoB,EAAE,OAAO,QAE7B;IAGpB;;OAEG;IACH,YAFY,iBAAiB,GAAC,gBAAgB,GAAC,gBAAgB,CAI9D;IA2DD;;;OAGG;IACH,eAHW,OAAO,gBAAgB,EAAE,KAAK,GAC7B,iBAAiB,CAyC5B;CAwHF"}

node_modules/ol/renderer/canvas/ImageLayer.js

@@ -0,0 +1,211 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+/**
+ * @module ol/renderer/canvas/ImageLayer
+ */
+import CanvasLayerRenderer from './Layer.js';
+import ImageState from '../../ImageState.js';
+import ViewHint from '../../ViewHint.js';
+import { ENABLE_RASTER_REPROJECTION } from '../../reproj/common.js';
+import { IMAGE_SMOOTHING_DISABLED, IMAGE_SMOOTHING_ENABLED } from './common.js';
+import { apply as applyTransform, compose as composeTransform, makeInverse, toString as toTransformString, } from '../../transform.js';
+import { assign } from '../../obj.js';
+import { containsCoordinate, containsExtent, getHeight, getIntersection, getWidth, intersects as intersectsExtent, isEmpty, } from '../../extent.js';
+import { fromUserExtent } from '../../proj.js';
+/**
+ * @classdesc
+ * Canvas renderer for image layers.
+ * @api
+ */
+var CanvasImageLayerRenderer = /** @class */ (function (_super) {
+    __extends(CanvasImageLayerRenderer, _super);
+    /**
+     * @param {import("../../layer/Image.js").default} imageLayer Image layer.
+     */
+    function CanvasImageLayerRenderer(imageLayer) {
+        var _this = _super.call(this, imageLayer) || this;
+        /**
+         * @protected
+         * @type {?import("../../ImageBase.js").default}
+         */
+        _this.image_ = null;
+        return _this;
+    }
+    /**
+     * @return {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} Image.
+     */
+    CanvasImageLayerRenderer.prototype.getImage = function () {
+        return !this.image_ ? null : this.image_.getImage();
+    };
+    /**
+     * Determine whether render should be called.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @return {boolean} Layer is ready to be rendered.
+     */
+    CanvasImageLayerRenderer.prototype.prepareFrame = function (frameState) {
+        var layerState = frameState.layerStatesArray[frameState.layerIndex];
+        var pixelRatio = frameState.pixelRatio;
+        var viewState = frameState.viewState;
+        var viewResolution = viewState.resolution;
+        var imageSource = this.getLayer().getSource();
+        var hints = frameState.viewHints;
+        var renderedExtent = frameState.extent;
+        if (layerState.extent !== undefined) {
+            renderedExtent = getIntersection(renderedExtent, fromUserExtent(layerState.extent, viewState.projection));
+        }
+        if (!hints[ViewHint.ANIMATING] &&
+            !hints[ViewHint.INTERACTING] &&
+            !isEmpty(renderedExtent)) {
+            if (imageSource) {
+                var projection = viewState.projection;
+                if (!ENABLE_RASTER_REPROJECTION) {
+                    var sourceProjection = imageSource.getProjection();
+                    if (sourceProjection) {
+                        projection = sourceProjection;
+                    }
+                }
+                var image = imageSource.getImage(renderedExtent, viewResolution, pixelRatio, projection);
+                if (image) {
+                    if (this.loadImage(image)) {
+                        this.image_ = image;
+                    }
+                    else if (image.getState() === ImageState.EMPTY) {
+                        this.image_ = null;
+                    }
+                }
+            }
+            else {
+                this.image_ = null;
+            }
+        }
+        return !!this.image_;
+    };
+    /**
+     * @param {import("../../pixel.js").Pixel} pixel Pixel.
+     * @return {Uint8ClampedArray} Data at the pixel location.
+     */
+    CanvasImageLayerRenderer.prototype.getData = function (pixel) {
+        var frameState = this.frameState;
+        if (!frameState) {
+            return null;
+        }
+        var layer = this.getLayer();
+        var coordinate = applyTransform(frameState.pixelToCoordinateTransform, pixel.slice());
+        var layerExtent = layer.getExtent();
+        if (layerExtent) {
+            if (!containsCoordinate(layerExtent, coordinate)) {
+                return null;
+            }
+        }
+        var imageExtent = this.image_.getExtent();
+        var img = this.image_.getImage();
+        var imageMapWidth = getWidth(imageExtent);
+        var col = Math.floor(img.width * ((coordinate[0] - imageExtent[0]) / imageMapWidth));
+        if (col < 0 || col >= img.width) {
+            return null;
+        }
+        var imageMapHeight = getHeight(imageExtent);
+        var row = Math.floor(img.height * ((imageExtent[3] - coordinate[1]) / imageMapHeight));
+        if (row < 0 || row >= img.height) {
+            return null;
+        }
+        return this.getImageData(img, col, row);
+    };
+    /**
+     * Render the layer.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {HTMLElement} target Target that may be used to render content to.
+     * @return {HTMLElement} The rendered element.
+     */
+    CanvasImageLayerRenderer.prototype.renderFrame = function (frameState, target) {
+        var image = this.image_;
+        var imageExtent = image.getExtent();
+        var imageResolution = image.getResolution();
+        var imagePixelRatio = image.getPixelRatio();
+        var layerState = frameState.layerStatesArray[frameState.layerIndex];
+        var pixelRatio = frameState.pixelRatio;
+        var viewState = frameState.viewState;
+        var viewCenter = viewState.center;
+        var viewResolution = viewState.resolution;
+        var scale = (pixelRatio * imageResolution) / (viewResolution * imagePixelRatio);
+        var extent = frameState.extent;
+        var resolution = viewState.resolution;
+        var rotation = viewState.rotation;
+        // desired dimensions of the canvas in pixels
+        var width = Math.round((getWidth(extent) / resolution) * pixelRatio);
+        var height = Math.round((getHeight(extent) / resolution) * pixelRatio);
+        // set forward and inverse pixel transforms
+        composeTransform(this.pixelTransform, frameState.size[0] / 2, frameState.size[1] / 2, 1 / pixelRatio, 1 / pixelRatio, rotation, -width / 2, -height / 2);
+        makeInverse(this.inversePixelTransform, this.pixelTransform);
+        var canvasTransform = toTransformString(this.pixelTransform);
+        this.useContainer(target, canvasTransform, this.getBackground(frameState));
+        var context = this.context;
+        var canvas = context.canvas;
+        if (canvas.width != width || canvas.height != height) {
+            canvas.width = width;
+            canvas.height = height;
+        }
+        else if (!this.containerReused) {
+            context.clearRect(0, 0, width, height);
+        }
+        // clipped rendering if layer extent is set
+        var clipped = false;
+        var render = true;
+        if (layerState.extent) {
+            var layerExtent = fromUserExtent(layerState.extent, viewState.projection);
+            render = intersectsExtent(layerExtent, frameState.extent);
+            clipped = render && !containsExtent(layerExtent, frameState.extent);
+            if (clipped) {
+                this.clipUnrotated(context, frameState, layerExtent);
+            }
+        }
+        var img = image.getImage();
+        var transform = composeTransform(this.tempTransform, width / 2, height / 2, scale, scale, 0, (imagePixelRatio * (imageExtent[0] - viewCenter[0])) / imageResolution, (imagePixelRatio * (viewCenter[1] - imageExtent[3])) / imageResolution);
+        this.renderedResolution = (imageResolution * pixelRatio) / imagePixelRatio;
+        var dw = img.width * transform[0];
+        var dh = img.height * transform[3];
+        if (!this.getLayer().getSource().getInterpolate()) {
+            assign(context, IMAGE_SMOOTHING_DISABLED);
+        }
+        this.preRender(context, frameState);
+        if (render && dw >= 0.5 && dh >= 0.5) {
+            var dx = transform[4];
+            var dy = transform[5];
+            var opacity = layerState.opacity;
+            var previousAlpha = void 0;
+            if (opacity !== 1) {
+                previousAlpha = context.globalAlpha;
+                context.globalAlpha = opacity;
+            }
+            context.drawImage(img, 0, 0, +img.width, +img.height, dx, dy, dw, dh);
+            if (opacity !== 1) {
+                context.globalAlpha = previousAlpha;
+            }
+        }
+        this.postRender(context, frameState);
+        if (clipped) {
+            context.restore();
+        }
+        assign(context, IMAGE_SMOOTHING_ENABLED);
+        if (canvasTransform !== canvas.style.transform) {
+            canvas.style.transform = canvasTransform;
+        }
+        return this.container;
+    };
+    return CanvasImageLayerRenderer;
+}(CanvasLayerRenderer));
+export default CanvasImageLayerRenderer;
+//# sourceMappingURL=ImageLayer.js.map

node_modules/ol/renderer/canvas/Layer.d.ts

@@ -0,0 +1,121 @@
+/**
+ * @type {Array<HTMLCanvasElement>}
+ */
+export const canvasPool: Array<HTMLCanvasElement>;
+export default CanvasLayerRenderer;
+/**
+ * @abstract
+ * @template {import("../../layer/Layer.js").default} LayerType
+ * @extends {LayerRenderer<LayerType>}
+ */
+declare class CanvasLayerRenderer<LayerType extends import("../../layer/Layer.js").default<import("../../source/Source.js").default, LayerRenderer<any>>> extends LayerRenderer<LayerType> {
+    /**
+     * @protected
+     * @type {HTMLElement}
+     */
+    protected container: HTMLElement;
+    /**
+     * @protected
+     * @type {number}
+     */
+    protected renderedResolution: number;
+    /**
+     * A temporary transform.  The values in this transform should only be used in a
+     * function that sets the values.
+     * @protected
+     * @type {import("../../transform.js").Transform}
+     */
+    protected tempTransform: import("../../transform.js").Transform;
+    /**
+     * The transform for rendered pixels to viewport CSS pixels.  This transform must
+     * be set when rendering a frame and may be used by other functions after rendering.
+     * @protected
+     * @type {import("../../transform.js").Transform}
+     */
+    protected pixelTransform: import("../../transform.js").Transform;
+    /**
+     * The transform for viewport CSS pixels to rendered pixels.  This transform must
+     * be set when rendering a frame and may be used by other functions after rendering.
+     * @protected
+     * @type {import("../../transform.js").Transform}
+     */
+    protected inversePixelTransform: import("../../transform.js").Transform;
+    /**
+     * @type {CanvasRenderingContext2D}
+     */
+    context: CanvasRenderingContext2D;
+    /**
+     * @type {boolean}
+     */
+    containerReused: boolean;
+    /**
+     * @private
+     * @type {CanvasRenderingContext2D}
+     */
+    private pixelContext_;
+    /**
+     * @protected
+     * @type {import("../../PluggableMap.js").FrameState|null}
+     */
+    protected frameState: import("../../PluggableMap.js").FrameState | null;
+    /**
+     * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} image Image.
+     * @param {number} col The column index.
+     * @param {number} row The row index.
+     * @return {Uint8ClampedArray|null} The image data.
+     */
+    getImageData(image: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement, col: number, row: number): Uint8ClampedArray | null;
+    /**
+     * @param {import('../../PluggableMap.js').FrameState} frameState Frame state.
+     * @return {string} Background color.
+     */
+    getBackground(frameState: import('../../PluggableMap.js').FrameState): string;
+    /**
+     * Get a rendering container from an existing target, if compatible.
+     * @param {HTMLElement} target Potential render target.
+     * @param {string} transform CSS Transform.
+     * @param {string} [opt_backgroundColor] Background color.
+     */
+    useContainer(target: HTMLElement, transform: string, opt_backgroundColor?: string | undefined): void;
+    /**
+     * @param {CanvasRenderingContext2D} context Context.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {import("../../extent.js").Extent} extent Clip extent.
+     * @protected
+     */
+    protected clipUnrotated(context: CanvasRenderingContext2D, frameState: import("../../PluggableMap.js").FrameState, extent: import("../../extent.js").Extent): void;
+    /**
+     * @param {import("../../render/EventType.js").default} type Event type.
+     * @param {CanvasRenderingContext2D} context Context.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @private
+     */
+    private dispatchRenderEvent_;
+    /**
+     * @param {CanvasRenderingContext2D} context Context.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @protected
+     */
+    protected preRender(context: CanvasRenderingContext2D, frameState: import("../../PluggableMap.js").FrameState): void;
+    /**
+     * @param {CanvasRenderingContext2D} context Context.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @protected
+     */
+    protected postRender(context: CanvasRenderingContext2D, frameState: import("../../PluggableMap.js").FrameState): void;
+    /**
+     * Creates a transform for rendering to an element that will be rotated after rendering.
+     * @param {import("../../coordinate.js").Coordinate} center Center.
+     * @param {number} resolution Resolution.
+     * @param {number} rotation Rotation.
+     * @param {number} pixelRatio Pixel ratio.
+     * @param {number} width Width of the rendered element (in pixels).
+     * @param {number} height Height of the rendered element (in pixels).
+     * @param {number} offsetX Offset on the x-axis in view coordinates.
+     * @protected
+     * @return {!import("../../transform.js").Transform} Transform.
+     */
+    protected getRenderTransform(center: import("../../coordinate.js").Coordinate, resolution: number, rotation: number, pixelRatio: number, width: number, height: number, offsetX: number): import("../../transform.js").Transform;
+}
+import LayerRenderer from "../Layer.js";
+//# sourceMappingURL=Layer.d.ts.map

node_modules/ol/renderer/canvas/Layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layer.d.ts","sourceRoot":"","sources":["../../src/renderer/canvas/Layer.js"],"names":[],"mappings":"AAsBA;;GAEG;AACH,yBAFU,MAAM,iBAAiB,CAAC,CAEL;;AAc7B;;;;GAIG;AACH;IAOI;;;OAGG;IACH,qBAFU,WAAW,CAEA;IAErB;;;OAGG;IACH,8BAFU,MAAM,CAEO;IAEvB;;;;;OAKG;IACH,yBAFU,OAAO,oBAAoB,EAAE,SAAS,CAEV;IAEtC;;;;;OAKG;IACH,0BAFU,OAAO,oBAAoB,EAAE,SAAS,CAET;IAEvC;;;;;OAKG;IACH,iCAFU,OAAO,oBAAoB,EAAE,SAAS,CAEF;IAE9C;;OAEG;IACH,SAFU,wBAAwB,CAEf;IAEnB;;OAEG;IACH,iBAFU,OAAO,CAEW;IAE5B;;;OAGG;IACH,sBAAyB;IAEzB;;;OAGG;IACH,sBAFU,OAAO,uBAAuB,EAAE,UAAU,GAAC,IAAI,CAEnC;IAGxB;;;;;OAKG;IACH,oBALW,iBAAiB,GAAC,gBAAgB,GAAC,gBAAgB,OACnD,MAAM,OACN,MAAM,GACL,iBAAiB,GAAC,IAAI,CAiBjC;IAED;;;OAGG;IACH,0BAHW,OAAO,uBAAuB,EAAE,UAAU,GACzC,MAAM,CASjB;IAED;;;;;OAKG;IACH,qBAJW,WAAW,aACX,MAAM,kDAyDhB;IAED;;;;;OAKG;IACH,iCALW,wBAAwB,cACxB,OAAO,uBAAuB,EAAE,UAAU,UAC1C,OAAO,iBAAiB,EAAE,MAAM,QA2B1C;IAED;;;;;OAKG;IACH,6BAWC;IAED;;;;OAIG;IACH,6BAJW,wBAAwB,cACxB,OAAO,uBAAuB,EAAE,UAAU,QAMpD;IAED;;;;OAIG;IACH,8BAJW,wBAAwB,cACxB,OAAO,uBAAuB,EAAE,UAAU,QAKpD;IAED;;;;;;;;;;;OAWG;IACH,qCAVW,OAAO,qBAAqB,EAAE,UAAU,cACxC,MAAM,YACN,MAAM,cACN,MAAM,SACN,MAAM,UACN,MAAM,WACN,MAAM,GAEJ,OAAO,oBAAoB,EAAE,SAAS,CA2BlD;CAoEF"}

node_modules/ol/renderer/canvas/Layer.js

@@ -0,0 +1,331 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+/**
+ * @module ol/renderer/canvas/Layer
+ */
+import LayerRenderer from '../Layer.js';
+import RenderEvent from '../../render/Event.js';
+import RenderEventType from '../../render/EventType.js';
+import { apply as applyTransform, compose as composeTransform, create as createTransform, } from '../../transform.js';
+import { asArray } from '../../color.js';
+import { containsCoordinate, getBottomLeft, getBottomRight, getTopLeft, getTopRight, } from '../../extent.js';
+import { createCanvasContext2D } from '../../dom.js';
+import { equals } from '../../array.js';
+/**
+ * @type {Array<HTMLCanvasElement>}
+ */
+export var canvasPool = [];
+/**
+ * @type {CanvasRenderingContext2D}
+ */
+var pixelContext = null;
+function createPixelContext() {
+    var canvas = document.createElement('canvas');
+    canvas.width = 1;
+    canvas.height = 1;
+    pixelContext = canvas.getContext('2d');
+}
+/**
+ * @abstract
+ * @template {import("../../layer/Layer.js").default} LayerType
+ * @extends {LayerRenderer<LayerType>}
+ */
+var CanvasLayerRenderer = /** @class */ (function (_super) {
+    __extends(CanvasLayerRenderer, _super);
+    /**
+     * @param {LayerType} layer Layer.
+     */
+    function CanvasLayerRenderer(layer) {
+        var _this = _super.call(this, layer) || this;
+        /**
+         * @protected
+         * @type {HTMLElement}
+         */
+        _this.container = null;
+        /**
+         * @protected
+         * @type {number}
+         */
+        _this.renderedResolution;
+        /**
+         * A temporary transform.  The values in this transform should only be used in a
+         * function that sets the values.
+         * @protected
+         * @type {import("../../transform.js").Transform}
+         */
+        _this.tempTransform = createTransform();
+        /**
+         * The transform for rendered pixels to viewport CSS pixels.  This transform must
+         * be set when rendering a frame and may be used by other functions after rendering.
+         * @protected
+         * @type {import("../../transform.js").Transform}
+         */
+        _this.pixelTransform = createTransform();
+        /**
+         * The transform for viewport CSS pixels to rendered pixels.  This transform must
+         * be set when rendering a frame and may be used by other functions after rendering.
+         * @protected
+         * @type {import("../../transform.js").Transform}
+         */
+        _this.inversePixelTransform = createTransform();
+        /**
+         * @type {CanvasRenderingContext2D}
+         */
+        _this.context = null;
+        /**
+         * @type {boolean}
+         */
+        _this.containerReused = false;
+        /**
+         * @private
+         * @type {CanvasRenderingContext2D}
+         */
+        _this.pixelContext_ = null;
+        /**
+         * @protected
+         * @type {import("../../PluggableMap.js").FrameState|null}
+         */
+        _this.frameState = null;
+        return _this;
+    }
+    /**
+     * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} image Image.
+     * @param {number} col The column index.
+     * @param {number} row The row index.
+     * @return {Uint8ClampedArray|null} The image data.
+     */
+    CanvasLayerRenderer.prototype.getImageData = function (image, col, row) {
+        if (!pixelContext) {
+            createPixelContext();
+        }
+        pixelContext.clearRect(0, 0, 1, 1);
+        var data;
+        try {
+            pixelContext.drawImage(image, col, row, 1, 1, 0, 0, 1, 1);
+            data = pixelContext.getImageData(0, 0, 1, 1).data;
+        }
+        catch (err) {
+            pixelContext = null;
+            return null;
+        }
+        return data;
+    };
+    /**
+     * @param {import('../../PluggableMap.js').FrameState} frameState Frame state.
+     * @return {string} Background color.
+     */
+    CanvasLayerRenderer.prototype.getBackground = function (frameState) {
+        var layer = this.getLayer();
+        var background = layer.getBackground();
+        if (typeof background === 'function') {
+            background = background(frameState.viewState.resolution);
+        }
+        return background || undefined;
+    };
+    /**
+     * Get a rendering container from an existing target, if compatible.
+     * @param {HTMLElement} target Potential render target.
+     * @param {string} transform CSS Transform.
+     * @param {string} [opt_backgroundColor] Background color.
+     */
+    CanvasLayerRenderer.prototype.useContainer = function (target, transform, opt_backgroundColor) {
+        var layerClassName = this.getLayer().getClassName();
+        var container, context;
+        if (target &&
+            target.className === layerClassName &&
+            (!opt_backgroundColor ||
+                (target &&
+                    target.style.backgroundColor &&
+                    equals(asArray(target.style.backgroundColor), asArray(opt_backgroundColor))))) {
+            var canvas = target.firstElementChild;
+            if (canvas instanceof HTMLCanvasElement) {
+                context = canvas.getContext('2d');
+            }
+        }
+        if (context && context.canvas.style.transform === transform) {
+            // Container of the previous layer renderer can be used.
+            this.container = target;
+            this.context = context;
+            this.containerReused = true;
+        }
+        else if (this.containerReused) {
+            // Previously reused container cannot be used any more.
+            this.container = null;
+            this.context = null;
+            this.containerReused = false;
+        }
+        if (!this.container) {
+            container = document.createElement('div');
+            container.className = layerClassName;
+            var style = container.style;
+            style.position = 'absolute';
+            style.width = '100%';
+            style.height = '100%';
+            context = createCanvasContext2D();
+            var canvas = context.canvas;
+            container.appendChild(canvas);
+            style = canvas.style;
+            style.position = 'absolute';
+            style.left = '0';
+            style.transformOrigin = 'top left';
+            this.container = container;
+            this.context = context;
+        }
+        if (!this.containerReused &&
+            opt_backgroundColor &&
+            !this.container.style.backgroundColor) {
+            this.container.style.backgroundColor = opt_backgroundColor;
+        }
+    };
+    /**
+     * @param {CanvasRenderingContext2D} context Context.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {import("../../extent.js").Extent} extent Clip extent.
+     * @protected
+     */
+    CanvasLayerRenderer.prototype.clipUnrotated = function (context, frameState, extent) {
+        var topLeft = getTopLeft(extent);
+        var topRight = getTopRight(extent);
+        var bottomRight = getBottomRight(extent);
+        var bottomLeft = getBottomLeft(extent);
+        applyTransform(frameState.coordinateToPixelTransform, topLeft);
+        applyTransform(frameState.coordinateToPixelTransform, topRight);
+        applyTransform(frameState.coordinateToPixelTransform, bottomRight);
+        applyTransform(frameState.coordinateToPixelTransform, bottomLeft);
+        var inverted = this.inversePixelTransform;
+        applyTransform(inverted, topLeft);
+        applyTransform(inverted, topRight);
+        applyTransform(inverted, bottomRight);
+        applyTransform(inverted, bottomLeft);
+        context.save();
+        context.beginPath();
+        context.moveTo(Math.round(topLeft[0]), Math.round(topLeft[1]));
+        context.lineTo(Math.round(topRight[0]), Math.round(topRight[1]));
+        context.lineTo(Math.round(bottomRight[0]), Math.round(bottomRight[1]));
+        context.lineTo(Math.round(bottomLeft[0]), Math.round(bottomLeft[1]));
+        context.clip();
+    };
+    /**
+     * @param {import("../../render/EventType.js").default} type Event type.
+     * @param {CanvasRenderingContext2D} context Context.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @private
+     */
+    CanvasLayerRenderer.prototype.dispatchRenderEvent_ = function (type, context, frameState) {
+        var layer = this.getLayer();
+        if (layer.hasListener(type)) {
+            var event_1 = new RenderEvent(type, this.inversePixelTransform, frameState, context);
+            layer.dispatchEvent(event_1);
+        }
+    };
+    /**
+     * @param {CanvasRenderingContext2D} context Context.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @protected
+     */
+    CanvasLayerRenderer.prototype.preRender = function (context, frameState) {
+        this.frameState = frameState;
+        this.dispatchRenderEvent_(RenderEventType.PRERENDER, context, frameState);
+    };
+    /**
+     * @param {CanvasRenderingContext2D} context Context.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @protected
+     */
+    CanvasLayerRenderer.prototype.postRender = function (context, frameState) {
+        this.dispatchRenderEvent_(RenderEventType.POSTRENDER, context, frameState);
+    };
+    /**
+     * Creates a transform for rendering to an element that will be rotated after rendering.
+     * @param {import("../../coordinate.js").Coordinate} center Center.
+     * @param {number} resolution Resolution.
+     * @param {number} rotation Rotation.
+     * @param {number} pixelRatio Pixel ratio.
+     * @param {number} width Width of the rendered element (in pixels).
+     * @param {number} height Height of the rendered element (in pixels).
+     * @param {number} offsetX Offset on the x-axis in view coordinates.
+     * @protected
+     * @return {!import("../../transform.js").Transform} Transform.
+     */
+    CanvasLayerRenderer.prototype.getRenderTransform = function (center, resolution, rotation, pixelRatio, width, height, offsetX) {
+        var dx1 = width / 2;
+        var dy1 = height / 2;
+        var sx = pixelRatio / resolution;
+        var sy = -sx;
+        var dx2 = -center[0] + offsetX;
+        var dy2 = -center[1];
+        return composeTransform(this.tempTransform, dx1, dy1, sx, sy, -rotation, dx2, dy2);
+    };
+    /**
+     * @param {import("../../pixel.js").Pixel} pixel Pixel.
+     * @param {import("../../PluggableMap.js").FrameState} frameState FrameState.
+     * @param {number} hitTolerance Hit tolerance in pixels.
+     * @return {Uint8ClampedArray|Uint8Array} The result.  If there is no data at the pixel
+     *    location, null will be returned.  If there is data, but pixel values cannot be
+     *    returned, and empty array will be returned.
+     */
+    CanvasLayerRenderer.prototype.getDataAtPixel = function (pixel, frameState, hitTolerance) {
+        var renderPixel = applyTransform(this.inversePixelTransform, pixel.slice());
+        var context = this.context;
+        var layer = this.getLayer();
+        var layerExtent = layer.getExtent();
+        if (layerExtent) {
+            var renderCoordinate = applyTransform(frameState.pixelToCoordinateTransform, pixel.slice());
+            /** get only data inside of the layer extent */
+            if (!containsCoordinate(layerExtent, renderCoordinate)) {
+                return null;
+            }
+        }
+        var x = Math.round(renderPixel[0]);
+        var y = Math.round(renderPixel[1]);
+        var pixelContext = this.pixelContext_;
+        if (!pixelContext) {
+            var pixelCanvas = document.createElement('canvas');
+            pixelCanvas.width = 1;
+            pixelCanvas.height = 1;
+            pixelContext = pixelCanvas.getContext('2d');
+            this.pixelContext_ = pixelContext;
+        }
+        pixelContext.clearRect(0, 0, 1, 1);
+        var data;
+        try {
+            pixelContext.drawImage(context.canvas, x, y, 1, 1, 0, 0, 1, 1);
+            data = pixelContext.getImageData(0, 0, 1, 1).data;
+        }
+        catch (err) {
+            if (err.name === 'SecurityError') {
+                // tainted canvas, we assume there is data at the given pixel (although there might not be)
+                this.pixelContext_ = null;
+                return new Uint8Array();
+            }
+            return data;
+        }
+        if (data[3] === 0) {
+            return null;
+        }
+        return data;
+    };
+    /**
+     * Clean up.
+     */
+    CanvasLayerRenderer.prototype.disposeInternal = function () {
+        delete this.frameState;
+        _super.prototype.disposeInternal.call(this);
+    };
+    return CanvasLayerRenderer;
+}(LayerRenderer));
+export default CanvasLayerRenderer;
+//# sourceMappingURL=Layer.js.map

node_modules/ol/renderer/canvas/TileLayer.d.ts

@@ -0,0 +1,138 @@
+export default CanvasTileLayerRenderer;
+/**
+ * @classdesc
+ * Canvas renderer for tile layers.
+ * @api
+ * @template {import("../../layer/Tile.js").default<import("../../source/Tile.js").default>|import("../../layer/VectorTile.js").default} [LayerType=import("../../layer/Tile.js").default<import("../../source/Tile.js").default>|import("../../layer/VectorTile.js").default]
+ * @extends {CanvasLayerRenderer<LayerType>}
+ */
+declare class CanvasTileLayerRenderer<LayerType extends import("../../layer/Tile.js").default<import("../../source/Tile.js").default> | import("../../layer/VectorTile.js").default = import("../../layer/Tile.js").default<import("../../source/Tile.js").default> | import("../../layer/VectorTile.js").default> extends CanvasLayerRenderer<LayerType> {
+    /**
+     * @param {LayerType} tileLayer Tile layer.
+     */
+    constructor(tileLayer: LayerType);
+    /**
+     * Rendered extent has changed since the previous `renderFrame()` call
+     * @type {boolean}
+     */
+    extentChanged: boolean;
+    /**
+     * @private
+     * @type {?import("../../extent.js").Extent}
+     */
+    private renderedExtent_;
+    /**
+     * @protected
+     * @type {number}
+     */
+    protected renderedPixelRatio: number;
+    /**
+     * @protected
+     * @type {import("../../proj/Projection.js").default}
+     */
+    protected renderedProjection: import("../../proj/Projection.js").default;
+    /**
+     * @protected
+     * @type {number}
+     */
+    protected renderedRevision: number;
+    /**
+     * @protected
+     * @type {!Array<import("../../Tile.js").default>}
+     */
+    protected renderedTiles: Array<import("../../Tile.js").default>;
+    /**
+     * @private
+     * @type {boolean}
+     */
+    private newTiles_;
+    /**
+     * @protected
+     * @type {import("../../extent.js").Extent}
+     */
+    protected tmpExtent: import("../../extent.js").Extent;
+    /**
+     * @private
+     * @type {import("../../TileRange.js").default}
+     */
+    private tmpTileRange_;
+    /**
+     * @protected
+     * @param {import("../../Tile.js").default} tile Tile.
+     * @return {boolean} Tile is drawable.
+     */
+    protected isDrawableTile(tile: import("../../Tile.js").default): boolean;
+    /**
+     * @param {number} z Tile coordinate z.
+     * @param {number} x Tile coordinate x.
+     * @param {number} y Tile coordinate y.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @return {!import("../../Tile.js").default} Tile.
+     */
+    getTile(z: number, x: number, y: number, frameState: import("../../PluggableMap.js").FrameState): import("../../Tile.js").default;
+    /**
+     * @param {import("../../pixel.js").Pixel} pixel Pixel.
+     * @return {Uint8ClampedArray} Data at the pixel location.
+     */
+    getData(pixel: import("../../pixel.js").Pixel): Uint8ClampedArray;
+    /**
+     * @param {import("../../ImageTile.js").default} tile Tile.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {number} x Left of the tile.
+     * @param {number} y Top of the tile.
+     * @param {number} w Width of the tile.
+     * @param {number} h Height of the tile.
+     * @param {number} gutter Tile gutter.
+     * @param {boolean} transition Apply an alpha transition.
+     */
+    drawTileImage(tile: import("../../ImageTile.js").default, frameState: import("../../PluggableMap.js").FrameState, x: number, y: number, w: number, h: number, gutter: number, transition: boolean): void;
+    /**
+     * @return {HTMLCanvasElement} Image
+     */
+    getImage(): HTMLCanvasElement;
+    /**
+     * Get the image from a tile.
+     * @param {import("../../ImageTile.js").default} tile Tile.
+     * @return {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} Image.
+     * @protected
+     */
+    protected getTileImage(tile: import("../../ImageTile.js").default): HTMLCanvasElement | HTMLImageElement | HTMLVideoElement;
+    /**
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {import("../../source/Tile.js").default} tileSource Tile source.
+     * @protected
+     */
+    protected scheduleExpireCache(frameState: import("../../PluggableMap.js").FrameState, tileSource: import("../../source/Tile.js").default): void;
+    /**
+     * @param {!Object<string, !Object<string, boolean>>} usedTiles Used tiles.
+     * @param {import("../../source/Tile.js").default} tileSource Tile source.
+     * @param {import('../../Tile.js').default} tile Tile.
+     * @protected
+     */
+    protected updateUsedTiles(usedTiles: {
+        [x: string]: {
+            [x: string]: boolean;
+        };
+    }, tileSource: import("../../source/Tile.js").default, tile: import('../../Tile.js').default): void;
+    /**
+     * Manage tile pyramid.
+     * This function performs a number of functions related to the tiles at the
+     * current zoom and lower zoom levels:
+     * - registers idle tiles in frameState.wantedTiles so that they are not
+     *   discarded by the tile queue
+     * - enqueues missing tiles
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {import("../../source/Tile.js").default} tileSource Tile source.
+     * @param {import("../../tilegrid/TileGrid.js").default} tileGrid Tile grid.
+     * @param {number} pixelRatio Pixel ratio.
+     * @param {import("../../proj/Projection.js").default} projection Projection.
+     * @param {import("../../extent.js").Extent} extent Extent.
+     * @param {number} currentZ Current Z.
+     * @param {number} preload Load low resolution tiles up to `preload` levels.
+     * @param {function(import("../../Tile.js").default):void} [opt_tileCallback] Tile callback.
+     * @protected
+     */
+    protected manageTilePyramid(frameState: import("../../PluggableMap.js").FrameState, tileSource: import("../../source/Tile.js").default, tileGrid: import("../../tilegrid/TileGrid.js").default, pixelRatio: number, projection: import("../../proj/Projection.js").default, extent: import("../../extent.js").Extent, currentZ: number, preload: number, opt_tileCallback?: ((arg0: import("../../Tile.js").default) => void) | undefined): void;
+}
+import CanvasLayerRenderer from "./Layer.js";
+//# sourceMappingURL=TileLayer.d.ts.map

node_modules/ol/renderer/canvas/TileLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileLayer.d.ts","sourceRoot":"","sources":["../../src/renderer/canvas/TileLayer.js"],"names":[],"mappings":";AAgCA;;;;;;GAMG;AACH;IACE;;OAEG;IACH,uBAFW,SAAS,EA0DnB;IArDC;;;OAGG;IACH,eAFU,OAAO,CAEQ;IAEzB;;;OAGG;IACH,wBAA2B;IAE3B;;;OAGG;IACH,8BAFU,MAAM,CAEO;IAEvB;;;OAGG;IACH,8BAFU,OAAO,0BAA0B,EAAE,OAAO,CAEtB;IAE9B;;;OAGG;IACH,4BAFU,MAAM,CAEK;IAErB;;;OAGG;IACH,yBAFW,MAAM,OAAO,eAAe,EAAE,OAAO,CAAC,CAE1B;IAEvB;;;OAGG;IACH,kBAAsB;IAEtB;;;OAGG;IACH,qBAFU,OAAO,iBAAiB,EAAE,MAAM,CAEZ;IAE9B;;;OAGG;IACH,sBAA8C;IAGhD;;;;OAIG;IACH,+BAHW,OAAO,eAAe,EAAE,OAAO,GAC9B,OAAO,CAWlB;IAED;;;;;;OAMG;IACH,WANW,MAAM,KACN,MAAM,KACN,MAAM,cACN,OAAO,uBAAuB,EAAE,UAAU,GACxC,OAAO,eAAe,EAAE,OAAO,CAqB3C;IAED;;;OAGG;IACH,eAHW,OAAO,gBAAgB,EAAE,KAAK,GAC7B,iBAAiB,CAyE5B;IAoWD;;;;;;;;;OASG;IACH,oBATW,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,uBAAuB,EAAE,UAAU,KAC1C,MAAM,KACN,MAAM,KACN,MAAM,KACN,MAAM,UACN,MAAM,cACN,OAAO,QAqCjB;IAED;;OAEG;IACH,YAFY,iBAAiB,CAK5B;IAED;;;;;OAKG;IACH,6BAJW,OAAO,oBAAoB,EAAE,OAAO,GACnC,iBAAiB,GAAC,gBAAgB,GAAC,gBAAgB,CAK9D;IAED;;;;OAIG;IACH,0CAJW,OAAO,uBAAuB,EAAE,UAAU,cAC1C,OAAO,sBAAsB,EAAE,OAAO,QA0BhD;IAED;;;;;OAKG;IACH;YALmB,MAAM;gBAAU,MAAM,GAAE,OAAO;;mBACvC,OAAO,sBAAsB,EAAE,OAAO,QACtC,OAAO,eAAe,EAAE,OAAO,QAUzC;IAED;;;;;;;;;;;;;;;;;OAiBG;IACH,wCAXW,OAAO,uBAAuB,EAAE,UAAU,cAC1C,OAAO,sBAAsB,EAAE,OAAO,YACtC,OAAO,4BAA4B,EAAE,OAAO,cAC5C,MAAM,cACN,OAAO,0BAA0B,EAAE,OAAO,UAC1C,OAAO,iBAAiB,EAAE,MAAM,YAChC,MAAM,WACN,MAAM,6BACG,OAAO,eAAe,EAAE,OAAO,KAAE,IAAI,qBAmExD;CACF"}

node_modules/ol/renderer/canvas/TileLayer.js

@@ -0,0 +1,581 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+/**
+ * @module ol/renderer/canvas/TileLayer
+ */
+import CanvasLayerRenderer from './Layer.js';
+import ImageTile from '../../ImageTile.js';
+import ReprojTile from '../../reproj/Tile.js';
+import TileRange from '../../TileRange.js';
+import TileState from '../../TileState.js';
+import { IMAGE_SMOOTHING_DISABLED, IMAGE_SMOOTHING_ENABLED } from './common.js';
+import { apply as applyTransform, compose as composeTransform, makeInverse, toString as toTransformString, } from '../../transform.js';
+import { assign } from '../../obj.js';
+import { containsCoordinate, createEmpty, equals, getHeight, getIntersection, getRotatedViewport, getTopLeft, getWidth, intersects, } from '../../extent.js';
+import { fromUserExtent } from '../../proj.js';
+import { getUid } from '../../util.js';
+import { numberSafeCompareFunction } from '../../array.js';
+import { toSize } from '../../size.js';
+/**
+ * @classdesc
+ * Canvas renderer for tile layers.
+ * @api
+ * @template {import("../../layer/Tile.js").default<import("../../source/Tile.js").default>|import("../../layer/VectorTile.js").default} [LayerType=import("../../layer/Tile.js").default<import("../../source/Tile.js").default>|import("../../layer/VectorTile.js").default]
+ * @extends {CanvasLayerRenderer<LayerType>}
+ */
+var CanvasTileLayerRenderer = /** @class */ (function (_super) {
+    __extends(CanvasTileLayerRenderer, _super);
+    /**
+     * @param {LayerType} tileLayer Tile layer.
+     */
+    function CanvasTileLayerRenderer(tileLayer) {
+        var _this = _super.call(this, tileLayer) || this;
+        /**
+         * Rendered extent has changed since the previous `renderFrame()` call
+         * @type {boolean}
+         */
+        _this.extentChanged = true;
+        /**
+         * @private
+         * @type {?import("../../extent.js").Extent}
+         */
+        _this.renderedExtent_ = null;
+        /**
+         * @protected
+         * @type {number}
+         */
+        _this.renderedPixelRatio;
+        /**
+         * @protected
+         * @type {import("../../proj/Projection.js").default}
+         */
+        _this.renderedProjection = null;
+        /**
+         * @protected
+         * @type {number}
+         */
+        _this.renderedRevision;
+        /**
+         * @protected
+         * @type {!Array<import("../../Tile.js").default>}
+         */
+        _this.renderedTiles = [];
+        /**
+         * @private
+         * @type {boolean}
+         */
+        _this.newTiles_ = false;
+        /**
+         * @protected
+         * @type {import("../../extent.js").Extent}
+         */
+        _this.tmpExtent = createEmpty();
+        /**
+         * @private
+         * @type {import("../../TileRange.js").default}
+         */
+        _this.tmpTileRange_ = new TileRange(0, 0, 0, 0);
+        return _this;
+    }
+    /**
+     * @protected
+     * @param {import("../../Tile.js").default} tile Tile.
+     * @return {boolean} Tile is drawable.
+     */
+    CanvasTileLayerRenderer.prototype.isDrawableTile = function (tile) {
+        var tileLayer = this.getLayer();
+        var tileState = tile.getState();
+        var useInterimTilesOnError = tileLayer.getUseInterimTilesOnError();
+        return (tileState == TileState.LOADED ||
+            tileState == TileState.EMPTY ||
+            (tileState == TileState.ERROR && !useInterimTilesOnError));
+    };
+    /**
+     * @param {number} z Tile coordinate z.
+     * @param {number} x Tile coordinate x.
+     * @param {number} y Tile coordinate y.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @return {!import("../../Tile.js").default} Tile.
+     */
+    CanvasTileLayerRenderer.prototype.getTile = function (z, x, y, frameState) {
+        var pixelRatio = frameState.pixelRatio;
+        var projection = frameState.viewState.projection;
+        var tileLayer = this.getLayer();
+        var tileSource = tileLayer.getSource();
+        var tile = tileSource.getTile(z, x, y, pixelRatio, projection);
+        if (tile.getState() == TileState.ERROR) {
+            if (!tileLayer.getUseInterimTilesOnError()) {
+                // When useInterimTilesOnError is false, we consider the error tile as loaded.
+                tile.setState(TileState.LOADED);
+            }
+            else if (tileLayer.getPreload() > 0) {
+                // Preloaded tiles for lower resolutions might have finished loading.
+                this.newTiles_ = true;
+            }
+        }
+        if (!this.isDrawableTile(tile)) {
+            tile = tile.getInterimTile();
+        }
+        return tile;
+    };
+    /**
+     * @param {import("../../pixel.js").Pixel} pixel Pixel.
+     * @return {Uint8ClampedArray} Data at the pixel location.
+     */
+    CanvasTileLayerRenderer.prototype.getData = function (pixel) {
+        var frameState = this.frameState;
+        if (!frameState) {
+            return null;
+        }
+        var layer = this.getLayer();
+        var coordinate = applyTransform(frameState.pixelToCoordinateTransform, pixel.slice());
+        var layerExtent = layer.getExtent();
+        if (layerExtent) {
+            if (!containsCoordinate(layerExtent, coordinate)) {
+                return null;
+            }
+        }
+        var pixelRatio = frameState.pixelRatio;
+        var projection = frameState.viewState.projection;
+        var viewState = frameState.viewState;
+        var source = layer.getRenderSource();
+        var tileGrid = source.getTileGridForProjection(viewState.projection);
+        var tilePixelRatio = source.getTilePixelRatio(frameState.pixelRatio);
+        for (var z = tileGrid.getZForResolution(viewState.resolution); z >= tileGrid.getMinZoom(); --z) {
+            var tileCoord = tileGrid.getTileCoordForCoordAndZ(coordinate, z);
+            var tile = source.getTile(z, tileCoord[1], tileCoord[2], pixelRatio, projection);
+            if (!(tile instanceof ImageTile || tile instanceof ReprojTile)) {
+                return null;
+            }
+            if (tile.getState() !== TileState.LOADED) {
+                continue;
+            }
+            var tileOrigin = tileGrid.getOrigin(z);
+            var tileSize = toSize(tileGrid.getTileSize(z));
+            var tileResolution = tileGrid.getResolution(z);
+            var col = Math.floor(tilePixelRatio *
+                ((coordinate[0] - tileOrigin[0]) / tileResolution -
+                    tileCoord[1] * tileSize[0]));
+            var row = Math.floor(tilePixelRatio *
+                ((tileOrigin[1] - coordinate[1]) / tileResolution -
+                    tileCoord[2] * tileSize[1]));
+            var gutter = Math.round(tilePixelRatio * source.getGutterForProjection(viewState.projection));
+            return this.getImageData(tile.getImage(), col + gutter, row + gutter);
+        }
+        return null;
+    };
+    /**
+     * @param {Object<number, Object<string, import("../../Tile.js").default>>} tiles Lookup of loaded tiles by zoom level.
+     * @param {number} zoom Zoom level.
+     * @param {import("../../Tile.js").default} tile Tile.
+     * @return {boolean|void} If `false`, the tile will not be considered loaded.
+     */
+    CanvasTileLayerRenderer.prototype.loadedTileCallback = function (tiles, zoom, tile) {
+        if (this.isDrawableTile(tile)) {
+            return _super.prototype.loadedTileCallback.call(this, tiles, zoom, tile);
+        }
+        return false;
+    };
+    /**
+     * Determine whether render should be called.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @return {boolean} Layer is ready to be rendered.
+     */
+    CanvasTileLayerRenderer.prototype.prepareFrame = function (frameState) {
+        return !!this.getLayer().getSource();
+    };
+    /**
+     * Render the layer.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {HTMLElement} target Target that may be used to render content to.
+     * @return {HTMLElement} The rendered element.
+     */
+    CanvasTileLayerRenderer.prototype.renderFrame = function (frameState, target) {
+        var layerState = frameState.layerStatesArray[frameState.layerIndex];
+        var viewState = frameState.viewState;
+        var projection = viewState.projection;
+        var viewResolution = viewState.resolution;
+        var viewCenter = viewState.center;
+        var rotation = viewState.rotation;
+        var pixelRatio = frameState.pixelRatio;
+        var tileLayer = this.getLayer();
+        var tileSource = tileLayer.getSource();
+        var sourceRevision = tileSource.getRevision();
+        var tileGrid = tileSource.getTileGridForProjection(projection);
+        var z = tileGrid.getZForResolution(viewResolution, tileSource.zDirection);
+        var tileResolution = tileGrid.getResolution(z);
+        var extent = frameState.extent;
+        var resolution = frameState.viewState.resolution;
+        var tilePixelRatio = tileSource.getTilePixelRatio(pixelRatio);
+        // desired dimensions of the canvas in pixels
+        var width = Math.round((getWidth(extent) / resolution) * pixelRatio);
+        var height = Math.round((getHeight(extent) / resolution) * pixelRatio);
+        var layerExtent = layerState.extent && fromUserExtent(layerState.extent, projection);
+        if (layerExtent) {
+            extent = getIntersection(extent, fromUserExtent(layerState.extent, projection));
+        }
+        var dx = (tileResolution * width) / 2 / tilePixelRatio;
+        var dy = (tileResolution * height) / 2 / tilePixelRatio;
+        var canvasExtent = [
+            viewCenter[0] - dx,
+            viewCenter[1] - dy,
+            viewCenter[0] + dx,
+            viewCenter[1] + dy,
+        ];
+        var tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z);
+        /**
+         * @type {Object<number, Object<string, import("../../Tile.js").default>>}
+         */
+        var tilesToDrawByZ = {};
+        tilesToDrawByZ[z] = {};
+        var findLoadedTiles = this.createLoadedTileFinder(tileSource, projection, tilesToDrawByZ);
+        var tmpExtent = this.tmpExtent;
+        var tmpTileRange = this.tmpTileRange_;
+        this.newTiles_ = false;
+        var viewport = rotation
+            ? getRotatedViewport(viewState.center, resolution, rotation, frameState.size)
+            : undefined;
+        for (var x = tileRange.minX; x <= tileRange.maxX; ++x) {
+            for (var y = tileRange.minY; y <= tileRange.maxY; ++y) {
+                if (rotation &&
+                    !tileGrid.tileCoordIntersectsViewport([z, x, y], viewport)) {
+                    continue;
+                }
+                var tile = this.getTile(z, x, y, frameState);
+                if (this.isDrawableTile(tile)) {
+                    var uid = getUid(this);
+                    if (tile.getState() == TileState.LOADED) {
+                        tilesToDrawByZ[z][tile.tileCoord.toString()] = tile;
+                        var inTransition = tile.inTransition(uid);
+                        if (inTransition && layerState.opacity !== 1) {
+                            // Skipping transition when layer is not fully opaque avoids visual artifacts.
+                            tile.endTransition(uid);
+                            inTransition = false;
+                        }
+                        if (!this.newTiles_ &&
+                            (inTransition || this.renderedTiles.indexOf(tile) === -1)) {
+                            this.newTiles_ = true;
+                        }
+                    }
+                    if (tile.getAlpha(uid, frameState.time) === 1) {
+                        // don't look for alt tiles if alpha is 1
+                        continue;
+                    }
+                }
+                var childTileRange = tileGrid.getTileCoordChildTileRange(tile.tileCoord, tmpTileRange, tmpExtent);
+                var covered = false;
+                if (childTileRange) {
+                    covered = findLoadedTiles(z + 1, childTileRange);
+                }
+                if (!covered) {
+                    tileGrid.forEachTileCoordParentTileRange(tile.tileCoord, findLoadedTiles, tmpTileRange, tmpExtent);
+                }
+            }
+        }
+        var canvasScale = ((tileResolution / viewResolution) * pixelRatio) / tilePixelRatio;
+        // set forward and inverse pixel transforms
+        composeTransform(this.pixelTransform, frameState.size[0] / 2, frameState.size[1] / 2, 1 / pixelRatio, 1 / pixelRatio, rotation, -width / 2, -height / 2);
+        var canvasTransform = toTransformString(this.pixelTransform);
+        this.useContainer(target, canvasTransform, this.getBackground(frameState));
+        var context = this.context;
+        var canvas = context.canvas;
+        makeInverse(this.inversePixelTransform, this.pixelTransform);
+        // set scale transform for calculating tile positions on the canvas
+        composeTransform(this.tempTransform, width / 2, height / 2, canvasScale, canvasScale, 0, -width / 2, -height / 2);
+        if (canvas.width != width || canvas.height != height) {
+            canvas.width = width;
+            canvas.height = height;
+        }
+        else if (!this.containerReused) {
+            context.clearRect(0, 0, width, height);
+        }
+        if (layerExtent) {
+            this.clipUnrotated(context, frameState, layerExtent);
+        }
+        if (!tileSource.getInterpolate()) {
+            assign(context, IMAGE_SMOOTHING_DISABLED);
+        }
+        this.preRender(context, frameState);
+        this.renderedTiles.length = 0;
+        /** @type {Array<number>} */
+        var zs = Object.keys(tilesToDrawByZ).map(Number);
+        zs.sort(numberSafeCompareFunction);
+        var clips, clipZs, currentClip;
+        if (layerState.opacity === 1 &&
+            (!this.containerReused ||
+                tileSource.getOpaque(frameState.viewState.projection))) {
+            zs = zs.reverse();
+        }
+        else {
+            clips = [];
+            clipZs = [];
+        }
+        for (var i = zs.length - 1; i >= 0; --i) {
+            var currentZ = zs[i];
+            var currentTilePixelSize = tileSource.getTilePixelSize(currentZ, pixelRatio, projection);
+            var currentResolution = tileGrid.getResolution(currentZ);
+            var currentScale = currentResolution / tileResolution;
+            var dx_1 = currentTilePixelSize[0] * currentScale * canvasScale;
+            var dy_1 = currentTilePixelSize[1] * currentScale * canvasScale;
+            var originTileCoord = tileGrid.getTileCoordForCoordAndZ(getTopLeft(canvasExtent), currentZ);
+            var originTileExtent = tileGrid.getTileCoordExtent(originTileCoord);
+            var origin_1 = applyTransform(this.tempTransform, [
+                (tilePixelRatio * (originTileExtent[0] - canvasExtent[0])) /
+                    tileResolution,
+                (tilePixelRatio * (canvasExtent[3] - originTileExtent[3])) /
+                    tileResolution,
+            ]);
+            var tileGutter = tilePixelRatio * tileSource.getGutterForProjection(projection);
+            var tilesToDraw = tilesToDrawByZ[currentZ];
+            for (var tileCoordKey in tilesToDraw) {
+                var tile = /** @type {import("../../ImageTile.js").default} */ (tilesToDraw[tileCoordKey]);
+                var tileCoord = tile.tileCoord;
+                // Calculate integer positions and sizes so that tiles align
+                var xIndex = originTileCoord[1] - tileCoord[1];
+                var nextX = Math.round(origin_1[0] - (xIndex - 1) * dx_1);
+                var yIndex = originTileCoord[2] - tileCoord[2];
+                var nextY = Math.round(origin_1[1] - (yIndex - 1) * dy_1);
+                var x = Math.round(origin_1[0] - xIndex * dx_1);
+                var y = Math.round(origin_1[1] - yIndex * dy_1);
+                var w = nextX - x;
+                var h = nextY - y;
+                var transition = z === currentZ;
+                var inTransition = transition && tile.getAlpha(getUid(this), frameState.time) !== 1;
+                var contextSaved = false;
+                if (!inTransition) {
+                    if (clips) {
+                        // Clip mask for regions in this tile that already filled by a higher z tile
+                        currentClip = [x, y, x + w, y, x + w, y + h, x, y + h];
+                        for (var i_1 = 0, ii = clips.length; i_1 < ii; ++i_1) {
+                            if (z !== currentZ && currentZ < clipZs[i_1]) {
+                                var clip = clips[i_1];
+                                if (intersects([x, y, x + w, y + h], [clip[0], clip[3], clip[4], clip[7]])) {
+                                    if (!contextSaved) {
+                                        context.save();
+                                        contextSaved = true;
+                                    }
+                                    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 z 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();
+                                }
+                            }
+                        }
+                        clips.push(currentClip);
+                        clipZs.push(currentZ);
+                    }
+                    else {
+                        context.clearRect(x, y, w, h);
+                    }
+                }
+                this.drawTileImage(tile, frameState, x, y, w, h, tileGutter, transition);
+                if (clips && !inTransition) {
+                    if (contextSaved) {
+                        context.restore();
+                    }
+                    this.renderedTiles.unshift(tile);
+                }
+                else {
+                    this.renderedTiles.push(tile);
+                }
+                this.updateUsedTiles(frameState.usedTiles, tileSource, tile);
+            }
+        }
+        this.renderedRevision = sourceRevision;
+        this.renderedResolution = tileResolution;
+        this.extentChanged =
+            !this.renderedExtent_ || !equals(this.renderedExtent_, canvasExtent);
+        this.renderedExtent_ = canvasExtent;
+        this.renderedPixelRatio = pixelRatio;
+        this.renderedProjection = projection;
+        this.manageTilePyramid(frameState, tileSource, tileGrid, pixelRatio, projection, extent, z, tileLayer.getPreload());
+        this.scheduleExpireCache(frameState, tileSource);
+        this.postRender(context, frameState);
+        if (layerState.extent) {
+            context.restore();
+        }
+        assign(context, IMAGE_SMOOTHING_ENABLED);
+        if (canvasTransform !== canvas.style.transform) {
+            canvas.style.transform = canvasTransform;
+        }
+        return this.container;
+    };
+    /**
+     * @param {import("../../ImageTile.js").default} tile Tile.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {number} x Left of the tile.
+     * @param {number} y Top of the tile.
+     * @param {number} w Width of the tile.
+     * @param {number} h Height of the tile.
+     * @param {number} gutter Tile gutter.
+     * @param {boolean} transition Apply an alpha transition.
+     */
+    CanvasTileLayerRenderer.prototype.drawTileImage = function (tile, frameState, x, y, w, h, gutter, transition) {
+        var image = this.getTileImage(tile);
+        if (!image) {
+            return;
+        }
+        var uid = getUid(this);
+        var layerState = frameState.layerStatesArray[frameState.layerIndex];
+        var alpha = layerState.opacity *
+            (transition ? tile.getAlpha(uid, frameState.time) : 1);
+        var alphaChanged = alpha !== this.context.globalAlpha;
+        if (alphaChanged) {
+            this.context.save();
+            this.context.globalAlpha = alpha;
+        }
+        this.context.drawImage(image, gutter, gutter, image.width - 2 * gutter, image.height - 2 * gutter, x, y, w, h);
+        if (alphaChanged) {
+            this.context.restore();
+        }
+        if (alpha !== layerState.opacity) {
+            frameState.animate = true;
+        }
+        else if (transition) {
+            tile.endTransition(uid);
+        }
+    };
+    /**
+     * @return {HTMLCanvasElement} Image
+     */
+    CanvasTileLayerRenderer.prototype.getImage = function () {
+        var context = this.context;
+        return context ? context.canvas : null;
+    };
+    /**
+     * Get the image from a tile.
+     * @param {import("../../ImageTile.js").default} tile Tile.
+     * @return {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} Image.
+     * @protected
+     */
+    CanvasTileLayerRenderer.prototype.getTileImage = function (tile) {
+        return tile.getImage();
+    };
+    /**
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {import("../../source/Tile.js").default} tileSource Tile source.
+     * @protected
+     */
+    CanvasTileLayerRenderer.prototype.scheduleExpireCache = function (frameState, tileSource) {
+        if (tileSource.canExpireCache()) {
+            /**
+             * @param {import("../../source/Tile.js").default} tileSource Tile source.
+             * @param {import("../../PluggableMap.js").default} map Map.
+             * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+             */
+            var postRenderFunction = function (tileSource, map, frameState) {
+                var tileSourceKey = getUid(tileSource);
+                if (tileSourceKey in frameState.usedTiles) {
+                    tileSource.expireCache(frameState.viewState.projection, frameState.usedTiles[tileSourceKey]);
+                }
+            }.bind(null, tileSource);
+            frameState.postRenderFunctions.push(
+            /** @type {import("../../PluggableMap.js").PostRenderFunction} */ (postRenderFunction));
+        }
+    };
+    /**
+     * @param {!Object<string, !Object<string, boolean>>} usedTiles Used tiles.
+     * @param {import("../../source/Tile.js").default} tileSource Tile source.
+     * @param {import('../../Tile.js').default} tile Tile.
+     * @protected
+     */
+    CanvasTileLayerRenderer.prototype.updateUsedTiles = function (usedTiles, tileSource, tile) {
+        // FIXME should we use tilesToDrawByZ instead?
+        var tileSourceKey = getUid(tileSource);
+        if (!(tileSourceKey in usedTiles)) {
+            usedTiles[tileSourceKey] = {};
+        }
+        usedTiles[tileSourceKey][tile.getKey()] = true;
+    };
+    /**
+     * Manage tile pyramid.
+     * This function performs a number of functions related to the tiles at the
+     * current zoom and lower zoom levels:
+     * - registers idle tiles in frameState.wantedTiles so that they are not
+     *   discarded by the tile queue
+     * - enqueues missing tiles
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {import("../../source/Tile.js").default} tileSource Tile source.
+     * @param {import("../../tilegrid/TileGrid.js").default} tileGrid Tile grid.
+     * @param {number} pixelRatio Pixel ratio.
+     * @param {import("../../proj/Projection.js").default} projection Projection.
+     * @param {import("../../extent.js").Extent} extent Extent.
+     * @param {number} currentZ Current Z.
+     * @param {number} preload Load low resolution tiles up to `preload` levels.
+     * @param {function(import("../../Tile.js").default):void} [opt_tileCallback] Tile callback.
+     * @protected
+     */
+    CanvasTileLayerRenderer.prototype.manageTilePyramid = function (frameState, tileSource, tileGrid, pixelRatio, projection, extent, currentZ, preload, opt_tileCallback) {
+        var tileSourceKey = getUid(tileSource);
+        if (!(tileSourceKey in frameState.wantedTiles)) {
+            frameState.wantedTiles[tileSourceKey] = {};
+        }
+        var wantedTiles = frameState.wantedTiles[tileSourceKey];
+        var tileQueue = frameState.tileQueue;
+        var minZoom = tileGrid.getMinZoom();
+        var rotation = frameState.viewState.rotation;
+        var viewport = rotation
+            ? getRotatedViewport(frameState.viewState.center, frameState.viewState.resolution, rotation, frameState.size)
+            : undefined;
+        var tileCount = 0;
+        var tile, tileRange, tileResolution, x, y, z;
+        for (z = minZoom; z <= currentZ; ++z) {
+            tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z, tileRange);
+            tileResolution = tileGrid.getResolution(z);
+            for (x = tileRange.minX; x <= tileRange.maxX; ++x) {
+                for (y = tileRange.minY; y <= tileRange.maxY; ++y) {
+                    if (rotation &&
+                        !tileGrid.tileCoordIntersectsViewport([z, x, y], viewport)) {
+                        continue;
+                    }
+                    if (currentZ - z <= preload) {
+                        ++tileCount;
+                        tile = tileSource.getTile(z, x, y, pixelRatio, projection);
+                        if (tile.getState() == TileState.IDLE) {
+                            wantedTiles[tile.getKey()] = true;
+                            if (!tileQueue.isKeyQueued(tile.getKey())) {
+                                tileQueue.enqueue([
+                                    tile,
+                                    tileSourceKey,
+                                    tileGrid.getTileCoordCenter(tile.tileCoord),
+                                    tileResolution,
+                                ]);
+                            }
+                        }
+                        if (opt_tileCallback !== undefined) {
+                            opt_tileCallback(tile);
+                        }
+                    }
+                    else {
+                        tileSource.useTile(z, x, y, projection);
+                    }
+                }
+            }
+        }
+        tileSource.updateCacheSize(tileCount, projection);
+    };
+    return CanvasTileLayerRenderer;
+}(CanvasLayerRenderer));
+export default CanvasTileLayerRenderer;
+//# sourceMappingURL=TileLayer.js.map

node_modules/ol/renderer/canvas/VectorImageLayer.d.ts

@@ -0,0 +1,43 @@
+export default CanvasVectorImageLayerRenderer;
+/**
+ * @classdesc
+ * Canvas renderer for image layers.
+ * @api
+ */
+declare class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
+    /**
+     * @param {import("../../layer/VectorImage.js").default} layer Vector image layer.
+     */
+    constructor(layer: import("../../layer/VectorImage.js").default<any>);
+    /**
+     * @private
+     * @type {import("./VectorLayer.js").default}
+     */
+    private vectorRenderer_;
+    /**
+     * @private
+     * @type {number}
+     */
+    private layerImageRatio_;
+    /**
+     * @private
+     * @type {import("../../transform.js").Transform}
+     */
+    private coordinateToVectorPixelTransform_;
+    /**
+     * @private
+     * @type {import("../../transform.js").Transform}
+     */
+    private renderedPixelToCoordinateTransform_;
+    /**
+     */
+    preRender(): void;
+    /**
+     */
+    postRender(): void;
+    /**
+     */
+    renderDeclutter(): void;
+}
+import CanvasImageLayerRenderer from "./ImageLayer.js";
+//# sourceMappingURL=VectorImageLayer.d.ts.map

node_modules/ol/renderer/canvas/VectorImageLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorImageLayer.d.ts","sourceRoot":"","sources":["../../src/renderer/canvas/VectorImageLayer.js"],"names":[],"mappings":";AAcA;;;;GAIG;AACH;IACE;;OAEG;IACH,sEA0BC;IAvBC;;;OAGG;IACH,wBAA2D;IAE3D;;;OAGG;IACH,yBAA6C;IAE7C;;;OAGG;IACH,0CAAiD;IAEjD;;;OAGG;IACH,4CAA+C;IAuIjD;OACG;IACH,kBAAc;IAEd;OACG;IACH,mBAAe;IAEf;OACG;IACH,wBAAoB;CAoCrB"}

node_modules/ol/renderer/canvas/VectorImageLayer.js

@@ -0,0 +1,185 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+/**
+ * @module ol/renderer/canvas/VectorImageLayer
+ */
+import CanvasImageLayerRenderer from './ImageLayer.js';
+import CanvasVectorLayerRenderer from './VectorLayer.js';
+import EventType from '../../events/EventType.js';
+import ImageCanvas from '../../ImageCanvas.js';
+import ImageState from '../../ImageState.js';
+import RBush from 'rbush';
+import ViewHint from '../../ViewHint.js';
+import { apply, compose, create } from '../../transform.js';
+import { assign } from '../../obj.js';
+import { getHeight, getWidth, isEmpty, scaleFromCenter } from '../../extent.js';
+/**
+ * @classdesc
+ * Canvas renderer for image layers.
+ * @api
+ */
+var CanvasVectorImageLayerRenderer = /** @class */ (function (_super) {
+    __extends(CanvasVectorImageLayerRenderer, _super);
+    /**
+     * @param {import("../../layer/VectorImage.js").default} layer Vector image layer.
+     */
+    function CanvasVectorImageLayerRenderer(layer) {
+        var _this = _super.call(this, layer) || this;
+        /**
+         * @private
+         * @type {import("./VectorLayer.js").default}
+         */
+        _this.vectorRenderer_ = new CanvasVectorLayerRenderer(layer);
+        /**
+         * @private
+         * @type {number}
+         */
+        _this.layerImageRatio_ = layer.getImageRatio();
+        /**
+         * @private
+         * @type {import("../../transform.js").Transform}
+         */
+        _this.coordinateToVectorPixelTransform_ = create();
+        /**
+         * @private
+         * @type {import("../../transform.js").Transform}
+         */
+        _this.renderedPixelToCoordinateTransform_ = null;
+        return _this;
+    }
+    /**
+     * Clean up.
+     */
+    CanvasVectorImageLayerRenderer.prototype.disposeInternal = function () {
+        this.vectorRenderer_.dispose();
+        _super.prototype.disposeInternal.call(this);
+    };
+    /**
+     * Asynchronous layer level hit detection.
+     * @param {import("../../pixel.js").Pixel} pixel Pixel.
+     * @return {Promise<Array<import("../../Feature").default>>} Promise that resolves with an array of features.
+     */
+    CanvasVectorImageLayerRenderer.prototype.getFeatures = function (pixel) {
+        if (!this.vectorRenderer_) {
+            return new Promise(function (resolve) { return resolve([]); });
+        }
+        var vectorPixel = apply(this.coordinateToVectorPixelTransform_, apply(this.renderedPixelToCoordinateTransform_, pixel.slice()));
+        return this.vectorRenderer_.getFeatures(vectorPixel);
+    };
+    /**
+     * Perform action necessary to get the layer rendered after new fonts have loaded
+     */
+    CanvasVectorImageLayerRenderer.prototype.handleFontsChanged = function () {
+        this.vectorRenderer_.handleFontsChanged();
+    };
+    /**
+     * Determine whether render should be called.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @return {boolean} Layer is ready to be rendered.
+     */
+    CanvasVectorImageLayerRenderer.prototype.prepareFrame = function (frameState) {
+        var pixelRatio = frameState.pixelRatio;
+        var viewState = frameState.viewState;
+        var viewResolution = viewState.resolution;
+        var hints = frameState.viewHints;
+        var vectorRenderer = this.vectorRenderer_;
+        var renderedExtent = frameState.extent;
+        if (this.layerImageRatio_ !== 1) {
+            renderedExtent = renderedExtent.slice(0);
+            scaleFromCenter(renderedExtent, this.layerImageRatio_);
+        }
+        var width = getWidth(renderedExtent) / viewResolution;
+        var height = getHeight(renderedExtent) / viewResolution;
+        if (!hints[ViewHint.ANIMATING] &&
+            !hints[ViewHint.INTERACTING] &&
+            !isEmpty(renderedExtent)) {
+            vectorRenderer.useContainer(null, null);
+            var context = vectorRenderer.context;
+            var layerState = frameState.layerStatesArray[frameState.layerIndex];
+            context.globalAlpha = layerState.opacity;
+            var imageLayerState = assign({}, layerState, { opacity: 1 });
+            var imageFrameState_1 = 
+            /** @type {import("../../PluggableMap.js").FrameState} */ (assign({}, frameState, {
+                declutterTree: new RBush(9),
+                extent: renderedExtent,
+                size: [width, height],
+                viewState: /** @type {import("../../View.js").State} */ (assign({}, frameState.viewState, {
+                    rotation: 0,
+                })),
+                layerStatesArray: [imageLayerState],
+                layerIndex: 0,
+            }));
+            var emptyImage_1 = true;
+            var image_1 = new ImageCanvas(renderedExtent, viewResolution, pixelRatio, context.canvas, function (callback) {
+                if (vectorRenderer.prepareFrame(imageFrameState_1) &&
+                    vectorRenderer.replayGroupChanged) {
+                    vectorRenderer.clipping = false;
+                    if (vectorRenderer.renderFrame(imageFrameState_1, null)) {
+                        vectorRenderer.renderDeclutter(imageFrameState_1);
+                        emptyImage_1 = false;
+                    }
+                    callback();
+                }
+            });
+            image_1.addEventListener(EventType.CHANGE, function () {
+                if (image_1.getState() !== ImageState.LOADED) {
+                    return;
+                }
+                this.image_ = emptyImage_1 ? null : image_1;
+                var imageResolution = image_1.getResolution();
+                var imagePixelRatio = image_1.getPixelRatio();
+                var renderedResolution = (imageResolution * pixelRatio) / imagePixelRatio;
+                this.renderedResolution = renderedResolution;
+                this.coordinateToVectorPixelTransform_ = compose(this.coordinateToVectorPixelTransform_, width / 2, height / 2, 1 / renderedResolution, -1 / renderedResolution, 0, -viewState.center[0], -viewState.center[1]);
+            }.bind(this));
+            image_1.load();
+        }
+        if (this.image_) {
+            this.renderedPixelToCoordinateTransform_ =
+                frameState.pixelToCoordinateTransform.slice();
+        }
+        return !!this.image_;
+    };
+    /**
+     */
+    CanvasVectorImageLayerRenderer.prototype.preRender = function () { };
+    /**
+     */
+    CanvasVectorImageLayerRenderer.prototype.postRender = function () { };
+    /**
+     */
+    CanvasVectorImageLayerRenderer.prototype.renderDeclutter = function () { };
+    /**
+     * @param {import("../../coordinate.js").Coordinate} coordinate Coordinate.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {number} hitTolerance Hit tolerance in pixels.
+     * @param {import("../vector.js").FeatureCallback<T>} callback Feature callback.
+     * @param {Array<import("../Map.js").HitMatch<T>>} matches The hit detected matches with tolerance.
+     * @return {T|undefined} Callback result.
+     * @template T
+     */
+    CanvasVectorImageLayerRenderer.prototype.forEachFeatureAtCoordinate = function (coordinate, frameState, hitTolerance, callback, matches) {
+        if (this.vectorRenderer_) {
+            return this.vectorRenderer_.forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback, matches);
+        }
+        else {
+            return _super.prototype.forEachFeatureAtCoordinate.call(this, coordinate, frameState, hitTolerance, callback, matches);
+        }
+    };
+    return CanvasVectorImageLayerRenderer;
+}(CanvasImageLayerRenderer));
+export default CanvasVectorImageLayerRenderer;
+//# sourceMappingURL=VectorImageLayer.js.map

node_modules/ol/renderer/canvas/VectorImageLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorImageLayer.js","sourceRoot":"","sources":["../../src/renderer/canvas/VectorImageLayer.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;GAEG;AACH,OAAO,wBAAwB,MAAM,iBAAiB,CAAC;AACvD,OAAO,yBAAyB,MAAM,kBAAkB,CAAC;AACzD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAC/C,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAE9E;;;;GAIG;AACH;IAA6C,kDAAwB;IACnE;;OAEG;IACH,wCAAY,KAAK;QAAjB,YACE,kBAAM,KAAK,CAAC,SAyBb;QAvBC;;;WAGG;QACH,KAAI,CAAC,eAAe,GAAG,IAAI,yBAAyB,CAAC,KAAK,CAAC,CAAC;QAE5D;;;WAGG;QACH,KAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC;QAE9C;;;WAGG;QACH,KAAI,CAAC,iCAAiC,GAAG,MAAM,EAAE,CAAC;QAElD;;;WAGG;QACH,KAAI,CAAC,mCAAmC,GAAG,IAAI,CAAC;;IAClD,CAAC;IAED;;OAEG;IACH,wDAAe,GAAf;QACE,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC;QAC/B,iBAAM,eAAe,WAAE,CAAC;IAC1B,CAAC;IAED;;;;OAIG;IACH,oDAAW,GAAX,UAAY,KAAK;QACf,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB,OAAO,IAAI,OAAO,CAAC,UAAC,OAAO,IAAK,OAAA,OAAO,CAAC,EAAE,CAAC,EAAX,CAAW,CAAC,CAAC;SAC9C;QACD,IAAM,WAAW,GAAG,KAAK,CACvB,IAAI,CAAC,iCAAiC,EACtC,KAAK,CAAC,IAAI,CAAC,mCAAmC,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAC/D,CAAC;QACF,OAAO,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACvD,CAAC;IAED;;OAEG;IACH,2DAAkB,GAAlB;QACE,IAAI,CAAC,eAAe,CAAC,kBAAkB,EAAE,CAAC;IAC5C,CAAC;IAED;;;;OAIG;IACH,qDAAY,GAAZ,UAAa,UAAU;QACrB,IAAM,UAAU,GAAG,UAAU,CAAC,UAAU,CAAC;QACzC,IAAM,SAAS,GAAG,UAAU,CAAC,SAAS,CAAC;QACvC,IAAM,cAAc,GAAG,SAAS,CAAC,UAAU,CAAC;QAE5C,IAAM,KAAK,GAAG,UAAU,CAAC,SAAS,CAAC;QACnC,IAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC;QAC5C,IAAI,cAAc,GAAG,UAAU,CAAC,MAAM,CAAC;QACvC,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,EAAE;YAC/B,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACzC,eAAe,CAAC,cAAc,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;SACxD;QACD,IAAM,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,cAAc,CAAC;QACxD,IAAM,MAAM,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG,cAAc,CAAC;QAE1D,IACE,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC;YAC1B,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC;YAC5B,CAAC,OAAO,CAAC,cAAc,CAAC,EACxB;YACA,cAAc,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YACxC,IAAM,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC;YACvC,IAAM,UAAU,GAAG,UAAU,CAAC,gBAAgB,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;YACtE,OAAO,CAAC,WAAW,GAAG,UAAU,CAAC,OAAO,CAAC;YACzC,IAAM,eAAe,GAAG,MAAM,CAAC,EAAE,EAAE,UAAU,EAAE,EAAC,OAAO,EAAE,CAAC,EAAC,CAAC,CAAC;YAC7D,IAAM,iBAAe;YACnB,yDAAyD,CAAC,CACxD,MAAM,CAAC,EAAE,EAAE,UAAU,EAAE;gBACrB,aAAa,EAAE,IAAI,KAAK,CAAC,CAAC,CAAC;gBAC3B,MAAM,EAAE,cAAc;gBACtB,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC;gBACrB,SAAS,EAAE,4CAA4C,CAAC,CACtD,MAAM,CAAC,EAAE,EAAE,UAAU,CAAC,SAAS,EAAE;oBAC/B,QAAQ,EAAE,CAAC;iBACZ,CAAC,CACH;gBACD,gBAAgB,EAAE,CAAC,eAAe,CAAC;gBACnC,UAAU,EAAE,CAAC;aACd,CAAC,CACH,CAAC;YACJ,IAAI,YAAU,GAAG,IAAI,CAAC;YACtB,IAAM,OAAK,GAAG,IAAI,WAAW,CAC3B,cAAc,EACd,cAAc,EACd,UAAU,EACV,OAAO,CAAC,MAAM,EACd,UAAU,QAAQ;gBAChB,IACE,cAAc,CAAC,YAAY,CAAC,iBAAe,CAAC;oBAC5C,cAAc,CAAC,kBAAkB,EACjC;oBACA,cAAc,CAAC,QAAQ,GAAG,KAAK,CAAC;oBAChC,IAAI,cAAc,CAAC,WAAW,CAAC,iBAAe,EAAE,IAAI,CAAC,EAAE;wBACrD,cAAc,CAAC,eAAe,CAAC,iBAAe,CAAC,CAAC;wBAChD,YAAU,GAAG,KAAK,CAAC;qBACpB;oBACD,QAAQ,EAAE,CAAC;iBACZ;YACH,CAAC,CACF,CAAC;YAEF,OAAK,CAAC,gBAAgB,CACpB,SAAS,CAAC,MAAM,EAChB;gBACE,IAAI,OAAK,CAAC,QAAQ,EAAE,KAAK,UAAU,CAAC,MAAM,EAAE;oBAC1C,OAAO;iBACR;gBACD,IAAI,CAAC,MAAM,GAAG,YAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAK,CAAC;gBACxC,IAAM,eAAe,GAAG,OAAK,CAAC,aAAa,EAAE,CAAC;gBAC9C,IAAM,eAAe,GAAG,OAAK,CAAC,aAAa,EAAE,CAAC;gBAC9C,IAAM,kBAAkB,GACtB,CAAC,eAAe,GAAG,UAAU,CAAC,GAAG,eAAe,CAAC;gBACnD,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;gBAC7C,IAAI,CAAC,iCAAiC,GAAG,OAAO,CAC9C,IAAI,CAAC,iCAAiC,EACtC,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,CAAC,EACV,CAAC,GAAG,kBAAkB,EACtB,CAAC,CAAC,GAAG,kBAAkB,EACvB,CAAC,EACD,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EACpB,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CACrB,CAAC;YACJ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CACb,CAAC;YACF,OAAK,CAAC,IAAI,EAAE,CAAC;SACd;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,mCAAmC;gBACtC,UAAU,CAAC,0BAA0B,CAAC,KAAK,EAAE,CAAC;SACjD;QAED,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IAED;OACG;IACH,kDAAS,GAAT,cAAa,CAAC;IAEd;OACG;IACH,mDAAU,GAAV,cAAc,CAAC;IAEf;OACG;IACH,wDAAe,GAAf,cAAmB,CAAC;IAEpB;;;;;;;;OAQG;IACH,mEAA0B,GAA1B,UACE,UAAU,EACV,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,OAAO;QAEP,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,OAAO,IAAI,CAAC,eAAe,CAAC,0BAA0B,CACpD,UAAU,EACV,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,OAAO,CACR,CAAC;SACH;aAAM;YACL,OAAO,iBAAM,0BAA0B,YACrC,UAAU,EACV,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,OAAO,CACR,CAAC;SACH;IACH,CAAC;IACH,qCAAC;AAAD,CAAC,AAlND,CAA6C,wBAAwB,GAkNpE;AAED,eAAe,8BAA8B,CAAC"}

node_modules/ol/renderer/canvas/VectorLayer.d.ts

@@ -0,0 +1,124 @@
+export default CanvasVectorLayerRenderer;
+/**
+ * @classdesc
+ * Canvas renderer for vector layers.
+ * @api
+ */
+declare class CanvasVectorLayerRenderer extends CanvasLayerRenderer<any> {
+    /**
+     * @param {import("../../layer/BaseVector.js").default} vectorLayer Vector layer.
+     */
+    constructor(vectorLayer: import("../../layer/BaseVector.js").default<any, any>);
+    /** @private */
+    private boundHandleStyleImageChange_;
+    /**
+     * @type {boolean}
+     */
+    animatingOrInteracting_: boolean;
+    /**
+     * @type {ImageData}
+     */
+    hitDetectionImageData_: ImageData;
+    /**
+     * @type {Array<import("../../Feature.js").default>}
+     */
+    renderedFeatures_: Array<import("../../Feature.js").default>;
+    /**
+     * @private
+     * @type {number}
+     */
+    private renderedRevision_;
+    /**
+     * @private
+     * @type {number}
+     */
+    private renderedResolution_;
+    /**
+     * @private
+     * @type {import("../../extent.js").Extent}
+     */
+    private renderedExtent_;
+    /**
+     * @private
+     * @type {import("../../extent.js").Extent}
+     */
+    private wrappedRenderedExtent_;
+    /**
+     * @private
+     * @type {number}
+     */
+    private renderedRotation_;
+    /**
+     * @private
+     * @type {import("../../coordinate").Coordinate}
+     */
+    private renderedCenter_;
+    /**
+     * @private
+     * @type {import("../../proj/Projection").default}
+     */
+    private renderedProjection_;
+    /**
+     * @private
+     * @type {function(import("../../Feature.js").default, import("../../Feature.js").default): number|null}
+     */
+    private renderedRenderOrder_;
+    /**
+     * @private
+     * @type {import("../../render/canvas/ExecutorGroup").default}
+     */
+    private replayGroup_;
+    /**
+     * A new replay group had to be created by `prepareFrame()`
+     * @type {boolean}
+     */
+    replayGroupChanged: boolean;
+    /**
+     * Clipping to be performed by `renderFrame()`
+     * @type {boolean}
+     */
+    clipping: boolean;
+    /**
+     * @private
+     * @type {CanvasRenderingContext2D}
+     */
+    private compositionContext_;
+    /**
+     * @private
+     * @type {number}
+     */
+    private opacity_;
+    /**
+     * @param {ExecutorGroup} executorGroup Executor group.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {import("rbush").default} [opt_declutterTree] Declutter tree.
+     */
+    renderWorlds(executorGroup: ExecutorGroup, frameState: import("../../PluggableMap.js").FrameState, opt_declutterTree?: any): void;
+    setupCompositionContext_(): void;
+    releaseCompositionContext_(): void;
+    /**
+     * Render declutter items for this layer
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     */
+    renderDeclutter(frameState: import("../../PluggableMap.js").FrameState): void;
+    /**
+     * Handle changes in image style state.
+     * @param {import("../../events/Event.js").default} event Image style change event.
+     * @private
+     */
+    private handleStyleImageChange_;
+    /**
+     * @param {import("../../Feature.js").default} feature Feature.
+     * @param {number} squaredTolerance Squared render 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} builderGroup Builder group.
+     * @param {import("../../proj.js").TransformFunction} [opt_transform] Transform from user to view projection.
+     * @param {import("../../render/canvas/BuilderGroup.js").default} [opt_declutterBuilderGroup] Builder for decluttering.
+     * @return {boolean} `true` if an image is loading.
+     */
+    renderFeature(feature: import("../../Feature.js").default, squaredTolerance: number, styles: import("../../style/Style.js").default | Array<import("../../style/Style.js").default>, builderGroup: import("../../render/canvas/BuilderGroup.js").default, opt_transform?: import("../../proj.js").TransformFunction | undefined, opt_declutterBuilderGroup?: CanvasBuilderGroup | undefined): boolean;
+}
+import CanvasLayerRenderer from "./Layer.js";
+import ExecutorGroup from "../../render/canvas/ExecutorGroup.js";
+import CanvasBuilderGroup from "../../render/canvas/BuilderGroup.js";
+//# sourceMappingURL=VectorLayer.d.ts.map

node_modules/ol/renderer/canvas/VectorLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorLayer.d.ts","sourceRoot":"","sources":["../../src/renderer/canvas/VectorLayer.js"],"names":[],"mappings":";AA4CA;;;;GAIG;AACH;IACE;;OAEG;IACH,gFAuGC;IApGC,eAAe;IACf,qCAA2E;IAE3E;;OAEG;IACH,yBAFU,OAAO,CAEW;IAE5B;;OAEG;IACH,wBAFU,SAAS,CAEe;IAElC;;OAEG;IACH,mBAFU,MAAM,OAAO,kBAAkB,EAAE,OAAO,CAAC,CAEtB;IAE7B;;;OAGG;IACH,0BAA2B;IAE3B;;;OAGG;IACH,4BAA8B;IAE9B;;;OAGG;IACH,wBAAoC;IAEpC;;;OAGG;IACH,+BAA2C;IAE3C;;;OAGG;IACH,0BAAsB;IAEtB;;;OAGG;IACH,wBAA2B;IAE3B;;;OAGG;IACH,4BAA+B;IAE/B;;;OAGG;IACH,6BAAgC;IAEhC;;;OAGG;IACH,qBAAwB;IAExB;;;OAGG;IACH,oBAFU,OAAO,CAEa;IAO9B;;;OAGG;IACH,UAFU,OAAO,CAEG;IAEpB;;;OAGG;IACH,4BAA+B;IAE/B;;;OAGG;IACH,iBAAiB;IAGnB;;;;OAIG;IACH,4BAJW,aAAa,cACb,OAAO,uBAAuB,EAAE,UAAU,iCAiDpD;IAED,iCAWC;IAED,mCAUC;IAED;;;OAGG;IACH,4BAFW,OAAO,uBAAuB,EAAE,UAAU,QAYpD;IAmRD;;;;OAIG;IACH,gCAEC;IA0ND;;;;;;;;OAQG;IACH,uBARW,OAAO,kBAAkB,EAAE,OAAO,oBAClC,MAAM,UACN,OAAO,sBAAsB,EAAE,OAAO,GAAC,MAAM,OAAO,sBAAsB,EAAE,OAAO,CAAC,gBACpF,OAAO,qCAAqC,EAAE,OAAO,sIAGpD,OAAO,CAuClB;CACF"}

node_modules/ol/renderer/canvas/VectorLayer.js

@@ -0,0 +1,573 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+/**
+ * @module ol/renderer/canvas/VectorLayer
+ */
+import CanvasBuilderGroup from '../../render/canvas/BuilderGroup.js';
+import CanvasLayerRenderer, { canvasPool } from './Layer.js';
+import ExecutorGroup from '../../render/canvas/ExecutorGroup.js';
+import ViewHint from '../../ViewHint.js';
+import { HIT_DETECT_RESOLUTION, createHitDetectionImageData, hitDetect, } from '../../render/canvas/hitdetect.js';
+import { apply, makeInverse, makeScale, toString as transformToString, } from '../../transform.js';
+import { buffer, containsExtent, createEmpty, getWidth, intersects as intersectsExtent, wrapX as wrapExtentX, } from '../../extent.js';
+import { createCanvasContext2D, releaseCanvas } from '../../dom.js';
+import { defaultOrder as defaultRenderOrder, getTolerance as getRenderTolerance, getSquaredTolerance as getSquaredRenderTolerance, renderFeature, } from '../vector.js';
+import { equals } from '../../array.js';
+import { fromUserExtent, getTransformFromProjections, getUserProjection, toUserExtent, toUserResolution, } from '../../proj.js';
+import { getUid } from '../../util.js';
+import { wrapX as wrapCoordinateX } from '../../coordinate.js';
+/**
+ * @classdesc
+ * Canvas renderer for vector layers.
+ * @api
+ */
+var CanvasVectorLayerRenderer = /** @class */ (function (_super) {
+    __extends(CanvasVectorLayerRenderer, _super);
+    /**
+     * @param {import("../../layer/BaseVector.js").default} vectorLayer Vector layer.
+     */
+    function CanvasVectorLayerRenderer(vectorLayer) {
+        var _this = _super.call(this, vectorLayer) || this;
+        /** @private */
+        _this.boundHandleStyleImageChange_ = _this.handleStyleImageChange_.bind(_this);
+        /**
+         * @type {boolean}
+         */
+        _this.animatingOrInteracting_;
+        /**
+         * @type {ImageData}
+         */
+        _this.hitDetectionImageData_ = null;
+        /**
+         * @type {Array<import("../../Feature.js").default>}
+         */
+        _this.renderedFeatures_ = null;
+        /**
+         * @private
+         * @type {number}
+         */
+        _this.renderedRevision_ = -1;
+        /**
+         * @private
+         * @type {number}
+         */
+        _this.renderedResolution_ = NaN;
+        /**
+         * @private
+         * @type {import("../../extent.js").Extent}
+         */
+        _this.renderedExtent_ = createEmpty();
+        /**
+         * @private
+         * @type {import("../../extent.js").Extent}
+         */
+        _this.wrappedRenderedExtent_ = createEmpty();
+        /**
+         * @private
+         * @type {number}
+         */
+        _this.renderedRotation_;
+        /**
+         * @private
+         * @type {import("../../coordinate").Coordinate}
+         */
+        _this.renderedCenter_ = null;
+        /**
+         * @private
+         * @type {import("../../proj/Projection").default}
+         */
+        _this.renderedProjection_ = null;
+        /**
+         * @private
+         * @type {function(import("../../Feature.js").default, import("../../Feature.js").default): number|null}
+         */
+        _this.renderedRenderOrder_ = null;
+        /**
+         * @private
+         * @type {import("../../render/canvas/ExecutorGroup").default}
+         */
+        _this.replayGroup_ = null;
+        /**
+         * A new replay group had to be created by `prepareFrame()`
+         * @type {boolean}
+         */
+        _this.replayGroupChanged = true;
+        /**
+         * @type {import("../../render/canvas/ExecutorGroup").default}
+         */
+        _this.declutterExecutorGroup = null;
+        /**
+         * Clipping to be performed by `renderFrame()`
+         * @type {boolean}
+         */
+        _this.clipping = true;
+        /**
+         * @private
+         * @type {CanvasRenderingContext2D}
+         */
+        _this.compositionContext_ = null;
+        /**
+         * @private
+         * @type {number}
+         */
+        _this.opacity_ = 1;
+        return _this;
+    }
+    /**
+     * @param {ExecutorGroup} executorGroup Executor group.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {import("rbush").default} [opt_declutterTree] Declutter tree.
+     */
+    CanvasVectorLayerRenderer.prototype.renderWorlds = function (executorGroup, frameState, opt_declutterTree) {
+        var extent = frameState.extent;
+        var viewState = frameState.viewState;
+        var center = viewState.center;
+        var resolution = viewState.resolution;
+        var projection = viewState.projection;
+        var rotation = viewState.rotation;
+        var projectionExtent = projection.getExtent();
+        var vectorSource = this.getLayer().getSource();
+        var pixelRatio = frameState.pixelRatio;
+        var viewHints = frameState.viewHints;
+        var snapToPixel = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
+        var context = this.compositionContext_;
+        var width = Math.round(frameState.size[0] * pixelRatio);
+        var height = Math.round(frameState.size[1] * pixelRatio);
+        var multiWorld = vectorSource.getWrapX() && projection.canWrapX();
+        var worldWidth = multiWorld ? getWidth(projectionExtent) : null;
+        var endWorld = multiWorld
+            ? Math.ceil((extent[2] - projectionExtent[2]) / worldWidth) + 1
+            : 1;
+        var world = multiWorld
+            ? Math.floor((extent[0] - projectionExtent[0]) / worldWidth)
+            : 0;
+        do {
+            var transform = this.getRenderTransform(center, resolution, rotation, pixelRatio, width, height, world * worldWidth);
+            executorGroup.execute(context, 1, transform, rotation, snapToPixel, undefined, opt_declutterTree);
+        } while (++world < endWorld);
+    };
+    CanvasVectorLayerRenderer.prototype.setupCompositionContext_ = function () {
+        if (this.opacity_ !== 1) {
+            var compositionContext = createCanvasContext2D(this.context.canvas.width, this.context.canvas.height, canvasPool);
+            this.compositionContext_ = compositionContext;
+        }
+        else {
+            this.compositionContext_ = this.context;
+        }
+    };
+    CanvasVectorLayerRenderer.prototype.releaseCompositionContext_ = function () {
+        if (this.opacity_ !== 1) {
+            var alpha = this.context.globalAlpha;
+            this.context.globalAlpha = this.opacity_;
+            this.context.drawImage(this.compositionContext_.canvas, 0, 0);
+            this.context.globalAlpha = alpha;
+            releaseCanvas(this.compositionContext_);
+            canvasPool.push(this.compositionContext_.canvas);
+            this.compositionContext_ = null;
+        }
+    };
+    /**
+     * Render declutter items for this layer
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     */
+    CanvasVectorLayerRenderer.prototype.renderDeclutter = function (frameState) {
+        if (this.declutterExecutorGroup) {
+            this.setupCompositionContext_();
+            this.renderWorlds(this.declutterExecutorGroup, frameState, frameState.declutterTree);
+            this.releaseCompositionContext_();
+        }
+    };
+    /**
+     * Render the layer.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {HTMLElement} target Target that may be used to render content to.
+     * @return {HTMLElement} The rendered element.
+     */
+    CanvasVectorLayerRenderer.prototype.renderFrame = function (frameState, target) {
+        var pixelRatio = frameState.pixelRatio;
+        var layerState = frameState.layerStatesArray[frameState.layerIndex];
+        // set forward and inverse pixel transforms
+        makeScale(this.pixelTransform, 1 / pixelRatio, 1 / pixelRatio);
+        makeInverse(this.inversePixelTransform, this.pixelTransform);
+        var canvasTransform = transformToString(this.pixelTransform);
+        this.useContainer(target, canvasTransform, this.getBackground(frameState));
+        var context = this.context;
+        var canvas = context.canvas;
+        var replayGroup = this.replayGroup_;
+        var declutterExecutorGroup = this.declutterExecutorGroup;
+        if ((!replayGroup || replayGroup.isEmpty()) &&
+            (!declutterExecutorGroup || declutterExecutorGroup.isEmpty())) {
+            return null;
+        }
+        // resize and clear
+        var width = Math.round(frameState.size[0] * pixelRatio);
+        var height = Math.round(frameState.size[1] * pixelRatio);
+        if (canvas.width != width || canvas.height != height) {
+            canvas.width = width;
+            canvas.height = height;
+            if (canvas.style.transform !== canvasTransform) {
+                canvas.style.transform = canvasTransform;
+            }
+        }
+        else if (!this.containerReused) {
+            context.clearRect(0, 0, width, height);
+        }
+        this.preRender(context, frameState);
+        var viewState = frameState.viewState;
+        var projection = viewState.projection;
+        this.opacity_ = layerState.opacity;
+        this.setupCompositionContext_();
+        // clipped rendering if layer extent is set
+        var clipped = false;
+        var render = true;
+        if (layerState.extent && this.clipping) {
+            var layerExtent = fromUserExtent(layerState.extent, projection);
+            render = intersectsExtent(layerExtent, frameState.extent);
+            clipped = render && !containsExtent(layerExtent, frameState.extent);
+            if (clipped) {
+                this.clipUnrotated(this.compositionContext_, frameState, layerExtent);
+            }
+        }
+        if (render) {
+            this.renderWorlds(replayGroup, frameState);
+        }
+        if (clipped) {
+            this.compositionContext_.restore();
+        }
+        this.releaseCompositionContext_();
+        this.postRender(context, frameState);
+        if (this.renderedRotation_ !== viewState.rotation) {
+            this.renderedRotation_ = viewState.rotation;
+            this.hitDetectionImageData_ = null;
+        }
+        return this.container;
+    };
+    /**
+     * Asynchronous layer level hit detection.
+     * @param {import("../../pixel.js").Pixel} pixel Pixel.
+     * @return {Promise<Array<import("../../Feature").default>>} Promise that resolves with an array of features.
+     */
+    CanvasVectorLayerRenderer.prototype.getFeatures = function (pixel) {
+        return new Promise(
+        /**
+         * @param {function(Array<import("../../Feature").default|import("../../render/Feature").default>): void} resolve Resolver function.
+         * @this {CanvasVectorLayerRenderer}
+         */
+        function (resolve) {
+            if (!this.hitDetectionImageData_ && !this.animatingOrInteracting_) {
+                var size = [this.context.canvas.width, this.context.canvas.height];
+                apply(this.pixelTransform, size);
+                var center = this.renderedCenter_;
+                var resolution = this.renderedResolution_;
+                var rotation = this.renderedRotation_;
+                var projection = this.renderedProjection_;
+                var extent = this.wrappedRenderedExtent_;
+                var layer = this.getLayer();
+                var transforms = [];
+                var width = size[0] * HIT_DETECT_RESOLUTION;
+                var height = size[1] * HIT_DETECT_RESOLUTION;
+                transforms.push(this.getRenderTransform(center, resolution, rotation, HIT_DETECT_RESOLUTION, width, height, 0).slice());
+                var source = layer.getSource();
+                var projectionExtent = projection.getExtent();
+                if (source.getWrapX() &&
+                    projection.canWrapX() &&
+                    !containsExtent(projectionExtent, extent)) {
+                    var startX = extent[0];
+                    var worldWidth = getWidth(projectionExtent);
+                    var world = 0;
+                    var offsetX = void 0;
+                    while (startX < projectionExtent[0]) {
+                        --world;
+                        offsetX = worldWidth * world;
+                        transforms.push(this.getRenderTransform(center, resolution, rotation, HIT_DETECT_RESOLUTION, width, height, offsetX).slice());
+                        startX += worldWidth;
+                    }
+                    world = 0;
+                    startX = extent[2];
+                    while (startX > projectionExtent[2]) {
+                        ++world;
+                        offsetX = worldWidth * world;
+                        transforms.push(this.getRenderTransform(center, resolution, rotation, HIT_DETECT_RESOLUTION, width, height, offsetX).slice());
+                        startX -= worldWidth;
+                    }
+                }
+                this.hitDetectionImageData_ = createHitDetectionImageData(size, transforms, this.renderedFeatures_, layer.getStyleFunction(), extent, resolution, rotation);
+            }
+            resolve(hitDetect(pixel, this.renderedFeatures_, this.hitDetectionImageData_));
+        }.bind(this));
+    };
+    /**
+     * @param {import("../../coordinate.js").Coordinate} coordinate Coordinate.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {number} hitTolerance Hit tolerance in pixels.
+     * @param {import("../vector.js").FeatureCallback<T>} callback Feature callback.
+     * @param {Array<import("../Map.js").HitMatch<T>>} matches The hit detected matches with tolerance.
+     * @return {T|undefined} Callback result.
+     * @template T
+     */
+    CanvasVectorLayerRenderer.prototype.forEachFeatureAtCoordinate = function (coordinate, frameState, hitTolerance, callback, matches) {
+        var _this = this;
+        if (!this.replayGroup_) {
+            return undefined;
+        }
+        var resolution = frameState.viewState.resolution;
+        var rotation = frameState.viewState.rotation;
+        var layer = this.getLayer();
+        /** @type {!Object<string, import("../Map.js").HitMatch<T>|true>} */
+        var features = {};
+        /**
+         * @param {import("../../Feature.js").FeatureLike} feature Feature.
+         * @param {import("../../geom/SimpleGeometry.js").default} geometry Geometry.
+         * @param {number} distanceSq The squared distance to the click position
+         * @return {T|undefined} Callback result.
+         */
+        var featureCallback = function (feature, geometry, distanceSq) {
+            var key = getUid(feature);
+            var match = features[key];
+            if (!match) {
+                if (distanceSq === 0) {
+                    features[key] = true;
+                    return callback(feature, layer, geometry);
+                }
+                matches.push((features[key] = {
+                    feature: feature,
+                    layer: layer,
+                    geometry: geometry,
+                    distanceSq: distanceSq,
+                    callback: callback,
+                }));
+            }
+            else if (match !== true && distanceSq < match.distanceSq) {
+                if (distanceSq === 0) {
+                    features[key] = true;
+                    matches.splice(matches.lastIndexOf(match), 1);
+                    return callback(feature, layer, geometry);
+                }
+                match.geometry = geometry;
+                match.distanceSq = distanceSq;
+            }
+            return undefined;
+        };
+        var result;
+        var executorGroups = [this.replayGroup_];
+        if (this.declutterExecutorGroup) {
+            executorGroups.push(this.declutterExecutorGroup);
+        }
+        executorGroups.some(function (executorGroup) {
+            return (result = executorGroup.forEachFeatureAtCoordinate(coordinate, resolution, rotation, hitTolerance, featureCallback, executorGroup === _this.declutterExecutorGroup &&
+                frameState.declutterTree
+                ? frameState.declutterTree.all().map(function (item) { return item.value; })
+                : null));
+        });
+        return result;
+    };
+    /**
+     * Perform action necessary to get the layer rendered after new fonts have loaded
+     */
+    CanvasVectorLayerRenderer.prototype.handleFontsChanged = function () {
+        var layer = this.getLayer();
+        if (layer.getVisible() && this.replayGroup_) {
+            layer.changed();
+        }
+    };
+    /**
+     * Handle changes in image style state.
+     * @param {import("../../events/Event.js").default} event Image style change event.
+     * @private
+     */
+    CanvasVectorLayerRenderer.prototype.handleStyleImageChange_ = function (event) {
+        this.renderIfReadyAndVisible();
+    };
+    /**
+     * Determine whether render should be called.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @return {boolean} Layer is ready to be rendered.
+     */
+    CanvasVectorLayerRenderer.prototype.prepareFrame = function (frameState) {
+        var vectorLayer = this.getLayer();
+        var vectorSource = vectorLayer.getSource();
+        if (!vectorSource) {
+            return false;
+        }
+        var animating = frameState.viewHints[ViewHint.ANIMATING];
+        var interacting = frameState.viewHints[ViewHint.INTERACTING];
+        var updateWhileAnimating = vectorLayer.getUpdateWhileAnimating();
+        var updateWhileInteracting = vectorLayer.getUpdateWhileInteracting();
+        if ((this.ready && !updateWhileAnimating && animating) ||
+            (!updateWhileInteracting && interacting)) {
+            this.animatingOrInteracting_ = true;
+            return true;
+        }
+        this.animatingOrInteracting_ = false;
+        var frameStateExtent = frameState.extent;
+        var viewState = frameState.viewState;
+        var projection = viewState.projection;
+        var resolution = viewState.resolution;
+        var pixelRatio = frameState.pixelRatio;
+        var vectorLayerRevision = vectorLayer.getRevision();
+        var vectorLayerRenderBuffer = vectorLayer.getRenderBuffer();
+        var vectorLayerRenderOrder = vectorLayer.getRenderOrder();
+        if (vectorLayerRenderOrder === undefined) {
+            vectorLayerRenderOrder = defaultRenderOrder;
+        }
+        var center = viewState.center.slice();
+        var extent = buffer(frameStateExtent, vectorLayerRenderBuffer * resolution);
+        var renderedExtent = extent.slice();
+        var loadExtents = [extent.slice()];
+        var projectionExtent = projection.getExtent();
+        if (vectorSource.getWrapX() &&
+            projection.canWrapX() &&
+            !containsExtent(projectionExtent, frameState.extent)) {
+            // For the replay group, we need an extent that intersects the real world
+            // (-180° to +180°). To support geometries in a coordinate range from -540°
+            // to +540°, we add at least 1 world width on each side of the projection
+            // extent. If the viewport is wider than the world, we need to add half of
+            // the viewport width to make sure we cover the whole viewport.
+            var worldWidth = getWidth(projectionExtent);
+            var gutter = Math.max(getWidth(extent) / 2, worldWidth);
+            extent[0] = projectionExtent[0] - gutter;
+            extent[2] = projectionExtent[2] + gutter;
+            wrapCoordinateX(center, projection);
+            var loadExtent = wrapExtentX(loadExtents[0], projection);
+            // If the extent crosses the date line, we load data for both edges of the worlds
+            if (loadExtent[0] < projectionExtent[0] &&
+                loadExtent[2] < projectionExtent[2]) {
+                loadExtents.push([
+                    loadExtent[0] + worldWidth,
+                    loadExtent[1],
+                    loadExtent[2] + worldWidth,
+                    loadExtent[3],
+                ]);
+            }
+            else if (loadExtent[0] > projectionExtent[0] &&
+                loadExtent[2] > projectionExtent[2]) {
+                loadExtents.push([
+                    loadExtent[0] - worldWidth,
+                    loadExtent[1],
+                    loadExtent[2] - worldWidth,
+                    loadExtent[3],
+                ]);
+            }
+        }
+        if (this.ready &&
+            this.renderedResolution_ == resolution &&
+            this.renderedRevision_ == vectorLayerRevision &&
+            this.renderedRenderOrder_ == vectorLayerRenderOrder &&
+            containsExtent(this.wrappedRenderedExtent_, extent)) {
+            if (!equals(this.renderedExtent_, renderedExtent)) {
+                this.hitDetectionImageData_ = null;
+                this.renderedExtent_ = renderedExtent;
+            }
+            this.renderedCenter_ = center;
+            this.replayGroupChanged = false;
+            return true;
+        }
+        this.replayGroup_ = null;
+        var replayGroup = new CanvasBuilderGroup(getRenderTolerance(resolution, pixelRatio), extent, resolution, pixelRatio);
+        var declutterBuilderGroup;
+        if (this.getLayer().getDeclutter()) {
+            declutterBuilderGroup = new CanvasBuilderGroup(getRenderTolerance(resolution, pixelRatio), extent, resolution, pixelRatio);
+        }
+        var userProjection = getUserProjection();
+        var userTransform;
+        if (userProjection) {
+            for (var i = 0, ii = loadExtents.length; i < ii; ++i) {
+                var extent_1 = loadExtents[i];
+                var userExtent_1 = toUserExtent(extent_1, projection);
+                vectorSource.loadFeatures(userExtent_1, toUserResolution(resolution, projection), userProjection);
+            }
+            userTransform = getTransformFromProjections(userProjection, projection);
+        }
+        else {
+            for (var i = 0, ii = loadExtents.length; i < ii; ++i) {
+                vectorSource.loadFeatures(loadExtents[i], resolution, projection);
+            }
+        }
+        var squaredTolerance = getSquaredRenderTolerance(resolution, pixelRatio);
+        var ready = true;
+        var render = 
+        /**
+         * @param {import("../../Feature.js").default} feature Feature.
+         * @this {CanvasVectorLayerRenderer}
+         */
+        function (feature) {
+            var styles;
+            var styleFunction = feature.getStyleFunction() || vectorLayer.getStyleFunction();
+            if (styleFunction) {
+                styles = styleFunction(feature, resolution);
+            }
+            if (styles) {
+                var dirty = this.renderFeature(feature, squaredTolerance, styles, replayGroup, userTransform, declutterBuilderGroup);
+                ready = ready && !dirty;
+            }
+        }.bind(this);
+        var userExtent = toUserExtent(extent, projection);
+        /** @type {Array<import("../../Feature.js").default>} */
+        var features = vectorSource.getFeaturesInExtent(userExtent);
+        if (vectorLayerRenderOrder) {
+            features.sort(vectorLayerRenderOrder);
+        }
+        for (var i = 0, ii = features.length; i < ii; ++i) {
+            render(features[i]);
+        }
+        this.renderedFeatures_ = features;
+        this.ready = ready;
+        var replayGroupInstructions = replayGroup.finish();
+        var executorGroup = new ExecutorGroup(extent, resolution, pixelRatio, vectorSource.getOverlaps(), replayGroupInstructions, vectorLayer.getRenderBuffer());
+        if (declutterBuilderGroup) {
+            this.declutterExecutorGroup = new ExecutorGroup(extent, resolution, pixelRatio, vectorSource.getOverlaps(), declutterBuilderGroup.finish(), vectorLayer.getRenderBuffer());
+        }
+        this.renderedResolution_ = resolution;
+        this.renderedRevision_ = vectorLayerRevision;
+        this.renderedRenderOrder_ = vectorLayerRenderOrder;
+        this.renderedExtent_ = renderedExtent;
+        this.wrappedRenderedExtent_ = extent;
+        this.renderedCenter_ = center;
+        this.renderedProjection_ = projection;
+        this.replayGroup_ = executorGroup;
+        this.hitDetectionImageData_ = null;
+        this.replayGroupChanged = true;
+        return true;
+    };
+    /**
+     * @param {import("../../Feature.js").default} feature Feature.
+     * @param {number} squaredTolerance Squared render 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} builderGroup Builder group.
+     * @param {import("../../proj.js").TransformFunction} [opt_transform] Transform from user to view projection.
+     * @param {import("../../render/canvas/BuilderGroup.js").default} [opt_declutterBuilderGroup] Builder for decluttering.
+     * @return {boolean} `true` if an image is loading.
+     */
+    CanvasVectorLayerRenderer.prototype.renderFeature = function (feature, squaredTolerance, styles, builderGroup, opt_transform, opt_declutterBuilderGroup) {
+        if (!styles) {
+            return false;
+        }
+        var loading = false;
+        if (Array.isArray(styles)) {
+            for (var i = 0, ii = styles.length; i < ii; ++i) {
+                loading =
+                    renderFeature(builderGroup, feature, styles[i], squaredTolerance, this.boundHandleStyleImageChange_, opt_transform, opt_declutterBuilderGroup) || loading;
+            }
+        }
+        else {
+            loading = renderFeature(builderGroup, feature, styles, squaredTolerance, this.boundHandleStyleImageChange_, opt_transform, opt_declutterBuilderGroup);
+        }
+        return loading;
+    };
+    return CanvasVectorLayerRenderer;
+}(CanvasLayerRenderer));
+export default CanvasVectorLayerRenderer;
+//# sourceMappingURL=VectorLayer.js.map

node_modules/ol/renderer/canvas/VectorTileLayer.d.ts

@@ -0,0 +1,95 @@
+export default CanvasVectorTileLayerRenderer;
+/**
+ * @classdesc
+ * Canvas renderer for vector tile layers.
+ * @api
+ * @extends {CanvasTileLayerRenderer<import("../../layer/VectorTile.js").default>}
+ */
+declare class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer<import("../../layer/VectorTile.js").default> {
+    /**
+     * @param {import("../../layer/VectorTile.js").default} layer VectorTile layer.
+     */
+    constructor(layer: import("../../layer/VectorTile.js").default);
+    /** @private */
+    private boundHandleStyleImageChange_;
+    /**
+     * @private
+     * @type {number}
+     */
+    private renderedLayerRevision_;
+    /**
+     * @private
+     * @type {import("../../transform").Transform}
+     */
+    private renderedPixelToCoordinateTransform_;
+    /**
+     * @private
+     * @type {number}
+     */
+    private renderedRotation_;
+    /**
+     * @private
+     * @type {import("../../transform.js").Transform}
+     */
+    private tmpTransform_;
+    /**
+     * @param {import("../../VectorRenderTile.js").default} tile Tile.
+     * @param {number} pixelRatio Pixel ratio.
+     * @param {import("../../proj/Projection").default} projection Projection.
+     * @return {boolean|undefined} Tile needs to be rendered.
+     */
+    prepareTile(tile: import("../../VectorRenderTile.js").default, pixelRatio: number, projection: import("../../proj/Projection").default): boolean | undefined;
+    /**
+     * @param {import("../../VectorRenderTile.js").default} tile Tile.
+     * @return {boolean} Tile is drawable.
+     */
+    isDrawableTile(tile: import("../../VectorRenderTile.js").default): boolean;
+    /**
+     * @inheritDoc
+     */
+    getTileImage(tile: any): any;
+    /**
+     * @param {import("../../VectorRenderTile.js").default} tile Tile.
+     * @param {number} pixelRatio Pixel ratio.
+     * @param {import("../../proj/Projection.js").default} projection Projection.
+     * @private
+     */
+    private updateExecutorGroup_;
+    /**
+     * Handle changes in image style state.
+     * @param {import("../../events/Event.js").default} event Image style change event.
+     * @private
+     */
+    private handleStyleImageChange_;
+    /**
+     * Render declutter items for this layer
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     */
+    renderDeclutter(frameState: import("../../PluggableMap.js").FrameState): void;
+    getTileRenderTransform(tile: any, frameState: any): number[];
+    ready: any;
+    /**
+     * @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} builderGroup Replay group.
+     * @param {import("../../render/canvas/BuilderGroup.js").default} [opt_declutterBuilderGroup] Builder group for decluttering.
+     * @return {boolean} `true` if an image is loading.
+     */
+    renderFeature(feature: import("../../Feature.js").FeatureLike, squaredTolerance: number, styles: import("../../style/Style.js").default | Array<import("../../style/Style.js").default>, builderGroup: import("../../render/canvas/BuilderGroup.js").default, opt_declutterBuilderGroup?: CanvasBuilderGroup | undefined): boolean;
+    /**
+     * @param {import("../../VectorRenderTile.js").default} tile Tile.
+     * @return {boolean} A new tile image was rendered.
+     * @private
+     */
+    private tileImageNeedsRender_;
+    /**
+     * @param {import("../../VectorRenderTile.js").default} tile Tile.
+     * @param {import("../../PluggableMap").FrameState} frameState Frame state.
+     * @private
+     */
+    private renderTileImage_;
+}
+import CanvasTileLayerRenderer from "./TileLayer.js";
+import CanvasBuilderGroup from "../../render/canvas/BuilderGroup.js";
+//# sourceMappingURL=VectorTileLayer.d.ts.map

node_modules/ol/renderer/canvas/VectorTileLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorTileLayer.d.ts","sourceRoot":"","sources":["../../src/renderer/canvas/VectorTileLayer.js"],"names":[],"mappings":";AAyDA;;;;;GAKG;AACH;IACE;;OAEG;IACH,mBAFW,OAAO,2BAA2B,EAAE,OAAO,EA+BrD;IA1BC,eAAe;IACf,qCAA2E;IAE3E;;;OAGG;IACH,+BAA2B;IAE3B;;;OAGG;IACH,4CAA+C;IAE/C;;;OAGG;IACH,0BAAsB;IAEtB;;;OAGG;IACH,sBAAsC;IAGxC;;;;;OAKG;IACH,kBALW,OAAO,2BAA2B,EAAE,OAAO,cAC3C,MAAM,cACN,OAAO,uBAAuB,EAAE,OAAO,GACtC,OAAO,GAAC,SAAS,CAY5B;IAkCD;;;OAGG;IACH,qBAHW,OAAO,2BAA2B,EAAE,OAAO,GAC1C,OAAO,CAUlB;IAED;;OAEG;IACH,6BAEC;IAgBD;;;;;OAKG;IACH,6BAmIC;IA4ND;;;;OAIG;IACH,gCAEC;IAED;;;OAGG;IACH,4BAFW,OAAO,uBAAuB,EAAE,UAAU,QAiCpD;IAED,6DA+BC;IA6GC,WAAkB;IAKpB;;;;;;;OAOG;IACH,uBAPW,OAAO,kBAAkB,EAAE,WAAW,oBACtC,MAAM,UACN,OAAO,sBAAsB,EAAE,OAAO,GAAC,MAAM,OAAO,sBAAsB,EAAE,OAAO,CAAC,gBACpF,OAAO,qCAAqC,EAAE,OAAO,+DAEpD,OAAO,CAsClB;IAED;;;;OAIG;IACH,8BAcC;IAED;;;;OAIG;IACH,yBAoDC;CACF"}

node_modules/ol/renderer/canvas/VectorTileLayer.js

@@ -0,0 +1,632 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+/**
+ * @module ol/renderer/canvas/VectorTileLayer
+ */
+import CanvasBuilderGroup from '../../render/canvas/BuilderGroup.js';
+import CanvasExecutorGroup from '../../render/canvas/ExecutorGroup.js';
+import CanvasTileLayerRenderer from './TileLayer.js';
+import TileState from '../../TileState.js';
+import VectorTileRenderType from '../../layer/VectorTileRenderType.js';
+import ViewHint from '../../ViewHint.js';
+import { HIT_DETECT_RESOLUTION, createHitDetectionImageData, hitDetect, } from '../../render/canvas/hitdetect.js';
+import { apply as applyTransform, create as createTransform, multiply, reset as resetTransform, scale, scale as scaleTransform, translate as translateTransform, } from '../../transform.js';
+import { boundingExtent, buffer, containsExtent, equals, getIntersection, getTopLeft, intersects, } from '../../extent.js';
+import { getSquaredTolerance as getSquaredRenderTolerance, renderFeature, } from '../vector.js';
+import { getUid } from '../../util.js';
+import { toSize } from '../../size.js';
+import { wrapX } from '../../coordinate.js';
+/**
+ * @type {!Object<string, Array<import("../../render/canvas.js").BuilderType>>}
+ */
+var IMAGE_REPLAYS = {
+    'image': ['Polygon', 'Circle', 'LineString', 'Image', 'Text'],
+    'hybrid': ['Polygon', 'LineString'],
+    'vector': [],
+};
+/**
+ * @type {!Object<string, Array<import("../../render/canvas.js").BuilderType>>}
+ */
+var VECTOR_REPLAYS = {
+    'hybrid': ['Image', 'Text', 'Default'],
+    'vector': ['Polygon', 'Circle', 'LineString', 'Image', 'Text', 'Default'],
+};
+/**
+ * @classdesc
+ * Canvas renderer for vector tile layers.
+ * @api
+ * @extends {CanvasTileLayerRenderer<import("../../layer/VectorTile.js").default>}
+ */
+var CanvasVectorTileLayerRenderer = /** @class */ (function (_super) {
+    __extends(CanvasVectorTileLayerRenderer, _super);
+    /**
+     * @param {import("../../layer/VectorTile.js").default} layer VectorTile layer.
+     */
+    function CanvasVectorTileLayerRenderer(layer) {
+        var _this = _super.call(this, layer) || this;
+        /** @private */
+        _this.boundHandleStyleImageChange_ = _this.handleStyleImageChange_.bind(_this);
+        /**
+         * @private
+         * @type {number}
+         */
+        _this.renderedLayerRevision_;
+        /**
+         * @private
+         * @type {import("../../transform").Transform}
+         */
+        _this.renderedPixelToCoordinateTransform_ = null;
+        /**
+         * @private
+         * @type {number}
+         */
+        _this.renderedRotation_;
+        /**
+         * @private
+         * @type {import("../../transform.js").Transform}
+         */
+        _this.tmpTransform_ = createTransform();
+        return _this;
+    }
+    /**
+     * @param {import("../../VectorRenderTile.js").default} tile Tile.
+     * @param {number} pixelRatio Pixel ratio.
+     * @param {import("../../proj/Projection").default} projection Projection.
+     * @return {boolean|undefined} Tile needs to be rendered.
+     */
+    CanvasVectorTileLayerRenderer.prototype.prepareTile = function (tile, pixelRatio, projection) {
+        var render;
+        var state = tile.getState();
+        if (state === TileState.LOADED || state === TileState.ERROR) {
+            this.updateExecutorGroup_(tile, pixelRatio, projection);
+            if (this.tileImageNeedsRender_(tile)) {
+                render = true;
+            }
+        }
+        return render;
+    };
+    /**
+     * @param {number} z Tile coordinate z.
+     * @param {number} x Tile coordinate x.
+     * @param {number} y Tile coordinate y.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @return {!import("../../Tile.js").default} Tile.
+     */
+    CanvasVectorTileLayerRenderer.prototype.getTile = function (z, x, y, frameState) {
+        var pixelRatio = frameState.pixelRatio;
+        var viewState = frameState.viewState;
+        var resolution = viewState.resolution;
+        var projection = viewState.projection;
+        var layer = this.getLayer();
+        var tile = layer.getSource().getTile(z, x, y, pixelRatio, projection);
+        var viewHints = frameState.viewHints;
+        var hifi = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
+        if (hifi || !tile.wantedResolution) {
+            tile.wantedResolution = resolution;
+        }
+        var render = this.prepareTile(tile, pixelRatio, projection);
+        if (render &&
+            (hifi || Date.now() - frameState.time < 8) &&
+            layer.getRenderMode() !== VectorTileRenderType.VECTOR) {
+            this.renderTileImage_(tile, frameState);
+        }
+        return _super.prototype.getTile.call(this, z, x, y, frameState);
+    };
+    /**
+     * @param {import("../../VectorRenderTile.js").default} tile Tile.
+     * @return {boolean} Tile is drawable.
+     */
+    CanvasVectorTileLayerRenderer.prototype.isDrawableTile = function (tile) {
+        var layer = this.getLayer();
+        return (_super.prototype.isDrawableTile.call(this, tile) &&
+            (layer.getRenderMode() === VectorTileRenderType.VECTOR
+                ? getUid(layer) in tile.executorGroups
+                : tile.hasContext(layer)));
+    };
+    /**
+     * @inheritDoc
+     */
+    CanvasVectorTileLayerRenderer.prototype.getTileImage = function (tile) {
+        return tile.getImage(this.getLayer());
+    };
+    /**
+     * Determine whether render should be called.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @return {boolean} Layer is ready to be rendered.
+     */
+    CanvasVectorTileLayerRenderer.prototype.prepareFrame = function (frameState) {
+        var layerRevision = this.getLayer().getRevision();
+        if (this.renderedLayerRevision_ !== layerRevision) {
+            this.renderedLayerRevision_ = layerRevision;
+            this.renderedTiles.length = 0;
+        }
+        return _super.prototype.prepareFrame.call(this, frameState);
+    };
+    /**
+     * @param {import("../../VectorRenderTile.js").default} tile Tile.
+     * @param {number} pixelRatio Pixel ratio.
+     * @param {import("../../proj/Projection.js").default} projection Projection.
+     * @private
+     */
+    CanvasVectorTileLayerRenderer.prototype.updateExecutorGroup_ = function (tile, pixelRatio, projection) {
+        var layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
+        var revision = layer.getRevision();
+        var renderOrder = layer.getRenderOrder() || null;
+        var resolution = tile.wantedResolution;
+        var builderState = tile.getReplayState(layer);
+        if (!builderState.dirty &&
+            builderState.renderedResolution === resolution &&
+            builderState.renderedRevision == revision &&
+            builderState.renderedRenderOrder == renderOrder) {
+            return;
+        }
+        var source = layer.getSource();
+        var declutter = layer.getDeclutter();
+        var sourceTileGrid = source.getTileGrid();
+        var tileGrid = source.getTileGridForProjection(projection);
+        var tileExtent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord);
+        var sourceTiles = source.getSourceTiles(pixelRatio, projection, tile);
+        var layerUid = getUid(layer);
+        delete tile.hitDetectionImageData[layerUid];
+        tile.executorGroups[layerUid] = [];
+        if (declutter) {
+            tile.declutterExecutorGroups[layerUid] = [];
+        }
+        builderState.dirty = false;
+        var _loop_1 = function (t, tt) {
+            var sourceTile = sourceTiles[t];
+            if (sourceTile.getState() != TileState.LOADED) {
+                return "continue";
+            }
+            var sourceTileCoord = sourceTile.tileCoord;
+            var sourceTileExtent = sourceTileGrid.getTileCoordExtent(sourceTileCoord);
+            var sharedExtent = getIntersection(tileExtent, sourceTileExtent);
+            var builderExtent = buffer(sharedExtent, layer.getRenderBuffer() * resolution, this_1.tmpExtent);
+            var bufferedExtent = equals(sourceTileExtent, sharedExtent)
+                ? null
+                : builderExtent;
+            var builderGroup = new CanvasBuilderGroup(0, builderExtent, resolution, pixelRatio);
+            var declutterBuilderGroup = declutter
+                ? new CanvasBuilderGroup(0, sharedExtent, resolution, pixelRatio)
+                : undefined;
+            var squaredTolerance = getSquaredRenderTolerance(resolution, pixelRatio);
+            /**
+             * @param {import("../../Feature.js").FeatureLike} feature Feature.
+             * @this {CanvasVectorTileLayerRenderer}
+             */
+            var render = function (feature) {
+                var styles;
+                var styleFunction = feature.getStyleFunction() || layer.getStyleFunction();
+                if (styleFunction) {
+                    styles = styleFunction(feature, resolution);
+                }
+                if (styles) {
+                    var dirty = this.renderFeature(feature, squaredTolerance, styles, builderGroup, declutterBuilderGroup);
+                    builderState.dirty = builderState.dirty || dirty;
+                }
+            };
+            var features = sourceTile.getFeatures();
+            if (renderOrder && renderOrder !== builderState.renderedRenderOrder) {
+                features.sort(renderOrder);
+            }
+            for (var i = 0, ii = features.length; i < ii; ++i) {
+                var feature = features[i];
+                if (!bufferedExtent ||
+                    intersects(bufferedExtent, feature.getGeometry().getExtent())) {
+                    render.call(this_1, feature);
+                }
+            }
+            var executorGroupInstructions = builderGroup.finish();
+            // no need to clip when the render tile is covered by a single source tile
+            var replayExtent = layer.getRenderMode() !== VectorTileRenderType.VECTOR &&
+                declutter &&
+                sourceTiles.length === 1
+                ? null
+                : sharedExtent;
+            var renderingReplayGroup = new CanvasExecutorGroup(replayExtent, resolution, pixelRatio, source.getOverlaps(), executorGroupInstructions, layer.getRenderBuffer());
+            tile.executorGroups[layerUid].push(renderingReplayGroup);
+            if (declutterBuilderGroup) {
+                var declutterExecutorGroup = new CanvasExecutorGroup(null, resolution, pixelRatio, source.getOverlaps(), declutterBuilderGroup.finish(), layer.getRenderBuffer());
+                tile.declutterExecutorGroups[layerUid].push(declutterExecutorGroup);
+            }
+        };
+        var this_1 = this;
+        for (var t = 0, tt = sourceTiles.length; t < tt; ++t) {
+            _loop_1(t, tt);
+        }
+        builderState.renderedRevision = revision;
+        builderState.renderedRenderOrder = renderOrder;
+        builderState.renderedResolution = resolution;
+    };
+    /**
+     * @param {import("../../coordinate.js").Coordinate} coordinate Coordinate.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {number} hitTolerance Hit tolerance in pixels.
+     * @param {import("../vector.js").FeatureCallback<T>} callback Feature callback.
+     * @param {Array<import("../Map.js").HitMatch<T>>} matches The hit detected matches with tolerance.
+     * @return {T|undefined} Callback result.
+     * @template T
+     */
+    CanvasVectorTileLayerRenderer.prototype.forEachFeatureAtCoordinate = function (coordinate, frameState, hitTolerance, callback, matches) {
+        var resolution = frameState.viewState.resolution;
+        var rotation = frameState.viewState.rotation;
+        hitTolerance = hitTolerance == undefined ? 0 : hitTolerance;
+        var layer = this.getLayer();
+        var source = layer.getSource();
+        var tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
+        var hitExtent = boundingExtent([coordinate]);
+        buffer(hitExtent, resolution * hitTolerance, hitExtent);
+        /** @type {!Object<string, import("../Map.js").HitMatch<T>|true>} */
+        var features = {};
+        /**
+         * @param {import("../../Feature.js").FeatureLike} feature Feature.
+         * @param {import("../../geom/SimpleGeometry.js").default} geometry Geometry.
+         * @param {number} distanceSq The squared distance to the click position.
+         * @return {T|undefined} Callback result.
+         */
+        var featureCallback = function (feature, geometry, distanceSq) {
+            var key = feature.getId();
+            if (key === undefined) {
+                key = getUid(feature);
+            }
+            var match = features[key];
+            if (!match) {
+                if (distanceSq === 0) {
+                    features[key] = true;
+                    return callback(feature, layer, geometry);
+                }
+                matches.push((features[key] = {
+                    feature: feature,
+                    layer: layer,
+                    geometry: geometry,
+                    distanceSq: distanceSq,
+                    callback: callback,
+                }));
+            }
+            else if (match !== true && distanceSq < match.distanceSq) {
+                if (distanceSq === 0) {
+                    features[key] = true;
+                    matches.splice(matches.lastIndexOf(match), 1);
+                    return callback(feature, layer, geometry);
+                }
+                match.geometry = geometry;
+                match.distanceSq = distanceSq;
+            }
+            return undefined;
+        };
+        var renderedTiles = 
+        /** @type {Array<import("../../VectorRenderTile.js").default>} */ (this.renderedTiles);
+        var found;
+        var _loop_2 = function (i, ii) {
+            var tile = renderedTiles[i];
+            var tileExtent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord);
+            if (!intersects(tileExtent, hitExtent)) {
+                return "continue";
+            }
+            var layerUid = getUid(layer);
+            var executorGroups = [tile.executorGroups[layerUid]];
+            var declutterExecutorGroups = tile.declutterExecutorGroups[layerUid];
+            if (declutterExecutorGroups) {
+                executorGroups.push(declutterExecutorGroups);
+            }
+            executorGroups.some(function (executorGroups) {
+                var declutteredFeatures = executorGroups === declutterExecutorGroups
+                    ? frameState.declutterTree.all().map(function (item) { return item.value; })
+                    : null;
+                for (var t = 0, tt = executorGroups.length; t < tt; ++t) {
+                    var executorGroup = executorGroups[t];
+                    found = executorGroup.forEachFeatureAtCoordinate(coordinate, resolution, rotation, hitTolerance, featureCallback, declutteredFeatures);
+                    if (found) {
+                        return true;
+                    }
+                }
+            });
+        };
+        for (var i = 0, ii = renderedTiles.length; !found && i < ii; ++i) {
+            _loop_2(i, ii);
+        }
+        return found;
+    };
+    /**
+     * Asynchronous layer level hit detection.
+     * @param {import("../../pixel.js").Pixel} pixel Pixel.
+     * @return {Promise<Array<import("../../Feature").default>>} Promise that resolves with an array of features.
+     */
+    CanvasVectorTileLayerRenderer.prototype.getFeatures = function (pixel) {
+        return new Promise(function (resolve, reject) {
+            var layer = 
+            /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
+            var layerUid = getUid(layer);
+            var source = layer.getSource();
+            var projection = this.renderedProjection;
+            var projectionExtent = projection.getExtent();
+            var resolution = this.renderedResolution;
+            var tileGrid = source.getTileGridForProjection(projection);
+            var coordinate = applyTransform(this.renderedPixelToCoordinateTransform_, pixel.slice());
+            var tileCoord = tileGrid.getTileCoordForCoordAndResolution(coordinate, resolution);
+            var tile;
+            for (var i = 0, ii = this.renderedTiles.length; i < ii; ++i) {
+                if (tileCoord.toString() === this.renderedTiles[i].tileCoord.toString()) {
+                    tile = this.renderedTiles[i];
+                    if (tile.getState() === TileState.LOADED) {
+                        var extent_1 = tileGrid.getTileCoordExtent(tile.tileCoord);
+                        if (source.getWrapX() &&
+                            projection.canWrapX() &&
+                            !containsExtent(projectionExtent, extent_1)) {
+                            wrapX(coordinate, projection);
+                        }
+                        break;
+                    }
+                    tile = undefined;
+                }
+            }
+            if (!tile || tile.loadingSourceTiles > 0) {
+                resolve([]);
+                return;
+            }
+            var extent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord);
+            var corner = getTopLeft(extent);
+            var tilePixel = [
+                (coordinate[0] - corner[0]) / resolution,
+                (corner[1] - coordinate[1]) / resolution,
+            ];
+            var features = tile
+                .getSourceTiles()
+                .reduce(function (accumulator, sourceTile) {
+                return accumulator.concat(sourceTile.getFeatures());
+            }, []);
+            var hitDetectionImageData = tile.hitDetectionImageData[layerUid];
+            if (!hitDetectionImageData && !this.animatingOrInteracting_) {
+                var tileSize = toSize(tileGrid.getTileSize(tileGrid.getZForResolution(resolution, source.zDirection)));
+                var rotation = this.renderedRotation_;
+                var transforms = [
+                    this.getRenderTransform(tileGrid.getTileCoordCenter(tile.wrappedTileCoord), resolution, 0, HIT_DETECT_RESOLUTION, tileSize[0] * HIT_DETECT_RESOLUTION, tileSize[1] * HIT_DETECT_RESOLUTION, 0),
+                ];
+                hitDetectionImageData = createHitDetectionImageData(tileSize, transforms, features, layer.getStyleFunction(), tileGrid.getTileCoordExtent(tile.wrappedTileCoord), tile.getReplayState(layer).renderedResolution, rotation);
+                tile.hitDetectionImageData[layerUid] = hitDetectionImageData;
+            }
+            resolve(hitDetect(tilePixel, features, hitDetectionImageData));
+        }.bind(this));
+    };
+    /**
+     * Perform action necessary to get the layer rendered after new fonts have loaded
+     */
+    CanvasVectorTileLayerRenderer.prototype.handleFontsChanged = function () {
+        var layer = this.getLayer();
+        if (layer.getVisible() && this.renderedLayerRevision_ !== undefined) {
+            layer.changed();
+        }
+    };
+    /**
+     * Handle changes in image style state.
+     * @param {import("../../events/Event.js").default} event Image style change event.
+     * @private
+     */
+    CanvasVectorTileLayerRenderer.prototype.handleStyleImageChange_ = function (event) {
+        this.renderIfReadyAndVisible();
+    };
+    /**
+     * Render declutter items for this layer
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     */
+    CanvasVectorTileLayerRenderer.prototype.renderDeclutter = function (frameState) {
+        var context = this.context;
+        var alpha = context.globalAlpha;
+        context.globalAlpha = this.getLayer().getOpacity();
+        var viewHints = frameState.viewHints;
+        var hifi = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
+        var tiles = 
+        /** @type {Array<import("../../VectorRenderTile.js").default>} */ (this.renderedTiles);
+        for (var i = 0, ii = tiles.length; i < ii; ++i) {
+            var tile = tiles[i];
+            var declutterExecutorGroups = tile.declutterExecutorGroups[getUid(this.getLayer())];
+            if (declutterExecutorGroups) {
+                for (var j = declutterExecutorGroups.length - 1; j >= 0; --j) {
+                    declutterExecutorGroups[j].execute(this.context, 1, this.getTileRenderTransform(tile, frameState), frameState.viewState.rotation, hifi, undefined, frameState.declutterTree);
+                }
+            }
+        }
+        context.globalAlpha = alpha;
+    };
+    CanvasVectorTileLayerRenderer.prototype.getTileRenderTransform = function (tile, frameState) {
+        var pixelRatio = frameState.pixelRatio;
+        var viewState = frameState.viewState;
+        var center = viewState.center;
+        var resolution = viewState.resolution;
+        var rotation = viewState.rotation;
+        var size = frameState.size;
+        var width = Math.round(size[0] * pixelRatio);
+        var height = Math.round(size[1] * pixelRatio);
+        var source = this.getLayer().getSource();
+        var tileGrid = source.getTileGridForProjection(frameState.viewState.projection);
+        var tileCoord = tile.tileCoord;
+        var tileExtent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord);
+        var worldOffset = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent)[0] - tileExtent[0];
+        var transform = multiply(scale(this.inversePixelTransform.slice(), 1 / pixelRatio, 1 / pixelRatio), this.getRenderTransform(center, resolution, rotation, pixelRatio, width, height, worldOffset));
+        return transform;
+    };
+    /**
+     * Render the layer.
+     * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+     * @param {HTMLElement} target Target that may be used to render content to.
+     * @return {HTMLElement} The rendered element.
+     */
+    CanvasVectorTileLayerRenderer.prototype.renderFrame = function (frameState, target) {
+        var viewHints = frameState.viewHints;
+        var hifi = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
+        _super.prototype.renderFrame.call(this, frameState, target);
+        this.renderedPixelToCoordinateTransform_ =
+            frameState.pixelToCoordinateTransform.slice();
+        this.renderedRotation_ = frameState.viewState.rotation;
+        var layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
+        var renderMode = layer.getRenderMode();
+        var context = this.context;
+        var alpha = context.globalAlpha;
+        context.globalAlpha = layer.getOpacity();
+        var replayTypes = VECTOR_REPLAYS[renderMode];
+        var viewState = frameState.viewState;
+        var rotation = viewState.rotation;
+        var tileSource = layer.getSource();
+        var tileGrid = tileSource.getTileGridForProjection(viewState.projection);
+        var z = tileGrid.getZForResolution(viewState.resolution, tileSource.zDirection);
+        var tiles = this.renderedTiles;
+        var clips = [];
+        var clipZs = [];
+        var ready = true;
+        for (var i = tiles.length - 1; i >= 0; --i) {
+            var tile = /** @type {import("../../VectorRenderTile.js").default} */ (tiles[i]);
+            ready = ready && !tile.getReplayState(layer).dirty;
+            var executorGroups = tile.executorGroups[getUid(layer)].filter(function (group) { return group.hasExecutors(replayTypes); });
+            if (executorGroups.length === 0) {
+                continue;
+            }
+            var transform = this.getTileRenderTransform(tile, frameState);
+            var currentZ = tile.tileCoord[0];
+            var contextSaved = false;
+            // Clip mask for regions in this tile that already filled by a higher z tile
+            var currentClip = executorGroups[0].getClipCoords(transform);
+            if (currentClip) {
+                for (var j = 0, jj = clips.length; j < jj; ++j) {
+                    if (z !== currentZ && currentZ < clipZs[j]) {
+                        var clip = clips[j];
+                        if (intersects([
+                            currentClip[0],
+                            currentClip[3],
+                            currentClip[4],
+                            currentClip[7],
+                        ], [clip[0], clip[3], clip[4], clip[7]])) {
+                            if (!contextSaved) {
+                                context.save();
+                                contextSaved = true;
+                            }
+                            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 z 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();
+                        }
+                    }
+                }
+                clips.push(currentClip);
+                clipZs.push(currentZ);
+            }
+            for (var t = 0, tt = executorGroups.length; t < tt; ++t) {
+                var executorGroup = executorGroups[t];
+                executorGroup.execute(context, 1, transform, rotation, hifi, replayTypes);
+            }
+            if (contextSaved) {
+                context.restore();
+            }
+        }
+        context.globalAlpha = alpha;
+        this.ready = ready;
+        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} builderGroup Replay group.
+     * @param {import("../../render/canvas/BuilderGroup.js").default} [opt_declutterBuilderGroup] Builder group for decluttering.
+     * @return {boolean} `true` if an image is loading.
+     */
+    CanvasVectorTileLayerRenderer.prototype.renderFeature = function (feature, squaredTolerance, styles, builderGroup, opt_declutterBuilderGroup) {
+        if (!styles) {
+            return false;
+        }
+        var loading = false;
+        if (Array.isArray(styles)) {
+            for (var i = 0, ii = styles.length; i < ii; ++i) {
+                loading =
+                    renderFeature(builderGroup, feature, styles[i], squaredTolerance, this.boundHandleStyleImageChange_, undefined, opt_declutterBuilderGroup) || loading;
+            }
+        }
+        else {
+            loading = renderFeature(builderGroup, feature, styles, squaredTolerance, this.boundHandleStyleImageChange_, undefined, opt_declutterBuilderGroup);
+        }
+        return loading;
+    };
+    /**
+     * @param {import("../../VectorRenderTile.js").default} tile Tile.
+     * @return {boolean} A new tile image was rendered.
+     * @private
+     */
+    CanvasVectorTileLayerRenderer.prototype.tileImageNeedsRender_ = function (tile) {
+        var layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
+        if (layer.getRenderMode() === VectorTileRenderType.VECTOR) {
+            return false;
+        }
+        var replayState = tile.getReplayState(layer);
+        var revision = layer.getRevision();
+        var resolution = tile.wantedResolution;
+        return (replayState.renderedTileResolution !== resolution ||
+            replayState.renderedTileRevision !== revision);
+    };
+    /**
+     * @param {import("../../VectorRenderTile.js").default} tile Tile.
+     * @param {import("../../PluggableMap").FrameState} frameState Frame state.
+     * @private
+     */
+    CanvasVectorTileLayerRenderer.prototype.renderTileImage_ = function (tile, frameState) {
+        var layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
+        var replayState = tile.getReplayState(layer);
+        var revision = layer.getRevision();
+        var executorGroups = tile.executorGroups[getUid(layer)];
+        replayState.renderedTileRevision = revision;
+        var tileCoord = tile.wrappedTileCoord;
+        var z = tileCoord[0];
+        var source = layer.getSource();
+        var pixelRatio = frameState.pixelRatio;
+        var viewState = frameState.viewState;
+        var projection = viewState.projection;
+        var tileGrid = source.getTileGridForProjection(projection);
+        var tileResolution = tileGrid.getResolution(tile.tileCoord[0]);
+        var renderPixelRatio = (frameState.pixelRatio / tile.wantedResolution) * tileResolution;
+        var resolution = tileGrid.getResolution(z);
+        var context = tile.getContext(layer);
+        // Increase tile size when overzooming for low pixel ratio, to avoid blurry tiles
+        pixelRatio = Math.round(Math.max(pixelRatio, renderPixelRatio / pixelRatio));
+        var size = source.getTilePixelSize(z, pixelRatio, projection);
+        context.canvas.width = size[0];
+        context.canvas.height = size[1];
+        var renderScale = pixelRatio / renderPixelRatio;
+        if (renderScale !== 1) {
+            var canvasTransform = resetTransform(this.tmpTransform_);
+            scaleTransform(canvasTransform, renderScale, renderScale);
+            context.setTransform.apply(context, canvasTransform);
+        }
+        var tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent);
+        var pixelScale = renderPixelRatio / resolution;
+        var transform = resetTransform(this.tmpTransform_);
+        scaleTransform(transform, pixelScale, -pixelScale);
+        translateTransform(transform, -tileExtent[0], -tileExtent[3]);
+        for (var i = 0, ii = executorGroups.length; i < ii; ++i) {
+            var executorGroup = executorGroups[i];
+            executorGroup.execute(context, renderScale, transform, 0, true, IMAGE_REPLAYS[layer.getRenderMode()]);
+        }
+        replayState.renderedTileResolution = tile.wantedResolution;
+    };
+    return CanvasVectorTileLayerRenderer;
+}(CanvasTileLayerRenderer));
+export default CanvasVectorTileLayerRenderer;
+//# sourceMappingURL=VectorTileLayer.js.map

node_modules/ol/renderer/canvas/common.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @module ol/renderer/canvas/common
+ */
+/**
+ * Context options to disable image smoothing.
+ * @type {Object}
+ */
+export const IMAGE_SMOOTHING_DISABLED: any;
+/**
+ * Context options to enable image smoothing.
+ * @type {Object}
+ */
+export const IMAGE_SMOOTHING_ENABLED: any;
+//# sourceMappingURL=common.d.ts.map

node_modules/ol/renderer/canvas/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/renderer/canvas/common.js"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;GAGG;AACH,2CAGE;AAEF;;;GAGG;AACH,0CAGE"}

node_modules/ol/renderer/canvas/common.js

@@ -0,0 +1,20 @@
+/**
+ * @module ol/renderer/canvas/common
+ */
+/**
+ * Context options to disable image smoothing.
+ * @type {Object}
+ */
+export var IMAGE_SMOOTHING_DISABLED = {
+    imageSmoothingEnabled: false,
+    msImageSmoothingEnabled: false,
+};
+/**
+ * Context options to enable image smoothing.
+ * @type {Object}
+ */
+export var IMAGE_SMOOTHING_ENABLED = {
+    imageSmoothingEnabled: true,
+    msImageSmoothingEnabled: true,
+};
+//# sourceMappingURL=common.js.map

node_modules/ol/renderer/canvas/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/renderer/canvas/common.js"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;GAGG;AACH,MAAM,CAAC,IAAM,wBAAwB,GAAG;IACtC,qBAAqB,EAAE,KAAK;IAC5B,uBAAuB,EAAE,KAAK;CAC/B,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,IAAM,uBAAuB,GAAG;IACrC,qBAAqB,EAAE,IAAI;IAC3B,uBAAuB,EAAE,IAAI;CAC9B,CAAC"}