Add a constant for the hit-detection resolution

src/ol/render/canvas/hitdetect.js

@@ -11,6 +11,8 @@ import {createCanvasContext2D} from '../../dom.js';
 import {intersects} from '../../extent.js';
 import {numberSafeCompareFunction} from '../../array.js';
 
+export const HIT_DETECT_RESOLUTION = 0.5;
+
 /**
  * @param {import("../../size.js").Size} size Canvas size in css pixels.
  * @param {Array<import("../../transform.js").Transform>} transforms Transforms
@@ -34,14 +36,14 @@ export function createHitDetectionImageData(
   resolution,
   rotation
 ) {
-  const width = size[0] / 2;
+  const width = size[0] * HIT_DETECT_RESOLUTION;
-  const height = size[1] / 2;
+  const height = size[1] * HIT_DETECT_RESOLUTION;
   const context = createCanvasContext2D(width, height);
   context.imageSmoothingEnabled = false;
   const canvas = context.canvas;
   const renderer = new CanvasImmediateRenderer(
     context,
-    0.5,
+    HIT_DETECT_RESOLUTION,
     extent,
     null,
     rotation
@@ -163,13 +165,14 @@ export function createHitDetectionImageData(
 export function hitDetect(pixel, features, imageData) {
   const resultFeatures = [];
   if (imageData) {
+    const x = Math.floor(Math.round(pixel[0]) * HIT_DETECT_RESOLUTION);
+    const y = Math.floor(Math.round(pixel[1]) * HIT_DETECT_RESOLUTION);
     // The pixel coordinate is clamped down to the hit-detect canvas' size to account
     // for browsers returning coordinates slightly larger than the actual canvas size
     // due to a non-integer pixel ratio.
     const index =
-      (clamp(Math.floor(Math.round(pixel[0]) / 2), 0, imageData.width - 1) +
+      (clamp(x, 0, imageData.width - 1) +
-        clamp(Math.floor(Math.round(pixel[1]) / 2), 0, imageData.height - 1) *
+        clamp(y, 0, imageData.height - 1) * imageData.width) *
-          imageData.width) *
       4;
     const r = imageData.data[index];
     const g = imageData.data[index + 1];

src/ol/renderer/canvas/VectorLayer.js

@@ -5,6 +5,11 @@ import CanvasBuilderGroup from '../../render/canvas/BuilderGroup.js';
 import CanvasLayerRenderer from './Layer.js';
 import ExecutorGroup from '../../render/canvas/ExecutorGroup.js';
 import ViewHint from '../../ViewHint.js';
+import {
+  HIT_DETECT_RESOLUTION,
+  createHitDetectionImageData,
+  hitDetect,
+} from '../../render/canvas/hitdetect.js';
 import {
   apply,
   makeInverse,
@@ -19,10 +24,6 @@ import {
   intersects as intersectsExtent,
   wrapX as wrapExtentX,
 } from '../../extent.js';
-import {
-  createHitDetectionImageData,
-  hitDetect,
-} from '../../render/canvas/hitdetect.js';
 import {
   defaultOrder as defaultRenderOrder,
   getTolerance as getRenderTolerance,
@@ -325,14 +326,14 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
           const extent = this.renderedExtent_;
           const layer = this.getLayer();
           const transforms = [];
-          const width = size[0] / 2;
+          const width = size[0] * HIT_DETECT_RESOLUTION;
-          const height = size[1] / 2;
+          const height = size[1] * HIT_DETECT_RESOLUTION;
           transforms.push(
             this.getRenderTransform(
               center,
               resolution,
               rotation,
-              0.5,
+              HIT_DETECT_RESOLUTION,
               width,
               height,
               0
@@ -357,7 +358,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
                   center,
                   resolution,
                   rotation,
-                  0.5,
+                  HIT_DETECT_RESOLUTION,
                   width,
                   height,
                   offsetX
@@ -375,7 +376,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
                   center,
                   resolution,
                   rotation,
-                  0.5,
+                  HIT_DETECT_RESOLUTION,
                   width,
                   height,
                   offsetX

src/ol/renderer/canvas/VectorTileLayer.js

@@ -9,6 +9,11 @@ import ReplayType from '../../render/canvas/BuilderType.js';
 import TileState from '../../TileState.js';
 import VectorTileRenderType from '../../layer/VectorTileRenderType.js';
 import ViewHint from '../../ViewHint.js';
+import {
+  HIT_DETECT_RESOLUTION,
+  createHitDetectionImageData,
+  hitDetect,
+} from '../../render/canvas/hitdetect.js';
 import {
   apply as applyTransform,
   create as createTransform,
@@ -28,10 +33,6 @@ import {
   intersects,
 } from '../../extent.js';
 import {clear} from '../../obj.js';
-import {
-  createHitDetectionImageData,
-  hitDetect,
-} from '../../render/canvas/hitdetect.js';
 import {
   getSquaredTolerance as getSquaredRenderTolerance,
   renderFeature,
@@ -549,16 +550,15 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
           const tileSize = toSize(
             tileGrid.getTileSize(tileGrid.getZForResolution(resolution))
           );
-          const size = [tileSize[0] / 2, tileSize[1] / 2];
           const rotation = this.renderedRotation_;
           const transforms = [
             this.getRenderTransform(
               tileGrid.getTileCoordCenter(tile.wrappedTileCoord),
               resolution,
               0,
-              0.5,
+              HIT_DETECT_RESOLUTION,
-              size[0],
+              tileSize[0] * HIT_DETECT_RESOLUTION,
-              size[1],
+              tileSize[1] * HIT_DETECT_RESOLUTION,
               0
             ),
           ];