New Layer#getFeatures method with fast hit detection for VectorLayer

src/ol/renderer/Layer.js

@@ -30,6 +30,16 @@ class LayerRenderer extends Observable {
 
   }
 
+  /**
+   * Asynchronous layer level hit detection.
+   * @param {import("../pixel.js").Pixel} pixel Pixel.
+   * @return {Promise<Array<import("../Feature").default>>} Promise that resolves with
+   * an array of features.
+   */
+  getFeatures(pixel) {
+    return abstract();
+  }
+
   /**
    * Determine whether render should be called.
    * @abstract

src/ol/renderer/canvas/Layer.js

@@ -213,23 +213,24 @@ class CanvasLayerRenderer extends LayerRenderer {
 
   /**
    * Creates a transform for rendering to an element that will be rotated after rendering.
-   * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+   * @param {import("../../coordinate.js").Coordinate} center Center.
+   * @param {number} resolution Resolution.
+   * @param {number} rotation Rotation.
+   * @param {number} pixelRatio Pixel ratio.
    * @param {number} width Width of the rendered element (in pixels).
    * @param {number} height Height of the rendered element (in pixels).
    * @param {number} offsetX Offset on the x-axis in view coordinates.
    * @protected
    * @return {!import("../../transform.js").Transform} Transform.
    */
-  getRenderTransform(frameState, width, height, offsetX) {
-    const viewState = frameState.viewState;
-    const pixelRatio = frameState.pixelRatio;
+  getRenderTransform(center, resolution, rotation, pixelRatio, width, height, offsetX) {
     const dx1 = width / 2;
     const dy1 = height / 2;
-    const sx = pixelRatio / viewState.resolution;
+    const sx = pixelRatio / resolution;
     const sy = -sx;
-    const dx2 = -viewState.center[0] + offsetX;
-    const dy2 = -viewState.center[1];
-    return composeTransform(this.tempTransform_, dx1, dy1, sx, sy, -viewState.rotation, dx2, dy2);
+    const dx2 = -center[0] + offsetX;
+    const dy2 = -center[1];
+    return composeTransform(this.tempTransform_, dx1, dy1, sx, sy, -rotation, dx2, dy2);
   }
 
   /**

src/ol/renderer/canvas/VectorLayer.js

@@ -9,7 +9,13 @@ import CanvasBuilderGroup from '../../render/canvas/BuilderGroup.js';
 import ExecutorGroup, {replayDeclutter} from '../../render/canvas/ExecutorGroup.js';
 import CanvasLayerRenderer from './Layer.js';
 import {defaultOrder as defaultRenderOrder, getTolerance as getRenderTolerance, getSquaredTolerance as getSquaredRenderTolerance, renderFeature} from '../vector.js';
-import {toString as transformToString, makeScale, makeInverse} from '../../transform.js';
+import {toString as transformToString, makeScale, makeInverse, apply} from '../../transform.js';
+import {createCanvasContext2D} from '../../dom.js';
+import CanvasImmediateRenderer from '../../render/canvas/Immediate.js';
+import {Icon} from '../../style.js';
+import IconAnchorUnits from '../../style/IconAnchorUnits.js';
+import GeometryType from '../../geom/GeometryType.js';
+import {numberSafeCompareFunction} from '../../array.js';
 
 /**
  * @classdesc
@@ -28,6 +34,10 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     /** @private */
     this.boundHandleStyleImageChange_ = this.handleStyleImageChange_.bind(this);
 
+    /**
+     * @type {boolean}
+     */
+    this.animatingOrInteracting_;
 
     /**
      * @private
@@ -35,6 +45,16 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
      */
     this.dirty_ = false;
 
+    /**
+     * @type {ImageData}
+     */
+    this.hitDetectionImageData_ = null;
+
+    /**
+     * @type {Array<import("../../Feature.js").default>}
+     */
+    this.renderedFeatures_ = null;
+
     /**
      * @private
      * @type {number}
@@ -53,6 +73,24 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
      */
     this.renderedExtent_ = createEmpty();
 
+    /**
+     * @private
+     * @type {number}
+     */
+    this.renderedRotation_;
+
+    /**
+     * @private
+     * @type {import("../../coordinate").Coordinate}
+     */
+    this.renderedCenter_ = null;
+
+    /**
+     * @private
+     * @type {import("../../proj/Projection").default}
+     */
+    this.renderedProjection_ = null;
+
     /**
      * @private
      * @type {function(import("../../Feature.js").default, import("../../Feature.js").default): number|null}
@@ -124,6 +162,8 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
 
     const extent = frameState.extent;
     const viewState = frameState.viewState;
+    const center = viewState.center;
+    const resolution = viewState.resolution;
     const projection = viewState.projection;
     const rotation = viewState.rotation;
     const projectionExtent = projection.getExtent();
@@ -143,7 +183,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     const viewHints = frameState.viewHints;
     const snapToPixel = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
 
-    const transform = this.getRenderTransform(frameState, width, height, 0);
+    const transform = this.getRenderTransform(center, resolution, rotation, pixelRatio, width, height, 0);
     const declutterReplays = this.getLayer().getDeclutter() ? {} : null;
     replayGroup.execute(context, transform, rotation, snapToPixel, undefined, declutterReplays);
 
@@ -155,7 +195,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       while (startX < projectionExtent[0]) {
         --world;
         offsetX = worldWidth * world;
-        const transform = this.getRenderTransform(frameState, width, height, offsetX);
+        const transform = this.getRenderTransform(center, resolution, rotation, pixelRatio, width, height, offsetX);
         replayGroup.execute(context, transform, rotation, snapToPixel, undefined, declutterReplays);
         startX += worldWidth;
       }
@@ -164,7 +204,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       while (startX > projectionExtent[2]) {
         ++world;
         offsetX = worldWidth * world;
-        const transform = this.getRenderTransform(frameState, width, height, offsetX);
+        const transform = this.getRenderTransform(center, resolution, rotation, pixelRatio, width, height, offsetX);
         replayGroup.execute(context, transform, rotation, snapToPixel, undefined, declutterReplays);
         startX -= worldWidth;
       }
@@ -190,6 +230,175 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     return this.container;
   }
 
+  /**
+   * @private
+   */
+  createHitDetectionImageData_() {
+    const features = this.renderedFeatures_;
+    const layer = this.getLayer();
+    const resolution = this.renderedResolution_;
+    const size = [this.context.canvas.width, this.context.canvas.height];
+    apply(this.pixelTransform, size);
+    const width = size[0] / 2;
+    const height = size[1] / 2;
+    const context = createCanvasContext2D(width, height);
+    context.imageSmoothingEnabled = false;
+    const canvas = context.canvas;
+    const styleFunction = layer.getStyleFunction();
+    const center = this.renderedCenter_;
+    const rotation = this.renderedRotation_;
+    const projection = this.renderedProjection_;
+    const extent = this.renderedExtent_;
+    const transforms = [];
+    transforms.push(this.getRenderTransform(center, resolution, rotation, 0.5, width, height, 0).slice());
+    const source = layer.getSource();
+    const projectionExtent = projection.getExtent();
+    if (source.getWrapX() && projection.canWrapX() && !containsExtent(projectionExtent, extent)) {
+      let startX = extent[0];
+      const worldWidth = getWidth(projectionExtent);
+      let world = 0;
+      let offsetX;
+      while (startX < projectionExtent[0]) {
+        --world;
+        offsetX = worldWidth * world;
+        transforms.push(this.getRenderTransform(center, resolution, rotation, 0.5, width, height, offsetX).slice());
+        startX += worldWidth;
+      }
+      world = 0;
+      startX = extent[2];
+      while (startX > projectionExtent[2]) {
+        ++world;
+        offsetX = worldWidth * world;
+        transforms.push(this.getRenderTransform(center, resolution, rotation, 0.5, width, height, offsetX).slice());
+        startX -= worldWidth;
+      }
+    }
+    const renderer = new CanvasImmediateRenderer(context, 0.5, extent, null, rotation);
+    const featureCount = features.length;
+    // Stretch hit detection index to use the whole available color range
+    const indexFactor = Math.ceil((256 * 256 * 256) / featureCount);
+    const featuresByZIndex = {};
+    for (let i = 0; i < featureCount; ++i) {
+      const feature = features[i];
+      const featureStyleFunction = feature.getStyleFunction() || styleFunction;
+      let styles = featureStyleFunction(feature, resolution);
+      if (!Array.isArray(styles)) {
+        styles = [styles];
+      }
+      const index = i * indexFactor;
+      const color = '#' + ('000000' + index.toString(16)).slice(-6);
+      for (let j = 0, jj = styles.length; j < jj; ++j) {
+        const originalStyle = styles[j];
+        const style = originalStyle.clone();
+        const fill = style.getFill();
+        if (fill) {
+          fill.setColor(color);
+        }
+        const stroke = style.getStroke();
+        if (stroke) {
+          stroke.setColor(color);
+        }
+        style.setText(undefined);
+        const image = originalStyle.getImage();
+        if (image) {
+          const imgSize = image.getImageSize();
+          const imgContext = createCanvasContext2D(imgSize[0], imgSize[1]);
+          imgContext.fillStyle = color;
+          const img = imgContext.canvas;
+          imgContext.fillRect(0, 0, img.width, img.height);
+          const width = imgSize ? imgSize[0] : img.width;
+          const height = imgSize ? imgSize[1] : img.height;
+          const iconContext = createCanvasContext2D(width, height);
+          iconContext.drawImage(img, 0, 0);
+          style.setImage(new Icon({
+            img: img,
+            imgSize: imgSize,
+            anchor: image.getAnchor(),
+            anchorXUnits: IconAnchorUnits.PIXELS,
+            anchorYUnits: IconAnchorUnits.PIXELS,
+            offset: image.getOrigin(),
+            size: image.getSize(),
+            opacity: image.getOpacity(),
+            scale: image.getScale(),
+            rotation: image.getRotation(),
+            rotateWithView: image.getRotateWithView()
+          }));
+        }
+        const zIndex = Number(style.getZIndex());
+        let byGeometryType = featuresByZIndex[zIndex];
+        if (!byGeometryType) {
+          byGeometryType = featuresByZIndex[zIndex] = {};
+          byGeometryType[GeometryType.POLYGON] = [];
+          byGeometryType[GeometryType.CIRCLE] = [];
+          byGeometryType[GeometryType.LINE_STRING] = [];
+          byGeometryType[GeometryType.POINT] = [];
+        }
+        const geometry = style.getGeometryFunction()(feature);
+        if (geometry && intersectsExtent(extent, geometry.getExtent())) {
+          byGeometryType[geometry.getType().replace('Multi', '')].push(geometry, style);
+        }
+      }
+    }
+
+    const zIndexKeys = Object.keys(featuresByZIndex).map(Number).sort(numberSafeCompareFunction);
+    for (let i = 0, ii = zIndexKeys.length; i < ii; ++i) {
+      const byGeometryType = featuresByZIndex[zIndexKeys[i]];
+      for (const type in byGeometryType) {
+        const geomAndStyle = byGeometryType[type];
+        for (let j = 0, jj = geomAndStyle.length; j < jj; j += 2) {
+          renderer.setStyle(geomAndStyle[j + 1]);
+          for (let k = 0, kk = transforms.length; k < kk; ++k) {
+            renderer.setTransform(transforms[k]);
+            renderer.drawGeometry(geomAndStyle[j]);
+          }
+        }
+      }
+    }
+    this.hitDetectionImageData_ = context.getImageData(0, 0, canvas.width, canvas.height);
+  }
+
+  /**
+   * @param {import("../../pixel").Pixel} pixel Pixel.
+   * @return {Array<import("../../Feature").default>} features Features.
+   */
+  hitDetect_(pixel) {
+    const renderPixel = apply(this.pixelTransform, pixel.slice());
+    const features = this.renderedFeatures_;
+    const imageData = this.hitDetectionImageData_;
+    const resultFeatures = [];
+    if (imageData) {
+      const index = (Math.round(renderPixel[0]) + Math.round(renderPixel[1]) * imageData.width) * 4;
+      const r = imageData.data[index];
+      const g = imageData.data[index + 1];
+      const b = imageData.data[index + 2];
+      const a = imageData.data[index + 3];
+      if (a === 255) {
+        const i = b + (256 * (g + (256 * r)));
+        const indexFactor = Math.ceil((256 * 256 * 256) / features.length);
+        if (i % indexFactor === 0) {
+          resultFeatures.push(features[i / indexFactor]);
+        }
+      }
+    }
+    return resultFeatures;
+  }
+
+  /**
+   * @inheritDoc
+   */
+  getFeatures(pixel) {
+    return new Promise(function(resolve, reject) {
+      if (!this.hitDetectionImageData_ && !this.animatingOrInteracting_) {
+        requestAnimationFrame(function() {
+          this.createHitDetectionImageData_();
+          resolve(this.hitDetect_(pixel));
+        }.bind(this));
+      } else {
+        resolve(this.hitDetect_(pixel));
+      }
+    }.bind(this));
+  }
+
   /**
    * @inheritDoc
    */
@@ -253,8 +462,10 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
 
     if (!this.dirty_ && (!updateWhileAnimating && animating) ||
         (!updateWhileInteracting && interacting)) {
+      this.animatingOrInteracting_ = true;
       return true;
     }
+    this.animatingOrInteracting_ = false;
 
     const frameStateExtent = frameState.extent;
     const viewState = frameState.viewState;
@@ -269,6 +480,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       vectorLayerRenderOrder = defaultRenderOrder;
     }
 
+    const center = viewState.center.slice();
     const extent = buffer(frameStateExtent,
       vectorLayerRenderBuffer * resolution);
     const projectionExtent = viewState.projection.getExtent();
@@ -284,6 +496,8 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
       const gutter = Math.max(getWidth(extent) / 2, worldWidth);
       extent[0] = projectionExtent[0] - gutter;
       extent[2] = projectionExtent[2] + gutter;
+      const worldsAway = Math.floor((center[0] - projectionExtent[0]) / worldWidth);
+      center[0] -= (worldsAway * worldWidth);
     }
 
     if (!this.dirty_ &&
@@ -334,23 +548,15 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     }.bind(this);
 
     const userExtent = toUserExtent(extent, projection);
+    /** @type {Array<import("../../Feature.js").default>} */
+    const features = vectorSource.getFeaturesInExtent(userExtent);
     if (vectorLayerRenderOrder) {
-      /** @type {Array<import("../../Feature.js").default>} */
-      const features = [];
-      vectorSource.forEachFeatureInExtent(userExtent,
-        /**
-         * @param {import("../../Feature.js").default} feature Feature.
-         */
-        function(feature) {
-          features.push(feature);
-        });
       features.sort(vectorLayerRenderOrder);
-      for (let i = 0, ii = features.length; i < ii; ++i) {
-        render(features[i]);
-      }
-    } else {
-      vectorSource.forEachFeatureInExtent(userExtent, render);
     }
+    for (let i = 0, ii = features.length; i < ii; ++i) {
+      render(features[i]);
+    }
+    this.renderedFeatures_ = features;
 
     const replayGroupInstructions = replayGroup.finish();
     const executorGroup = new ExecutorGroup(extent, resolution,
@@ -361,7 +567,11 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     this.renderedRevision_ = vectorLayerRevision;
     this.renderedRenderOrder_ = vectorLayerRenderOrder;
     this.renderedExtent_ = extent;
+    this.renderedRotation_ = viewState.rotation;
+    this.renderedCenter_ = center;
+    this.renderedProjection_ = projection;
     this.replayGroup_ = executorGroup;
+    this.hitDetectionImageData_ = null;
 
     this.replayGroupChanged = true;
     return true;

src/ol/renderer/canvas/VectorTileLayer.js

@@ -428,7 +428,10 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     const declutterReplays = layer.getDeclutter() ? {} : null;
     const replayTypes = VECTOR_REPLAYS[renderMode];
     const pixelRatio = frameState.pixelRatio;
-    const rotation = frameState.viewState.rotation;
+    const viewState = frameState.viewState;
+    const center = viewState.center;
+    const resolution = viewState.resolution;
+    const rotation = viewState.rotation;
     const size = frameState.size;
 
     // set forward and inverse pixel transforms
@@ -462,7 +465,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       const tileCoord = tile.tileCoord;
       const tileExtent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord);
       const worldOffset = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent)[0] - tileExtent[0];
-      const transform = this.getRenderTransform(frameState, width, height, worldOffset);
+      const transform = this.getRenderTransform(center, resolution, rotation, pixelRatio, width, height, worldOffset);
       const executorGroups = tile.executorGroups[getUid(layer)];
       let clipped = false;
       for (let t = 0, tt = executorGroups.length; t < tt; ++t) {