/** * @module ol/source/ImageCanvas */ import ImageCanvas from '../ImageCanvas.js'; import {containsExtent, getHeight, getWidth, scaleFromCenter} from '../extent.js'; import ImageSource from '../source/Image.js'; /** * A function returning the canvas element (`{HTMLCanvasElement}`) * used by the source as an image. The arguments passed to the function are: * {@link module:ol/extent~Extent} the image extent, `{number}` the image resolution, * `{number}` the device pixel ratio, {@link module:ol/size~Size} the image size, and * {@link module:ol/proj/Projection} the image projection. The canvas returned by * this function is cached by the source. The this keyword inside the function * references the {@link module:ol/source/ImageCanvas}. * * @typedef {function(this:import("../ImageCanvas.js").default, import("../extent.js").Extent, number, * number, import("../size.js").Size, import("../proj/Projection.js").default): HTMLCanvasElement} FunctionType */ /** * @typedef {Object} Options * @property {import("./Source.js").AttributionLike} [attributions] Attributions. * @property {FunctionType} [canvasFunction] Canvas function. * The function returning the canvas element used by the source * as an image. The arguments passed to the function are: `{import("../extent.js").Extent}` the * image extent, `{number}` the image resolution, `{number}` the device pixel * ratio, `{import("../size.js").Size}` the image size, and `{import("../proj/Projection.js").Projection}` the image * projection. The canvas returned by this function is cached by the source. If * the value returned by the function is later changed then * `changed` should be called on the source for the source to * invalidate the current cached image. See @link: {@link module:ol/Observable~Observable#changed} * @property {import("../proj.js").ProjectionLike} projection Projection. * @property {number} [ratio=1.5] Ratio. 1 means canvases are the size of the map viewport, 2 means twice the * width and height of the map viewport, and so on. Must be `1` or higher. * @property {Array} [resolutions] Resolutions. * If specified, new canvases will be created for these resolutions * @property {import("./State.js").default} [state] Source state. */ /** * @classdesc * Base class for image sources where a canvas element is the image. * @api */ class ImageCanvasSource extends ImageSource { /** * @param {Options=} options ImageCanvas options. */ constructor(options) { super({ attributions: options.attributions, projection: options.projection, resolutions: options.resolutions, state: options.state }); /** * @private * @type {FunctionType} */ this.canvasFunction_ = options.canvasFunction; /** * @private * @type {import("../ImageCanvas.js").default} */ this.canvas_ = null; /** * @private * @type {number} */ this.renderedRevision_ = 0; /** * @private * @type {number} */ this.ratio_ = options.ratio !== undefined ? options.ratio : 1.5; } /** * @inheritDoc */ getImageInternal(extent, resolution, pixelRatio, projection) { resolution = this.findNearestResolution(resolution); let canvas = this.canvas_; if (canvas && this.renderedRevision_ == this.getRevision() && canvas.getResolution() == resolution && canvas.getPixelRatio() == pixelRatio && containsExtent(canvas.getExtent(), extent)) { return canvas; } extent = extent.slice(); scaleFromCenter(extent, this.ratio_); const width = getWidth(extent) / resolution; const height = getHeight(extent) / resolution; const size = [width * pixelRatio, height * pixelRatio]; const canvasElement = this.canvasFunction_( extent, resolution, pixelRatio, size, projection); if (canvasElement) { canvas = new ImageCanvas(extent, resolution, pixelRatio, canvasElement); } this.canvas_ = canvas; this.renderedRevision_ = this.getRevision(); return canvas; } } export default ImageCanvasSource;