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("../Feature.js").FeatureLike} feature Feature.
* @param {Function} renderer Renderer.
* @param {Function} hitDetectionRenderer Renderer.
*/
drawCustom(geometry, feature, renderer) {}
drawCustom(geometry, feature, renderer, hitDetectionRenderer) {}
/**
* Render a geometry.

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

@@ -247,15 +247,20 @@ class CanvasBuilder extends VectorContext {
* @param {import("../../geom/SimpleGeometry.js").default} geometry Geometry.
* @param {import("../../Feature.js").FeatureLike} feature Feature.
* @param {Function} renderer Renderer.
* @param {Function} hitDetectionRenderer Renderer.
*/
drawCustom(geometry, feature, renderer) {
drawCustom(geometry, feature, renderer, hitDetectionRenderer) {
this.beginGeometry(geometry, feature);
const type = geometry.getType();
const stride = geometry.getStride();
const builderBegin = this.coordinates.length;
let flatCoordinates, builderEnd, builderEnds, builderEndss;
let offset;
if (type == GeometryType.MULTI_POLYGON) {
switch(type) {
case GeometryType.MULTI_POLYGON:
flatCoordinates =
/** @type {import("../../geom/MultiPolygon.js").default} */ (
geometry
@@ -285,10 +290,16 @@ class CanvasBuilder extends VectorContext {
renderer,
inflateMultiCoordinatesArray,
]);
} else if (
type == GeometryType.POLYGON ||
type == GeometryType.MULTI_LINE_STRING
) {
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
@@ -313,10 +324,17 @@ class CanvasBuilder extends VectorContext {
renderer,
inflateCoordinatesArray,
]);
} else if (
type == GeometryType.LINE_STRING ||
type == GeometryType.CIRCLE
) {
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,
@@ -334,9 +352,19 @@ class CanvasBuilder extends VectorContext {
renderer,
inflateCoordinates,
]);
} else if (type == GeometryType.MULTI_POINT) {
this.hitDetectionInstructions.push([
CanvasInstruction.CUSTOM,
builderBegin,
builderEnd,
geometry,
hitDetectionRenderer || renderer,
inflateCoordinates,
]);
break;
case GeometryType.MULTI_POINT:
flatCoordinates = geometry.getFlatCoordinates();
builderEnd = this.appendFlatPointCoordinates(flatCoordinates, stride);
if (builderEnd > builderBegin) {
this.instructions.push([
CanvasInstruction.CUSTOM,
@@ -346,11 +374,21 @@ class CanvasBuilder extends VectorContext {
renderer,
inflateCoordinates,
]);
this.hitDetectionInstructions.push([
CanvasInstruction.CUSTOM,
builderBegin,
builderEnd,
geometry,
hitDetectionRenderer || renderer,
inflateCoordinates,
]);
}
} else if (type == GeometryType.POINT) {
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,
@@ -358,6 +396,14 @@ class CanvasBuilder extends VectorContext {
geometry,
renderer,
]);
this.hitDetectionInstructions.push([
CanvasInstruction.CUSTOM,
builderBegin,
builderEnd,
geometry,
hitDetectionRenderer || renderer,
]);
break;
}
this.endGeometry(feature);
}

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

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

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

@@ -9,142 +9,144 @@ import Stroke from './Stroke.js';
import {assert} from '../asserts.js';
/**
* A function that takes an {@link module:ol/Feature} and a `{number}`
* 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
* vector layer can be styled. If the function returns `undefined`, the
* feature will not be rendered.
*
* @typedef {function(import("../Feature.js").FeatureLike, number):(Style|Array<Style>|void)} StyleFunction
*/
* A function that takes an {@link module:ol/Feature} and a `{number}`
* 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
* vector layer can be styled. If the function returns `undefined`, the
* feature will not be rendered.
*
* @typedef {function(import("../Feature.js").FeatureLike, number):(Style|Array<Style>|void)} StyleFunction
*/
/**
* A {@link Style}, an array of {@link Style}, or a {@link StyleFunction}.
* @typedef {Style|Array<Style>|StyleFunction} StyleLike
*/
* A {@link Style}, an array of {@link Style}, or a {@link StyleFunction}.
* @typedef {Style|Array<Style>|StyleFunction} StyleLike
*/
/**
* 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.
*
* @typedef {function(import("../Feature.js").FeatureLike):
* (import("../geom/Geometry.js").default|import("../render/Feature.js").default|undefined)} GeometryFunction
*/
* 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.
*
* @typedef {function(import("../Feature.js").FeatureLike):
* (import("../geom/Geometry.js").default|import("../render/Feature.js").default|undefined)} GeometryFunction
*/
/**
* Custom renderer function. Takes two arguments:
*
* 1. The pixel coordinates of the geometry in GeoJSON notation.
* 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}
* RenderFunction
*/
* Custom renderer function. Takes two arguments:
*
* 1. The pixel coordinates of the geometry in GeoJSON notation.
* 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}
* RenderFunction
*/
/**
* @typedef {Object} Options
* @property {string|import("../geom/Geometry.js").default|GeometryFunction} [geometry] Feature property or geometry
* or function returning a geometry to render for this style.
* @property {import("./Fill.js").default} [fill] Fill style.
* @property {import("./Image.js").default} [image] Image style.
* @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.
* @property {import("./Stroke.js").default} [stroke] Stroke style.
* @property {import("./Text.js").default} [text] Text style.
* @property {number} [zIndex] Z index.
*/
* @typedef {Object} Options
* @property {string|import("../geom/Geometry.js").default|GeometryFunction} [geometry] Feature property or geometry
* or function returning a geometry to render for this style.
* @property {import("./Fill.js").default} [fill] Fill style.
* @property {import("./Image.js").default} [image] Image style.
* @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.
* @property {RenderFunction} [hitDetectionRenderer] Custom renderer for hit detection. If provided will be used
* in hit detection rendering.
* @property {import("./Stroke.js").default} [stroke] Stroke style.
* @property {import("./Text.js").default} [text] Text style.
* @property {number} [zIndex] Z index.
*/
/**
* @classdesc
* Container for vector feature rendering styles. Any changes made to the style
* or its children through `set*()` methods will not take effect until the
* feature or layer that uses the style is re-rendered.
*
* ## Feature styles
*
* If no style is defined, the following default style is used:
* ```js
* import {Fill, Stroke, Circle, Style} from 'ol/style';
*
* var fill = new Fill({
* color: 'rgba(255,255,255,0.4)'
* });
* var stroke = new Stroke({
* color: '#3399CC',
* width: 1.25
* });
* var styles = [
* new Style({
* image: new Circle({
* fill: fill,
* stroke: stroke,
* radius: 5
* }),
* fill: fill,
* stroke: stroke
* })
* ];
* ```
*
* A separate editing style has the following defaults:
* ```js
* import {Fill, Stroke, Circle, Style} from 'ol/style';
* import GeometryType from 'ol/geom/GeometryType';
*
* var white = [255, 255, 255, 1];
* var blue = [0, 153, 255, 1];
* var width = 3;
* styles[GeometryType.POLYGON] = [
* new Style({
* fill: new Fill({
* color: [255, 255, 255, 0.5]
* })
* })
* ];
* styles[GeometryType.MULTI_POLYGON] =
* styles[GeometryType.POLYGON];
* styles[GeometryType.LINE_STRING] = [
* new Style({
* stroke: new Stroke({
* color: white,
* width: width + 2
* })
* }),
* new Style({
* stroke: new Stroke({
* color: blue,
* width: width
* })
* })
* ];
* styles[GeometryType.MULTI_LINE_STRING] =
* styles[GeometryType.LINE_STRING];
* styles[GeometryType.POINT] = [
* new Style({
* image: new Circle({
* radius: width * 2,
* fill: new Fill({
* color: blue
* }),
* stroke: new Stroke({
* color: white,
* width: width / 2
* })
* }),
* zIndex: Infinity
* })
* ];
* styles[GeometryType.MULTI_POINT] =
* styles[GeometryType.POINT];
* styles[GeometryType.GEOMETRY_COLLECTION] =
* styles[GeometryType.POLYGON].concat(
* styles[GeometryType.LINE_STRING],
* styles[GeometryType.POINT]
* );
* ```
*
* @api
*/
* @classdesc
* Container for vector feature rendering styles. Any changes made to the style
* or its children through `set*()` methods will not take effect until the
* feature or layer that uses the style is re-rendered.
*
* ## Feature styles
*
* If no style is defined, the following default style is used:
* ```js
* import {Fill, Stroke, Circle, Style} from 'ol/style';
*
* var fill = new Fill({
* color: 'rgba(255,255,255,0.4)'
* });
* var stroke = new Stroke({
* color: '#3399CC',
* width: 1.25
* });
* var styles = [
* new Style({
* image: new Circle({
* fill: fill,
* stroke: stroke,
* radius: 5
* }),
* fill: fill,
* stroke: stroke
* })
* ];
* ```
*
* A separate editing style has the following defaults:
* ```js
* import {Fill, Stroke, Circle, Style} from 'ol/style';
* import GeometryType from 'ol/geom/GeometryType';
*
* var white = [255, 255, 255, 1];
* var blue = [0, 153, 255, 1];
* var width = 3;
* styles[GeometryType.POLYGON] = [
* new Style({
* fill: new Fill({
* color: [255, 255, 255, 0.5]
* })
* })
* ];
* styles[GeometryType.MULTI_POLYGON] =
* styles[GeometryType.POLYGON];
* styles[GeometryType.LINE_STRING] = [
* new Style({
* stroke: new Stroke({
* color: white,
* width: width + 2
* })
* }),
* new Style({
* stroke: new Stroke({
* color: blue,
* width: width
* })
* })
* ];
* styles[GeometryType.MULTI_LINE_STRING] =
* styles[GeometryType.LINE_STRING];
* styles[GeometryType.POINT] = [
* new Style({
* image: new Circle({
* radius: width * 2,
* fill: new Fill({
* color: blue
* }),
* stroke: new Stroke({
* color: white,
* width: width / 2
* })
* }),
* zIndex: Infinity
* })
* ];
* styles[GeometryType.MULTI_POINT] =
* styles[GeometryType.POINT];
* styles[GeometryType.GEOMETRY_COLLECTION] =
* styles[GeometryType.POLYGON].concat(
* styles[GeometryType.LINE_STRING],
* styles[GeometryType.POINT]
* );
* ```
*
* @api
*/
class Style {
/**
* @param {Options} [opt_options] Style options.
@@ -186,6 +188,12 @@ class Style {
*/
this.renderer_ = options.renderer !== undefined ? options.renderer : null;
/**
* @private
* @type {RenderFunction|null}
*/
this.hitDetectionRenderer_ = options.hitDetectionRenderer !== undefined ? options.hitDetectionRenderer : null;
/**
* @private
* @type {import("./Stroke.js").default}
@@ -248,6 +256,27 @@ class Style {
this.renderer_ = renderer;
}
/**
* Sets a custom renderer function for this style used
* in hit detection.
* @param {RenderFunction|null} renderer Custom renderer function.
* @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}
@@ -389,13 +418,13 @@ class Style {
}
/**
* Convert the provided object into a style function. Functions passed through
* unchanged. Arrays of Style or single style objects wrapped in a
* new style function.
* @param {StyleFunction|Array<Style>|Style} obj
* A style function, a single style, or an array of styles.
* @return {StyleFunction} A style function.
*/
* Convert the provided object into a style function. Functions passed through
* unchanged. Arrays of Style or single style objects wrapped in a
* new style function.
* @param {StyleFunction|Array<Style>|Style} obj
* A style function, a single style, or an array of styles.
* @return {StyleFunction} A style function.
*/
export function toFunction(obj) {
let styleFunction;
@@ -421,15 +450,15 @@ export function toFunction(obj) {
}
/**
* @type {Array<Style>}
*/
* @type {Array<Style>}
*/
let defaultStyles = null;
/**
* @param {import("../Feature.js").FeatureLike} feature Feature.
* @param {number} resolution Resolution.
* @return {Array<Style>} Style.
*/
* @param {import("../Feature.js").FeatureLike} feature Feature.
* @param {number} resolution Resolution.
* @return {Array<Style>} Style.
*/
export function createDefaultStyle(feature, resolution) {
// We don't use an immediately-invoked function
// 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.
* @return {Object<import("../geom/GeometryType.js").default, Array<Style>>} Styles
*/
* Default styles for editing features.
* @return {Object<import("../geom/GeometryType.js").default, Array<Style>>} Styles
*/
export function createEditingStyle() {
/** @type {Object<import("../geom/GeometryType.js").default, Array<Style>>} */
const styles = {};
@@ -523,10 +552,10 @@ export function createEditingStyle() {
}
/**
* Function that is called with a feature and returns its default geometry.
* @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.
*/
* Function that is called with a feature and returns its default geometry.
* @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.
*/
function defaultGeometryFunction(feature) {
return feature.getGeometry();
}