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

src/ol/render/VectorContext.js

@@ -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.

src/ol/render/canvas/Builder.js

@@ -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);
   }

src/ol/renderer/vector.js

@@ -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()
   );
 }
 

src/ol/style/Style.js

@@ -49,6 +49,8 @@ import {assert} from '../asserts.js';
 * @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.
@@ -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}