ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added new 'hitDEtectionRenderer' property to ol.style.Style and used it in custom drawing

Browse Source
This commit is contained in:
Anna Shchurova
2021-08-20 15:10:59 -04:00
parent 44ec78749f
commit aa58a358ea
4 changed files with 526 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/ol/render/VectorContext.js
View File

@@ -15,8 +15,9 @@ class VectorContext {
* @param {import("../geom/SimpleGeometry.js").default} geometry Geometry. * @param {import("../geom/SimpleGeometry.js").default} geometry Geometry.
* @param {import("../Feature.js").FeatureLike} feature Feature. * @param {import("../Feature.js").FeatureLike} feature Feature.
* @param {Function} renderer Renderer. * @param {Function} renderer Renderer.
* @param {Function} hitDetectionRenderer Renderer.
*/ */
drawCustom(geometry, feature, renderer) {} drawCustom(geometry, feature, renderer, hitDetectionRenderer) {}
/** /**
* Render a geometry. * Render a geometry.

446
src/ol/render/canvas/Builder.js
View File

@@ -31,100 +31,100 @@ import {
class CanvasBuilder extends VectorContext { class CanvasBuilder extends VectorContext {
/** /**
* @param {number} tolerance Tolerance. * @param {number} tolerance Tolerance.
* @param {import("../../extent.js").Extent} maxExtent Maximum extent. * @param {import("../../extent.js").Extent} maxExtent Maximum extent.
* @param {number} resolution Resolution. * @param {number} resolution Resolution.
* @param {number} pixelRatio Pixel ratio. * @param {number} pixelRatio Pixel ratio.
*/ */
constructor(tolerance, maxExtent, resolution, pixelRatio) { constructor(tolerance, maxExtent, resolution, pixelRatio) {
super(); super();
/** /**
* @protected * @protected
* @type {number} * @type {number}
*/ */
this.tolerance = tolerance; this.tolerance = tolerance;
/** /**
* @protected * @protected
* @const * @const
* @type {import("../../extent.js").Extent} * @type {import("../../extent.js").Extent}
*/ */
this.maxExtent = maxExtent; this.maxExtent = maxExtent;
/** /**
* @protected * @protected
* @type {number} * @type {number}
*/ */
this.pixelRatio = pixelRatio; this.pixelRatio = pixelRatio;
/** /**
* @protected * @protected
* @type {number} * @type {number}
*/ */
this.maxLineWidth = 0; this.maxLineWidth = 0;
/** /**
* @protected * @protected
* @const * @const
* @type {number} * @type {number}
*/ */
this.resolution = resolution; this.resolution = resolution;
/** /**
* @private * @private
* @type {Array<*>} * @type {Array<*>}
*/ */
this.beginGeometryInstruction1_ = null; this.beginGeometryInstruction1_ = null;
/** /**
* @private * @private
* @type {Array<*>} * @type {Array<*>}
*/ */
this.beginGeometryInstruction2_ = null; this.beginGeometryInstruction2_ = null;
/** /**
* @private * @private
* @type {import("../../extent.js").Extent} * @type {import("../../extent.js").Extent}
*/ */
this.bufferedMaxExtent_ = null; this.bufferedMaxExtent_ = null;
/** /**
* @protected * @protected
* @type {Array<*>} * @type {Array<*>}
*/ */
this.instructions = []; this.instructions = [];
/** /**
* @protected * @protected
* @type {Array<number>} * @type {Array<number>}
*/ */
this.coordinates = []; this.coordinates = [];
/** /**
* @private * @private
* @type {import("../../coordinate.js").Coordinate} * @type {import("../../coordinate.js").Coordinate}
*/ */
this.tmpCoordinate_ = []; this.tmpCoordinate_ = [];
/** /**
* @protected * @protected
* @type {Array<*>} * @type {Array<*>}
*/ */
this.hitDetectionInstructions = []; this.hitDetectionInstructions = [];
/** /**
* @protected * @protected
* @type {import("../canvas.js").FillStrokeState} * @type {import("../canvas.js").FillStrokeState}
*/ */
this.state = /** @type {import("../canvas.js").FillStrokeState} */ ({}); this.state = /** @type {import("../canvas.js").FillStrokeState} */ ({});
} }
/** /**
* @protected * @protected
* @param {Array<number>} dashArray Dash array. * @param {Array<number>} dashArray Dash array.
* @return {Array<number>} Dash array with pixel ratio applied * @return {Array<number>} Dash array with pixel ratio applied
*/ */
applyPixelRatio(dashArray) { applyPixelRatio(dashArray) {
const pixelRatio = this.pixelRatio; const pixelRatio = this.pixelRatio;
return pixelRatio == 1 return pixelRatio == 1
@@ -135,11 +135,11 @@ class CanvasBuilder extends VectorContext {
} }
/** /**
* @param {Array<number>} flatCoordinates Flat coordinates. * @param {Array<number>} flatCoordinates Flat coordinates.
* @param {number} stride Stride. * @param {number} stride Stride.
* @protected * @protected
* @return {number} My end * @return {number} My end
*/ */
appendFlatPointCoordinates(flatCoordinates, stride) { appendFlatPointCoordinates(flatCoordinates, stride) {
const extent = this.getBufferedMaxExtent(); const extent = this.getBufferedMaxExtent();
const tmpCoord = this.tmpCoordinate_; const tmpCoord = this.tmpCoordinate_;
@@ -157,15 +157,15 @@ class CanvasBuilder extends VectorContext {
} }
/** /**
* @param {Array<number>} flatCoordinates Flat coordinates. * @param {Array<number>} flatCoordinates Flat coordinates.
* @param {number} offset Offset. * @param {number} offset Offset.
* @param {number} end End. * @param {number} end End.
* @param {number} stride Stride. * @param {number} stride Stride.
* @param {boolean} closed Last input coordinate equals first. * @param {boolean} closed Last input coordinate equals first.
* @param {boolean} skipFirst Skip first coordinate. * @param {boolean} skipFirst Skip first coordinate.
* @protected * @protected
* @return {number} My end. * @return {number} My end.
*/ */
appendFlatLineCoordinates( appendFlatLineCoordinates(
flatCoordinates, flatCoordinates,
offset, offset,
@@ -219,13 +219,13 @@ class CanvasBuilder extends VectorContext {
} }
/** /**
* @param {Array<number>} flatCoordinates Flat coordinates. * @param {Array<number>} flatCoordinates Flat coordinates.
* @param {number} offset Offset. * @param {number} offset Offset.
* @param {Array<number>} ends Ends. * @param {Array<number>} ends Ends.
* @param {number} stride Stride. * @param {number} stride Stride.
* @param {Array<number>} builderEnds Builder ends. * @param {Array<number>} builderEnds Builder ends.
* @return {number} Offset. * @return {number} Offset.
*/ */
drawCustomCoordinates_(flatCoordinates, offset, ends, stride, builderEnds) { drawCustomCoordinates_(flatCoordinates, offset, ends, stride, builderEnds) {
for (let i = 0, ii = ends.length; i < ii; ++i) { for (let i = 0, ii = ends.length; i < ii; ++i) {
const end = ends[i]; const end = ends[i];
@@ -244,100 +244,106 @@ class CanvasBuilder extends VectorContext {
} }
/** /**
* @param {import("../../geom/SimpleGeometry.js").default} geometry Geometry. * @param {import("../../geom/SimpleGeometry.js").default} geometry Geometry.
* @param {import("../../Feature.js").FeatureLike} feature Feature. * @param {import("../../Feature.js").FeatureLike} feature Feature.
* @param {Function} renderer Renderer. * @param {Function} renderer Renderer.
*/ * @param {Function} hitDetectionRenderer Renderer.
drawCustom(geometry, feature, renderer) { */
drawCustom(geometry, feature, renderer, hitDetectionRenderer) {
this.beginGeometry(geometry, feature); this.beginGeometry(geometry, feature);
const type = geometry.getType(); const type = geometry.getType();
const stride = geometry.getStride(); const stride = geometry.getStride();
const builderBegin = this.coordinates.length; const builderBegin = this.coordinates.length;
let flatCoordinates, builderEnd, builderEnds, builderEndss; let flatCoordinates, builderEnd, builderEnds, builderEndss;
let offset; let offset;
if (type == GeometryType.MULTI_POLYGON) {
flatCoordinates = switch(type) {
/** @type {import("../../geom/MultiPolygon.js").default} */ ( case GeometryType.MULTI_POLYGON:
geometry flatCoordinates =
).getOrientedFlatCoordinates(); /** @type {import("../../geom/MultiPolygon.js").default} */ (
builderEndss = []; geometry
const endss = ).getOrientedFlatCoordinates();
/** @type {import("../../geom/MultiPolygon.js").default} */ ( builderEndss = [];
geometry const endss =
).getEndss(); /** @type {import("../../geom/MultiPolygon.js").default} */ (
offset = 0; geometry
for (let i = 0, ii = endss.length; i < ii; ++i) { ).getEndss();
const myEnds = []; offset = 0;
for (let i = 0, ii = endss.length; i < ii; ++i) {
const myEnds = [];
offset = this.drawCustomCoordinates_(
flatCoordinates,
offset,
endss[i],
stride,
myEnds
);
builderEndss.push(myEnds);
}
this.instructions.push([
CanvasInstruction.CUSTOM,
builderBegin,
builderEndss,
geometry,
renderer,
inflateMultiCoordinatesArray,
]);
this.hitDetectionInstructions.push([
CanvasInstruction.CUSTOM,
builderBegin,
builderEndss,
geometry,
hitDetectionRenderer || renderer,
inflateMultiCoordinatesArray]);
break;
case GeometryType.POLYGON:
case GeometryType.MULTI_LINE_STRING:
builderEnds = [];
flatCoordinates =
type == GeometryType.POLYGON
? /** @type {import("../../geom/Polygon.js").default} */ (
geometry
).getOrientedFlatCoordinates()
: geometry.getFlatCoordinates();
offset = this.drawCustomCoordinates_( offset = this.drawCustomCoordinates_(
flatCoordinates, flatCoordinates,
offset, 0,
endss[i], /** @type {import("../../geom/Polygon.js").default|import("../../geom/MultiLineString.js").default} */ (
geometry
).getEnds(),
stride, stride,
myEnds builderEnds
);
this.instructions.push([
CanvasInstruction.CUSTOM,
builderBegin,
builderEnds,
geometry,
renderer,
inflateCoordinatesArray,
]);
this.hitDetectionInstructions.push([
CanvasInstruction.CUSTOM,
builderBegin,
builderEnds,
geometry,
hitDetectionRenderer || renderer,
inflateCoordinatesArray
]);
break;
case GeometryType.LINE_STRING:
case GeometryType.CIRCLE:
flatCoordinates = geometry.getFlatCoordinates();
builderEnd = this.appendFlatLineCoordinates(
flatCoordinates,
0,
flatCoordinates.length,
stride,
false,
false
); );
builderEndss.push(myEnds);
}
this.instructions.push([
CanvasInstruction.CUSTOM,
builderBegin,
builderEndss,
geometry,
renderer,
inflateMultiCoordinatesArray,
]);
} else if (
type == GeometryType.POLYGON ||
type == GeometryType.MULTI_LINE_STRING
) {
builderEnds = [];
flatCoordinates =
type == GeometryType.POLYGON
? /** @type {import("../../geom/Polygon.js").default} */ (
geometry
).getOrientedFlatCoordinates()
: geometry.getFlatCoordinates();
offset = this.drawCustomCoordinates_(
flatCoordinates,
0,
/** @type {import("../../geom/Polygon.js").default|import("../../geom/MultiLineString.js").default} */ (
geometry
).getEnds(),
stride,
builderEnds
);
this.instructions.push([
CanvasInstruction.CUSTOM,
builderBegin,
builderEnds,
geometry,
renderer,
inflateCoordinatesArray,
]);
} else if (
type == GeometryType.LINE_STRING ||
type == GeometryType.CIRCLE
) {
flatCoordinates = geometry.getFlatCoordinates();
builderEnd = this.appendFlatLineCoordinates(
flatCoordinates,
0,
flatCoordinates.length,
stride,
false,
false
);
this.instructions.push([
CanvasInstruction.CUSTOM,
builderBegin,
builderEnd,
geometry,
renderer,
inflateCoordinates,
]);
} else if (type == GeometryType.MULTI_POINT) {
flatCoordinates = geometry.getFlatCoordinates();
builderEnd = this.appendFlatPointCoordinates(flatCoordinates, stride);
if (builderEnd > builderBegin) {
this.instructions.push([ this.instructions.push([
CanvasInstruction.CUSTOM, CanvasInstruction.CUSTOM,
builderBegin, builderBegin,
@@ -346,27 +352,67 @@ class CanvasBuilder extends VectorContext {
renderer, renderer,
inflateCoordinates, inflateCoordinates,
]); ]);
} this.hitDetectionInstructions.push([
} else if (type == GeometryType.POINT) { CanvasInstruction.CUSTOM,
flatCoordinates = geometry.getFlatCoordinates(); builderBegin,
this.coordinates.push(flatCoordinates[0], flatCoordinates[1]); builderEnd,
builderEnd = this.coordinates.length; geometry,
this.instructions.push([ hitDetectionRenderer || renderer,
CanvasInstruction.CUSTOM, inflateCoordinates,
builderBegin, ]);
builderEnd, break;
geometry, case GeometryType.MULTI_POINT:
renderer, flatCoordinates = geometry.getFlatCoordinates();
]); builderEnd = this.appendFlatPointCoordinates(flatCoordinates, stride);
if (builderEnd > builderBegin) {
this.instructions.push([
CanvasInstruction.CUSTOM,
builderBegin,
builderEnd,
geometry,
renderer,
inflateCoordinates,
]);
this.hitDetectionInstructions.push([
CanvasInstruction.CUSTOM,
builderBegin,
builderEnd,
geometry,
hitDetectionRenderer || renderer,
inflateCoordinates,
]);
}
break;
case type == GeometryType.POINT:
flatCoordinates = geometry.getFlatCoordinates();
this.coordinates.push(flatCoordinates[0], flatCoordinates[1]);
builderEnd = this.coordinates.length;
this.instructions.push([
CanvasInstruction.CUSTOM,
builderBegin,
builderEnd,
geometry,
renderer,
]);
this.hitDetectionInstructions.push([
CanvasInstruction.CUSTOM,
builderBegin,
builderEnd,
geometry,
hitDetectionRenderer || renderer,
]);
break;
} }
this.endGeometry(feature); this.endGeometry(feature);
} }
/** /**
* @protected * @protected
* @param {import("../../geom/Geometry").default|import("../Feature.js").default} geometry The geometry. * @param {import("../../geom/Geometry").default|import("../Feature.js").default} geometry The geometry.
* @param {import("../../Feature.js").FeatureLike} feature Feature. * @param {import("../../Feature.js").FeatureLike} feature Feature.
*/ */
beginGeometry(geometry, feature) { beginGeometry(geometry, feature) {
this.beginGeometryInstruction1_ = [ this.beginGeometryInstruction1_ = [
CanvasInstruction.BEGIN_GEOMETRY, CanvasInstruction.BEGIN_GEOMETRY,
@@ -385,8 +431,8 @@ class CanvasBuilder extends VectorContext {
} }
/** /**
* @return {import("../canvas.js").SerializableInstructions} the serializable instructions. * @return {import("../canvas.js").SerializableInstructions} the serializable instructions.
*/ */
finish() { finish() {
return { return {
instructions: this.instructions, instructions: this.instructions,
@@ -396,8 +442,8 @@ class CanvasBuilder extends VectorContext {
} }
/** /**
* Reverse the hit detection instructions. * Reverse the hit detection instructions.
*/ */
reverseHitDetectionInstructions() { reverseHitDetectionInstructions() {
const hitDetectionInstructions = this.hitDetectionInstructions; const hitDetectionInstructions = this.hitDetectionInstructions;
// step 1 - reverse array // step 1 - reverse array
@@ -422,9 +468,9 @@ class CanvasBuilder extends VectorContext {
} }
/** /**
* @param {import("../../style/Fill.js").default} fillStyle Fill style. * @param {import("../../style/Fill.js").default} fillStyle Fill style.
* @param {import("../../style/Stroke.js").default} strokeStyle Stroke style. * @param {import("../../style/Stroke.js").default} strokeStyle Stroke style.
*/ */
setFillStrokeStyle(fillStyle, strokeStyle) { setFillStrokeStyle(fillStyle, strokeStyle) {
const state = this.state; const state = this.state;
if (fillStyle) { if (fillStyle) {
@@ -482,9 +528,9 @@ class CanvasBuilder extends VectorContext {
} }
/** /**
* @param {import("../canvas.js").FillStrokeState} state State. * @param {import("../canvas.js").FillStrokeState} state State.
* @return {Array<*>} Fill instruction. * @return {Array<*>} Fill instruction.
*/ */
createFill(state) { createFill(state) {
const fillStyle = state.fillStyle; const fillStyle = state.fillStyle;
/** @type {Array<*>} */ /** @type {Array<*>} */
@@ -497,16 +543,16 @@ class CanvasBuilder extends VectorContext {
} }
/** /**
* @param {import("../canvas.js").FillStrokeState} state State. * @param {import("../canvas.js").FillStrokeState} state State.
*/ */
applyStroke(state) { applyStroke(state) {
this.instructions.push(this.createStroke(state)); this.instructions.push(this.createStroke(state));
} }
/** /**
* @param {import("../canvas.js").FillStrokeState} state State. * @param {import("../canvas.js").FillStrokeState} state State.
* @return {Array<*>} Stroke instruction. * @return {Array<*>} Stroke instruction.
*/ */
createStroke(state) { createStroke(state) {
return [ return [
CanvasInstruction.SET_STROKE_STYLE, CanvasInstruction.SET_STROKE_STYLE,
@@ -521,9 +567,9 @@ class CanvasBuilder extends VectorContext {
} }
/** /**
* @param {import("../canvas.js").FillStrokeState} state State. * @param {import("../canvas.js").FillStrokeState} state State.
* @param {function(this:CanvasBuilder, import("../canvas.js").FillStrokeState):Array<*>} createFill Create fill. * @param {function(this:CanvasBuilder, import("../canvas.js").FillStrokeState):Array<*>} createFill Create fill.
*/ */
updateFillStyle(state, createFill) { updateFillStyle(state, createFill) {
const fillStyle = state.fillStyle; const fillStyle = state.fillStyle;
if (typeof fillStyle !== 'string' || state.currentFillStyle != fillStyle) { if (typeof fillStyle !== 'string' || state.currentFillStyle != fillStyle) {
@@ -535,9 +581,9 @@ class CanvasBuilder extends VectorContext {
} }
/** /**
* @param {import("../canvas.js").FillStrokeState} state State. * @param {import("../canvas.js").FillStrokeState} state State.
* @param {function(this:CanvasBuilder, import("../canvas.js").FillStrokeState): void} applyStroke Apply stroke. * @param {function(this:CanvasBuilder, import("../canvas.js").FillStrokeState): void} applyStroke Apply stroke.
*/ */
updateStrokeStyle(state, applyStroke) { updateStrokeStyle(state, applyStroke) {
const strokeStyle = state.strokeStyle; const strokeStyle = state.strokeStyle;
const lineCap = state.lineCap; const lineCap = state.lineCap;
@@ -570,8 +616,8 @@ class CanvasBuilder extends VectorContext {
} }
/** /**
* @param {import("../../Feature.js").FeatureLike} feature Feature. * @param {import("../../Feature.js").FeatureLike} feature Feature.
*/ */
endGeometry(feature) { endGeometry(feature) {
this.beginGeometryInstruction1_[2] = this.instructions.length; this.beginGeometryInstruction1_[2] = this.instructions.length;
this.beginGeometryInstruction1_ = null; this.beginGeometryInstruction1_ = null;
@@ -583,12 +629,12 @@ class CanvasBuilder extends VectorContext {
} }
/** /**
* Get the buffered rendering extent. Rendering will be clipped to the extent * Get the buffered rendering extent. Rendering will be clipped to the extent
* provided to the constructor. To account for symbolizers that may intersect * provided to the constructor. To account for symbolizers that may intersect
* this extent, we calculate a buffered extent (e.g. based on stroke width). * this extent, we calculate a buffered extent (e.g. based on stroke width).
* @return {import("../../extent.js").Extent} The buffered rendering extent. * @return {import("../../extent.js").Extent} The buffered rendering extent.
* @protected * @protected
*/ */
getBufferedMaxExtent() { getBufferedMaxExtent() {
if (!this.bufferedMaxExtent_) { if (!this.bufferedMaxExtent_) {
this.bufferedMaxExtent_ = clone(this.maxExtent); this.bufferedMaxExtent_ = clone(this.maxExtent);

3
src/ol/renderer/vector.js
View File

@@ -208,7 +208,8 @@ function renderGeometry(replayGroup, geometry, style, feature) {
replay.drawCustom( replay.drawCustom(
/** @type {import("../geom/SimpleGeometry.js").default} */ (geometry), /** @type {import("../geom/SimpleGeometry.js").default} */ (geometry),
feature, feature,
style.getRenderer() style.getRenderer(),
style.getHitDetectionRenderer()
); );
} }

523
src/ol/style/Style.js
View File

@@ -9,159 +9,161 @@ import Stroke from './Stroke.js';
import {assert} from '../asserts.js'; import {assert} from '../asserts.js';
/** /**
* A function that takes an {@link module:ol/Feature} and a `{number}` * A function that takes an {@link module:ol/Feature} and a `{number}`
* representing the view's resolution. The function should return a * representing the view's resolution. The function should return a
* {@link module:ol/style/Style} or an array of them. This way e.g. a * {@link module:ol/style/Style} or an array of them. This way e.g. a
* vector layer can be styled. If the function returns `undefined`, the * vector layer can be styled. If the function returns `undefined`, the
* feature will not be rendered. * feature will not be rendered.
* *
* @typedef {function(import("../Feature.js").FeatureLike, number):(Style|Array<Style>|void)} StyleFunction * @typedef {function(import("../Feature.js").FeatureLike, number):(Style|Array<Style>|void)} StyleFunction
*/ */
/** /**
* A {@link Style}, an array of {@link Style}, or a {@link StyleFunction}. * A {@link Style}, an array of {@link Style}, or a {@link StyleFunction}.
* @typedef {Style|Array<Style>|StyleFunction} StyleLike * @typedef {Style|Array<Style>|StyleFunction} StyleLike
*/ */
/** /**
* A function that takes an {@link module:ol/Feature} as argument and returns an * A function that takes an {@link module:ol/Feature} as argument and returns an
* {@link module:ol/geom/Geometry} that will be rendered and styled for the feature. * {@link module:ol/geom/Geometry} that will be rendered and styled for the feature.
* *
* @typedef {function(import("../Feature.js").FeatureLike): * @typedef {function(import("../Feature.js").FeatureLike):
* (import("../geom/Geometry.js").default|import("../render/Feature.js").default|undefined)} GeometryFunction * (import("../geom/Geometry.js").default|import("../render/Feature.js").default|undefined)} GeometryFunction
*/ */
/** /**
* Custom renderer function. Takes two arguments: * Custom renderer function. Takes two arguments:
* *
* 1. The pixel coordinates of the geometry in GeoJSON notation. * 1. The pixel coordinates of the geometry in GeoJSON notation.
* 2. The {@link module:ol/render~State} of the layer renderer. * 2. The {@link module:ol/render~State} of the layer renderer.
* *
* @typedef {function((import("../coordinate.js").Coordinate|Array<import("../coordinate.js").Coordinate>|Array<Array<import("../coordinate.js").Coordinate>>),import("../render.js").State): void} * @typedef {function((import("../coordinate.js").Coordinate|Array<import("../coordinate.js").Coordinate>|Array<Array<import("../coordinate.js").Coordinate>>),import("../render.js").State): void}
* RenderFunction * RenderFunction
*/ */
/** /**
* @typedef {Object} Options * @typedef {Object} Options
* @property {string|import("../geom/Geometry.js").default|GeometryFunction} [geometry] Feature property or geometry * @property {string|import("../geom/Geometry.js").default|GeometryFunction} [geometry] Feature property or geometry
* or function returning a geometry to render for this style. * or function returning a geometry to render for this style.
* @property {import("./Fill.js").default} [fill] Fill style. * @property {import("./Fill.js").default} [fill] Fill style.
* @property {import("./Image.js").default} [image] Image style. * @property {import("./Image.js").default} [image] Image style.
* @property {RenderFunction} [renderer] Custom renderer. When configured, `fill`, `stroke` and `image` will be * @property {RenderFunction} [renderer] Custom renderer. When configured, `fill`, `stroke` and `image` will be
* ignored, and the provided function will be called with each render frame for each geometry. * ignored, and the provided function will be called with each render frame for each geometry.
* @property {import("./Stroke.js").default} [stroke] Stroke style. * @property {RenderFunction} [hitDetectionRenderer] Custom renderer for hit detection. If provided will be used
* @property {import("./Text.js").default} [text] Text style. * in hit detection rendering.
* @property {number} [zIndex] Z index. * @property {import("./Stroke.js").default} [stroke] Stroke style.
*/ * @property {import("./Text.js").default} [text] Text style.
* @property {number} [zIndex] Z index.
*/
/** /**
* @classdesc * @classdesc
* Container for vector feature rendering styles. Any changes made to the style * Container for vector feature rendering styles. Any changes made to the style
* or its children through `set*()` methods will not take effect until the * or its children through `set*()` methods will not take effect until the
* feature or layer that uses the style is re-rendered. * feature or layer that uses the style is re-rendered.
* *
* ## Feature styles * ## Feature styles
* *
* If no style is defined, the following default style is used: * If no style is defined, the following default style is used:
* ```js * ```js
* import {Fill, Stroke, Circle, Style} from 'ol/style'; * import {Fill, Stroke, Circle, Style} from 'ol/style';
* *
* var fill = new Fill({ * var fill = new Fill({
* color: 'rgba(255,255,255,0.4)' * color: 'rgba(255,255,255,0.4)'
* }); * });
* var stroke = new Stroke({ * var stroke = new Stroke({
* color: '#3399CC', * color: '#3399CC',
* width: 1.25 * width: 1.25
* }); * });
* var styles = [ * var styles = [
* new Style({ * new Style({
* image: new Circle({ * image: new Circle({
* fill: fill, * fill: fill,
* stroke: stroke, * stroke: stroke,
* radius: 5 * radius: 5
* }), * }),
* fill: fill, * fill: fill,
* stroke: stroke * stroke: stroke
* }) * })
* ]; * ];
* ``` * ```
* *
* A separate editing style has the following defaults: * A separate editing style has the following defaults:
* ```js * ```js
* import {Fill, Stroke, Circle, Style} from 'ol/style'; * import {Fill, Stroke, Circle, Style} from 'ol/style';
* import GeometryType from 'ol/geom/GeometryType'; * import GeometryType from 'ol/geom/GeometryType';
* *
* var white = [255, 255, 255, 1]; * var white = [255, 255, 255, 1];
* var blue = [0, 153, 255, 1]; * var blue = [0, 153, 255, 1];
* var width = 3; * var width = 3;
* styles[GeometryType.POLYGON] = [ * styles[GeometryType.POLYGON] = [
* new Style({ * new Style({
* fill: new Fill({ * fill: new Fill({
* color: [255, 255, 255, 0.5] * color: [255, 255, 255, 0.5]
* }) * })
* }) * })
* ]; * ];
* styles[GeometryType.MULTI_POLYGON] = * styles[GeometryType.MULTI_POLYGON] =
* styles[GeometryType.POLYGON]; * styles[GeometryType.POLYGON];
* styles[GeometryType.LINE_STRING] = [ * styles[GeometryType.LINE_STRING] = [
* new Style({ * new Style({
* stroke: new Stroke({ * stroke: new Stroke({
* color: white, * color: white,
* width: width + 2 * width: width + 2
* }) * })
* }), * }),
* new Style({ * new Style({
* stroke: new Stroke({ * stroke: new Stroke({
* color: blue, * color: blue,
* width: width * width: width
* }) * })
* }) * })
* ]; * ];
* styles[GeometryType.MULTI_LINE_STRING] = * styles[GeometryType.MULTI_LINE_STRING] =
* styles[GeometryType.LINE_STRING]; * styles[GeometryType.LINE_STRING];
* styles[GeometryType.POINT] = [ * styles[GeometryType.POINT] = [
* new Style({ * new Style({
* image: new Circle({ * image: new Circle({
* radius: width * 2, * radius: width * 2,
* fill: new Fill({ * fill: new Fill({
* color: blue * color: blue
* }), * }),
* stroke: new Stroke({ * stroke: new Stroke({
* color: white, * color: white,
* width: width / 2 * width: width / 2
* }) * })
* }), * }),
* zIndex: Infinity * zIndex: Infinity
* }) * })
* ]; * ];
* styles[GeometryType.MULTI_POINT] = * styles[GeometryType.MULTI_POINT] =
* styles[GeometryType.POINT]; * styles[GeometryType.POINT];
* styles[GeometryType.GEOMETRY_COLLECTION] = * styles[GeometryType.GEOMETRY_COLLECTION] =
* styles[GeometryType.POLYGON].concat( * styles[GeometryType.POLYGON].concat(
* styles[GeometryType.LINE_STRING], * styles[GeometryType.LINE_STRING],
* styles[GeometryType.POINT] * styles[GeometryType.POINT]
* ); * );
* ``` * ```
* *
* @api * @api
*/ */
class Style { class Style {
/** /**
* @param {Options} [opt_options] Style options. * @param {Options} [opt_options] Style options.
*/ */
constructor(opt_options) { constructor(opt_options) {
const options = opt_options || {}; const options = opt_options || {};
/** /**
* @private * @private
* @type {string|import("../geom/Geometry.js").default|GeometryFunction} * @type {string|import("../geom/Geometry.js").default|GeometryFunction}
*/ */
this.geometry_ = null; this.geometry_ = null;
/** /**
* @private * @private
* @type {!GeometryFunction} * @type {!GeometryFunction}
*/ */
this.geometryFunction_ = defaultGeometryFunction; this.geometryFunction_ = defaultGeometryFunction;
if (options.geometry !== undefined) { if (options.geometry !== undefined) {
@@ -169,47 +171,53 @@ class Style {
} }
/** /**
* @private * @private
* @type {import("./Fill.js").default} * @type {import("./Fill.js").default}
*/ */
this.fill_ = options.fill !== undefined ? options.fill : null; this.fill_ = options.fill !== undefined ? options.fill : null;
/** /**
* @private * @private
* @type {import("./Image.js").default} * @type {import("./Image.js").default}
*/ */
this.image_ = options.image !== undefined ? options.image : null; this.image_ = options.image !== undefined ? options.image : null;
/** /**
* @private * @private
* @type {RenderFunction|null} * @type {RenderFunction|null}
*/ */
this.renderer_ = options.renderer !== undefined ? options.renderer : null; this.renderer_ = options.renderer !== undefined ? options.renderer : null;
/** /**
* @private * @private
* @type {import("./Stroke.js").default} * @type {RenderFunction|null}
*/ */
this.hitDetectionRenderer_ = options.hitDetectionRenderer !== undefined ? options.hitDetectionRenderer : null;
/**
* @private
* @type {import("./Stroke.js").default}
*/
this.stroke_ = options.stroke !== undefined ? options.stroke : null; this.stroke_ = options.stroke !== undefined ? options.stroke : null;
/** /**
* @private * @private
* @type {import("./Text.js").default} * @type {import("./Text.js").default}
*/ */
this.text_ = options.text !== undefined ? options.text : null; this.text_ = options.text !== undefined ? options.text : null;
/** /**
* @private * @private
* @type {number|undefined} * @type {number|undefined}
*/ */
this.zIndex_ = options.zIndex; this.zIndex_ = options.zIndex;
} }
/** /**
* Clones the style. * Clones the style.
* @return {Style} The cloned style. * @return {Style} The cloned style.
* @api * @api
*/ */
clone() { clone() {
let geometry = this.getGeometry(); let geometry = this.getGeometry();
if (geometry && typeof geometry === 'object') { if (geometry && typeof geometry === 'object') {
@@ -229,135 +237,156 @@ class Style {
} }
/** /**
* Get the custom renderer function that was configured with * Get the custom renderer function that was configured with
* {@link #setRenderer} or the `renderer` constructor option. * {@link #setRenderer} or the `renderer` constructor option.
* @return {RenderFunction|null} Custom renderer function. * @return {RenderFunction|null} Custom renderer function.
* @api * @api
*/ */
getRenderer() { getRenderer() {
return this.renderer_; return this.renderer_;
} }
/** /**
* Sets a custom renderer function for this style. When set, `fill`, `stroke` * Sets a custom renderer function for this style. When set, `fill`, `stroke`
* and `image` options of the style will be ignored. * and `image` options of the style will be ignored.
* @param {RenderFunction|null} renderer Custom renderer function. * @param {RenderFunction|null} renderer Custom renderer function.
* @api * @api
*/ */
setRenderer(renderer) { setRenderer(renderer) {
this.renderer_ = renderer; this.renderer_ = renderer;
} }
/** /**
* Get the geometry to be rendered. * Sets a custom renderer function for this style used
* @return {string|import("../geom/Geometry.js").default|GeometryFunction} * in hit detection.
* Feature property or geometry or function that returns the geometry that will * @param {RenderFunction|null} renderer Custom renderer function.
* be rendered with this style. * @api
* @api */
*/ setHitDetectionRenderer(renderer) {
this.hitDetectionRenderer_ = renderer;
}
/**
* Get the custom renderer function that was configured with
* {@link #setHitDetectionRenderer} or the `hitDetectionRenderer` constructor option.
* @return {RenderFunction|null} Custom renderer function.
* @api
*/
getHitDetectionRenderer() {
return this.hitDetectionRenderer_;
}
/**
* Get the geometry to be rendered.
* @return {string|import("../geom/Geometry.js").default|GeometryFunction}
* Feature property or geometry or function that returns the geometry that will
* be rendered with this style.
* @api
*/
getGeometry() { getGeometry() {
return this.geometry_; return this.geometry_;
} }
/** /**
* Get the function used to generate a geometry for rendering. * Get the function used to generate a geometry for rendering.
* @return {!GeometryFunction} Function that is called with a feature * @return {!GeometryFunction} Function that is called with a feature
* and returns the geometry to render instead of the feature's geometry. * and returns the geometry to render instead of the feature's geometry.
* @api * @api
*/ */
getGeometryFunction() { getGeometryFunction() {
return this.geometryFunction_; return this.geometryFunction_;
} }
/** /**
* Get the fill style. * Get the fill style.
* @return {import("./Fill.js").default} Fill style. * @return {import("./Fill.js").default} Fill style.
* @api * @api
*/ */
getFill() { getFill() {
return this.fill_; return this.fill_;
} }
/** /**
* Set the fill style. * Set the fill style.
* @param {import("./Fill.js").default} fill Fill style. * @param {import("./Fill.js").default} fill Fill style.
* @api * @api
*/ */
setFill(fill) { setFill(fill) {
this.fill_ = fill; this.fill_ = fill;
} }
/** /**
* Get the image style. * Get the image style.
* @return {import("./Image.js").default} Image style. * @return {import("./Image.js").default} Image style.
* @api * @api
*/ */
getImage() { getImage() {
return this.image_; return this.image_;
} }
/** /**
* Set the image style. * Set the image style.
* @param {import("./Image.js").default} image Image style. * @param {import("./Image.js").default} image Image style.
* @api * @api
*/ */
setImage(image) { setImage(image) {
this.image_ = image; this.image_ = image;
} }
/** /**
* Get the stroke style. * Get the stroke style.
* @return {import("./Stroke.js").default} Stroke style. * @return {import("./Stroke.js").default} Stroke style.
* @api * @api
*/ */
getStroke() { getStroke() {
return this.stroke_; return this.stroke_;
} }
/** /**
* Set the stroke style. * Set the stroke style.
* @param {import("./Stroke.js").default} stroke Stroke style. * @param {import("./Stroke.js").default} stroke Stroke style.
* @api * @api
*/ */
setStroke(stroke) { setStroke(stroke) {
this.stroke_ = stroke; this.stroke_ = stroke;
} }
/** /**
* Get the text style. * Get the text style.
* @return {import("./Text.js").default} Text style. * @return {import("./Text.js").default} Text style.
* @api * @api
*/ */
getText() { getText() {
return this.text_; return this.text_;
} }
/** /**
* Set the text style. * Set the text style.
* @param {import("./Text.js").default} text Text style. * @param {import("./Text.js").default} text Text style.
* @api * @api
*/ */
setText(text) { setText(text) {
this.text_ = text; this.text_ = text;
} }
/** /**
* Get the z-index for the style. * Get the z-index for the style.
* @return {number|undefined} ZIndex. * @return {number|undefined} ZIndex.
* @api * @api
*/ */
getZIndex() { getZIndex() {
return this.zIndex_; return this.zIndex_;
} }
/** /**
* Set a geometry that is rendered instead of the feature's geometry. * Set a geometry that is rendered instead of the feature's geometry.
* *
* @param {string|import("../geom/Geometry.js").default|GeometryFunction} geometry * @param {string|import("../geom/Geometry.js").default|GeometryFunction} geometry
* Feature property or geometry or function returning a geometry to render * Feature property or geometry or function returning a geometry to render
* for this style. * for this style.
* @api * @api
*/ */
setGeometry(geometry) { setGeometry(geometry) {
if (typeof geometry === 'function') { if (typeof geometry === 'function') {
this.geometryFunction_ = geometry; this.geometryFunction_ = geometry;
@@ -378,24 +407,24 @@ class Style {
} }
/** /**
* Set the z-index. * Set the z-index.
* *
* @param {number|undefined} zIndex ZIndex. * @param {number|undefined} zIndex ZIndex.
* @api * @api
*/ */
setZIndex(zIndex) { setZIndex(zIndex) {
this.zIndex_ = zIndex; this.zIndex_ = zIndex;
} }
} }
/** /**
* Convert the provided object into a style function. Functions passed through * Convert the provided object into a style function. Functions passed through
* unchanged. Arrays of Style or single style objects wrapped in a * unchanged. Arrays of Style or single style objects wrapped in a
* new style function. * new style function.
* @param {StyleFunction|Array<Style>|Style} obj * @param {StyleFunction|Array<Style>|Style} obj
* A style function, a single style, or an array of styles. * A style function, a single style, or an array of styles.
* @return {StyleFunction} A style function. * @return {StyleFunction} A style function.
*/ */
export function toFunction(obj) { export function toFunction(obj) {
let styleFunction; let styleFunction;
@@ -403,8 +432,8 @@ export function toFunction(obj) {
styleFunction = obj; styleFunction = obj;
} else { } else {
/** /**
* @type {Array<Style>} * @type {Array<Style>}
*/ */
let styles; let styles;
if (Array.isArray(obj)) { if (Array.isArray(obj)) {
styles = obj; styles = obj;
@@ -421,15 +450,15 @@ export function toFunction(obj) {
} }
/** /**
* @type {Array<Style>} * @type {Array<Style>}
*/ */
let defaultStyles = null; let defaultStyles = null;
/** /**
* @param {import("../Feature.js").FeatureLike} feature Feature. * @param {import("../Feature.js").FeatureLike} feature Feature.
* @param {number} resolution Resolution. * @param {number} resolution Resolution.
* @return {Array<Style>} Style. * @return {Array<Style>} Style.
*/ */
export function createDefaultStyle(feature, resolution) { export function createDefaultStyle(feature, resolution) {
// We don't use an immediately-invoked function // We don't use an immediately-invoked function
// and a closure so we don't get an error at script evaluation time in // and a closure so we don't get an error at script evaluation time in
@@ -460,9 +489,9 @@ export function createDefaultStyle(feature, resolution) {
} }
/** /**
* Default styles for editing features. * Default styles for editing features.
* @return {Object<import("../geom/GeometryType.js").default, Array<Style>>} Styles * @return {Object<import("../geom/GeometryType.js").default, Array<Style>>} Styles
*/ */
export function createEditingStyle() { export function createEditingStyle() {
/** @type {Object<import("../geom/GeometryType.js").default, Array<Style>>} */ /** @type {Object<import("../geom/GeometryType.js").default, Array<Style>>} */
const styles = {}; const styles = {};
@@ -523,10 +552,10 @@ export function createEditingStyle() {
} }
/** /**
* Function that is called with a feature and returns its default geometry. * Function that is called with a feature and returns its default geometry.
* @param {import("../Feature.js").FeatureLike} feature Feature to get the geometry for. * @param {import("../Feature.js").FeatureLike} feature Feature to get the geometry for.
* @return {import("../geom/Geometry.js").default|import("../render/Feature.js").default|undefined} Geometry to render. * @return {import("../geom/Geometry.js").default|import("../render/Feature.js").default|undefined} Geometry to render.
*/ */
function defaultGeometryFunction(feature) { function defaultGeometryFunction(feature) {
return feature.getGeometry(); return feature.getGeometry();
} }