Merge pull request #10094 from ahocevar/immediate-hitdetection

New Layer#getFeatures method with fast hit detection

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

@@ -214,23 +214,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/TileLayer.js

@@ -35,6 +35,18 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
      */
     this.renderedExtent_ = null;
 
+    /**
+     * @protected
+     * @type {number}
+     */
+    this.renderedPixelRatio;
+
+    /**
+     * @protected
+     * @type {import("../../proj/Projection.js").default}
+     */
+    this.renderedProjection = null;
+
     /**
      * @protected
      * @type {number}
@@ -342,6 +354,8 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     this.renderedResolution = tileResolution;
     this.extentChanged = !this.renderedExtent_ || !equals(this.renderedExtent_, canvasExtent);
     this.renderedExtent_ = canvasExtent;
+    this.renderedPixelRatio = pixelRatio;
+    this.renderedProjection = projection;
 
     this.manageTilePyramid(frameState, tileSource, tileGrid, pixelRatio,
       projection, extent, z, tileLayer.getPreload());

src/ol/renderer/canvas/VectorLayer.js

@@ -9,7 +9,8 @@ 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 {createHitDetectionImageData, hitDetect} from '../../render/canvas/hitdetect.js';
 
 /**
  * @classdesc
@@ -28,6 +29,10 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     /** @private */
     this.boundHandleStyleImageChange_ = this.handleStyleImageChange_.bind(this);
 
+    /**
+     * @type {boolean}
+     */
+    this.animatingOrInteracting_;
 
     /**
      * @private
@@ -35,6 +40,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 +68,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 +157,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 +178,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 +190,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 +199,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 +225,58 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     return this.container;
   }
 
+  /**
+   * @inheritDoc
+   */
+  getFeatures(pixel) {
+    return new Promise(function(resolve, reject) {
+      if (!this.hitDetectionImageData_ && !this.animatingOrInteracting_) {
+        requestAnimationFrame(function() {
+          const size = [this.context.canvas.width, this.context.canvas.height];
+          apply(this.pixelTransform, size);
+          const center = this.renderedCenter_;
+          const resolution = this.renderedResolution_;
+          const rotation = this.renderedRotation_;
+          const projection = this.renderedProjection_;
+          const extent = this.renderedExtent_;
+          const layer = this.getLayer();
+          const transforms = [];
+          const width = size[0] / 2;
+          const height = size[1] / 2;
+          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;
+            }
+          }
+
+          this.hitDetectionImageData_ = createHitDetectionImageData(size, transforms,
+            this.renderedFeatures_, layer.getStyleFunction(), extent, resolution, rotation);
+          resolve(hitDetect(pixel, this.renderedFeatures_, this.hitDetectionImageData_));
+        }.bind(this));
+      } else {
+        resolve(hitDetect(pixel, this.renderedFeatures_, this.hitDetectionImageData_));
+      }
+    }.bind(this));
+  }
+
   /**
    * @inheritDoc
    */
@@ -253,8 +340,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 +358,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 +374,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 +426,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 +445,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

@@ -7,11 +7,12 @@ import TileState from '../../TileState.js';
 import ViewHint from '../../ViewHint.js';
 import {listen, unlistenByKey} from '../../events.js';
 import EventType from '../../events/EventType.js';
-import {buffer, containsCoordinate, equals, getIntersection, intersects} from '../../extent.js';
+import {buffer, containsCoordinate, equals, getIntersection, intersects, containsExtent, getWidth, getTopLeft} from '../../extent.js';
 import VectorTileRenderType from '../../layer/VectorTileRenderType.js';
 import ReplayType from '../../render/canvas/BuilderType.js';
 import CanvasBuilderGroup from '../../render/canvas/BuilderGroup.js';
 import CanvasTileLayerRenderer from './TileLayer.js';
+import {toSize} from '../../size.js';
 import {getSquaredTolerance as getSquaredRenderTolerance, renderFeature} from '../vector.js';
 import {
   apply as applyTransform,
@@ -25,6 +26,7 @@ import {
 } from '../../transform.js';
 import CanvasExecutorGroup, {replayDeclutter} from '../../render/canvas/ExecutorGroup.js';
 import {clear} from '../../obj.js';
+import {createHitDetectionImageData, hitDetect} from '../../render/canvas/hitdetect.js';
 
 
 /**
@@ -99,6 +101,18 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
      */
     this.renderedLayerRevision_;
 
+    /**
+     * @private
+     * @type {import("../../transform").Transform}
+     */
+    this.renderedPixelToCoordinateTransform_ = null;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this.renderedRotation_;
+
     /**
      * @private
      * @type {!Object<string, import("../../VectorRenderTile.js").default>}
@@ -304,6 +318,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       if (renderOrder && renderOrder !== builderState.renderedRenderOrder) {
         features.sort(renderOrder);
       }
+      sourceTile.hitDetectionImageData = null;
       for (let i = 0, ii = features.length; i < ii; ++i) {
         const feature = features[i];
         if (!bufferedExtent || intersects(bufferedExtent, feature.getGeometry().getExtent())) {
@@ -380,6 +395,73 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     return found;
   }
 
+  /**
+   * @inheritDoc
+   */
+  getFeatures(pixel) {
+    return new Promise(function(resolve, reject) {
+      const layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
+      const source = layer.getSource();
+      const projection = this.renderedProjection;
+      const projectionExtent = projection.getExtent();
+      const resolution = this.renderedResolution;
+      const pixelRatio = this.renderedPixelRatio;
+      const tileGrid = source.getTileGridForProjection(projection);
+      const sourceTileGrid = source.getTileGrid();
+      const coordinate = applyTransform(this.renderedPixelToCoordinateTransform_, pixel.slice());
+      const tileCoord = tileGrid.getTileCoordForCoordAndResolution(coordinate, resolution);
+      let sourceTile;
+      for (let i = 0, ii = this.renderedTiles.length; i < ii; ++i) {
+        if (tileCoord.toString() === this.renderedTiles[i].tileCoord.toString()) {
+          const tile = this.renderedTiles[i];
+          if (tile.getState() === TileState.LOADED && tile.hifi) {
+            const extent = tileGrid.getTileCoordExtent(tileCoord);
+            if (source.getWrapX() && projection.canWrapX() && !containsExtent(projectionExtent, extent)) {
+              const worldWidth = getWidth(projectionExtent);
+              const worldsAway = Math.floor((coordinate[0] - projectionExtent[0]) / worldWidth);
+              coordinate[0] -= (worldsAway * worldWidth);
+            }
+            const sourceTiles = source.getSourceTiles(pixelRatio, projection, tile);
+            const sourceTileCoord = sourceTileGrid.getTileCoordForCoordAndResolution(coordinate, resolution);
+            for (let j = 0, jj = sourceTiles.length; j < jj; ++j) {
+              if (sourceTileCoord.toString() === sourceTiles[j].tileCoord.toString()) {
+                sourceTile = sourceTiles[j];
+                break;
+              }
+            }
+          }
+          break;
+        }
+      }
+      if (!sourceTile) {
+        resolve([]);
+        return;
+      }
+      const corner = getTopLeft(tileGrid.getTileCoordExtent(sourceTile.tileCoord));
+      const tilePixel = [
+        (coordinate[0] - corner[0]) / resolution,
+        (corner[1] - coordinate[1]) / resolution
+      ];
+      if (!sourceTile.hitDetectionImageData) {
+        const tileSize = toSize(sourceTileGrid.getTileSize(sourceTileGrid.getZForResolution(resolution)));
+        const size = [tileSize[0] / 2, tileSize[1] / 2];
+        const rotation = this.renderedRotation_;
+        const transforms = [
+          this.getRenderTransform(tileGrid.getTileCoordCenter(sourceTile.tileCoord),
+            resolution, 0, 0.5, size[0], size[1], 0)
+        ];
+        requestAnimationFrame(function() {
+          sourceTile.hitDetectionImageData = createHitDetectionImageData(tileSize, transforms,
+            sourceTile.getFeatures(), layer.getStyleFunction(),
+            tileGrid.getTileCoordExtent(sourceTile.tileCoord), resolution, rotation);
+          resolve(hitDetect(tilePixel, sourceTile.getFeatures(), sourceTile.hitDetectionImageData));
+        });
+      } else {
+        resolve(hitDetect(tilePixel, sourceTile.getFeatures(), sourceTile.hitDetectionImageData));
+      }
+    }.bind(this));
+  }
+
   /**
    * @inheritDoc
    */
@@ -409,6 +491,9 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     this.renderQueuedTileImages_(hifi, frameState);
 
     super.renderFrame(frameState, target);
+    this.renderedPixelToCoordinateTransform_ = frameState.pixelToCoordinateTransform.slice();
+    this.renderedRotation_ = frameState.viewState.rotation;
+
 
     const layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
     const renderMode = layer.getRenderMode();
@@ -429,7 +514,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
@@ -463,7 +551,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) {