/
ImageCanvas.js
146 lines (130 loc) · 4.98 KB
/
ImageCanvas.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/**
* @module ol/source/ImageCanvas
*/
import ImageCanvas from '../ImageCanvas.js';
import ImageSource from './Image.js';
import {
containsExtent,
getHeight,
getWidth,
scaleFromCenter,
} from '../extent.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 pixel ratio of the map, {@link module:ol/size~Size} the image size,
* and {@link module:ol/proj/Projection~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~ImageCanvasSource}.
*
* @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: {@link import("../extent.js").Extent} the
* image extent, `{number}` the image resolution, `{number}` the pixel ratio of the map,
* {@link import("../size.js").Size} the image size, and {@link import("../proj/Projection.js").default} 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 module:ol/Observable~Observable#changed}
* @property {boolean} [imageSmoothing=true] Deprecated. Use the `interpolate` option instead.
* @property {boolean} [interpolate=true] Use interpolated values when resampling. By default,
* linear interpolation is used when resampling. Set to false to use the nearest neighbor instead.
* @property {import("../proj.js").ProjectionLike} [projection] Projection. Default is the view 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<number>} [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} [opt_options] ImageCanvas options.
*/
constructor(opt_options) {
const options = opt_options ? opt_options : {};
let interpolate =
options.imageSmoothing !== undefined ? options.imageSmoothing : true;
if (options.interpolate !== undefined) {
interpolate = options.interpolate;
}
super({
attributions: options.attributions,
interpolate: interpolate,
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;
}
/**
* @param {import("../extent.js").Extent} extent Extent.
* @param {number} resolution Resolution.
* @param {number} pixelRatio Pixel ratio.
* @param {import("../proj/Projection.js").default} projection Projection.
* @return {import("../ImageCanvas.js").default} Single image.
*/
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_.call(
this,
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;