Create hit detection data per layer and without requestAnimationFrame

src/ol/VectorRenderTile.js

@@ -61,9 +61,9 @@ class VectorRenderTile extends Tile {
     this.errorSourceTileKeys = {};
 
     /**
-     * @type {ImageData}
+     * @type {Object<number, ImageData>}
      */
-    this.hitDetectionImageData = null;
+    this.hitDetectionImageData = {};
 
     /**
      * @private

src/ol/renderer/canvas/VectorLayer.js

@@ -232,7 +232,6 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
   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_;
@@ -270,11 +269,8 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
 
         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_));
       }
+      resolve(hitDetect(pixel, this.renderedFeatures_, this.hitDetectionImageData_));
     }.bind(this));
   }
 

src/ol/renderer/canvas/VectorTileLayer.js

@@ -221,7 +221,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
         executorGroups[i].dispose();
       }
     }
-    tile.hitDetectionImageData = null;
+    delete tile.hitDetectionImageData[layerUid];
     tile.executorGroups[layerUid] = [];
     for (let t = 0, tt = sourceTiles.length; t < tt; ++t) {
       const sourceTile = sourceTiles[t];
@@ -341,6 +341,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
   getFeatures(pixel) {
     return new Promise(function(resolve, reject) {
       const layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
+      const layerUid = getUid(layer);
       const source = layer.getSource();
       const projection = this.renderedProjection;
       const projectionExtent = projection.getExtent();
@@ -377,7 +378,8 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       const features = tile.getSourceTiles().reduce(function(accumulator, sourceTile) {
         return accumulator.concat(sourceTile.getFeatures());
       }, []);
-      if (!tile.hitDetectionImageData) {
+      let hitDetectionImageData = tile.hitDetectionImageData[layerUid];
+      if (!hitDetectionImageData && !this.animatingOrInteracting_) {
         const tileSize = toSize(tileGrid.getTileSize(tileGrid.getZForResolution(resolution)));
         const size = [tileSize[0] / 2, tileSize[1] / 2];
         const rotation = this.renderedRotation_;
@@ -385,16 +387,13 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
           this.getRenderTransform(tileGrid.getTileCoordCenter(tile.wrappedTileCoord),
             resolution, 0, 0.5, size[0], size[1], 0)
         ];
-        requestAnimationFrame(function() {
+        hitDetectionImageData = createHitDetectionImageData(tileSize, transforms,
-          tile.hitDetectionImageData = createHitDetectionImageData(tileSize, transforms,
           features, layer.getStyleFunction(),
           tileGrid.getTileCoordExtent(tile.wrappedTileCoord),
           tile.getReplayState(layer).renderedResolution, rotation);
-          resolve(hitDetect(tilePixel, features, tile.hitDetectionImageData));
+        tile.hitDetectionImageData[layerUid] = hitDetectionImageData;
-        });
-      } else {
-        resolve(hitDetect(tilePixel, features, tile.hitDetectionImageData));
       }
+      resolve(hitDetect(tilePixel, features, hitDetectionImageData));
     }.bind(this));
   }