Merge pull request #10228 from ahocevar/vectortile-hitdetect-rendertile

Use render tiles instead of source tiles for hit detection

examples/vector-tile-selection.js

@@ -7,18 +7,19 @@ import {Fill, Stroke, Style} from '../src/ol/style.js';
 
 // lookup for selection objects
 let selection = {};
-// feature property to act as identifier
-const idProp = 'iso_a3';
 
 const vtLayer = new VectorTileLayer({
   declutter: true,
   source: new VectorTileSource({
-    format: new MVT(),
+    maxZoom: 15,
+    format: new MVT({
+      idProperty: 'iso_a3'
+    }),
     url: 'https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/' +
       'ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf'
   }),
   style: function(feature) {
-    const selected = !!selection[feature.get(idProp)];
+    const selected = !!selection[feature.getId()];
     return new Style({
       stroke: new Stroke({
         color: selected ? 'rgba(200,20,20,0.8)' : 'gray',
@@ -56,7 +57,7 @@ map.on('click', function(event) {
     if (!feature) {
       return;
     }
-    const fid = feature.get(idProp);
+    const fid = feature.getId();
 
     if (selectElement.value === 'singleselect') {
       selection = {};

src/ol/Tile.js

@@ -87,11 +87,6 @@ class Tile extends EventTarget {
 
     const options = opt_options ? opt_options : {};
 
-    /**
-     * @type {ImageData}
-     */
-    this.hitDetectionImageData = null;
-
     /**
      * @type {import("./tilecoord.js").TileCoord}
      */

src/ol/VectorRenderTile.js

@@ -60,6 +60,11 @@ class VectorRenderTile extends Tile {
      */
     this.errorSourceTileKeys = {};
 
+    /**
+     * @type {ImageData}
+     */
+    this.hitDetectionImageData = null;
+
     /**
      * @private
      * @type {!Object<string, ReplayState>}
@@ -72,9 +77,9 @@ class VectorRenderTile extends Tile {
     this.wantedResolution;
 
     /**
-     * @type {!function(import("./VectorRenderTile.js").default):Array<import("./VectorTile.js").default>}
+     * @type {!function():Array<import("./VectorTile.js").default>}
      */
-    this.getSourceTiles_ = getSourceTiles;
+    this.getSourceTiles = getSourceTiles.bind(this, this);
 
     /**
      * @type {!function(import("./VectorRenderTile.js").default):void}
@@ -184,7 +189,7 @@ class VectorRenderTile extends Tile {
    * @inheritDoc
    */
   load() {
-    this.getSourceTiles_(this);
+    this.getSourceTiles();
   }
 }
 

src/ol/render/canvas/hitdetect.js

@@ -62,7 +62,10 @@ export function createHitDetectionImageData(size, transforms, features, styleFun
       const image = originalStyle.getImage();
       if (image) {
         const imgSize = image.getImageSize();
-        const imgContext = createCanvasContext2D(imgSize[0], imgSize[1]);
+        const canvas = document.createElement('canvas');
+        canvas.width = imgSize[0];
+        canvas.height = imgSize[1];
+        const imgContext = canvas.getContext('2d', {alpha: false});
         imgContext.fillStyle = color;
         const img = imgContext.canvas;
         imgContext.fillRect(0, 0, img.width, img.height);
@@ -133,13 +136,10 @@ export function hitDetect(pixel, features, imageData) {
     const r = imageData.data[index];
     const g = imageData.data[index + 1];
     const b = imageData.data[index + 2];
-    const a = imageData.data[index + 3];
+    const i = b + (256 * (g + (256 * r)));
-    if (a === 255) {
+    const indexFactor = Math.ceil((256 * 256 * 256) / features.length);
-      const i = b + (256 * (g + (256 * r)));
+    if (i % indexFactor === 0) {
-      const indexFactor = Math.ceil((256 * 256 * 256) / features.length);
+      resultFeatures.push(features[i / indexFactor]);
-      if (i % indexFactor === 0) {
-        resultFeatures.push(features[i / indexFactor]);
-      }
     }
   }
   return resultFeatures;

src/ol/renderer/canvas/VectorTileLayer.js

@@ -281,6 +281,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
         executorGroups[i].dispose();
       }
     }
+    tile.hitDetectionImageData = null;
     tile.executorGroups[layerUid] = [];
     for (let t = 0, tt = sourceTiles.length; t < tt; ++t) {
       const sourceTile = sourceTiles[t];
@@ -318,7 +319,6 @@ 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())) {
@@ -405,61 +405,55 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
       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;
+      let tile;
       for (let i = 0, ii = this.renderedTiles.length; i < ii; ++i) {
         if (tileCoord.toString() === this.renderedTiles[i].tileCoord.toString()) {
-          const tile = this.renderedTiles[i];
+          tile = this.renderedTiles[i];
           if (tile.getState() === TileState.LOADED && tile.hifi) {
-            const extent = tileGrid.getTileCoordExtent(tileCoord);
+            const extent = tileGrid.getTileCoordExtent(tile.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);
+            break;
-            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;
+          tile = undefined;
         }
       }
-      if (!sourceTile || sourceTile.getState() !== TileState.LOADED) {
+      if (!tile) {
         resolve([]);
         return;
       }
-      const sourceTileCoord = sourceTile.tileCoord;
+      const extent = tileGrid.getTileCoordExtent(tile.wrappedTileCoord);
-      const corner = getTopLeft(tileGrid.getTileCoordExtent(sourceTileCoord));
+      const corner = getTopLeft(extent);
-      const renderScale = sourceTileGrid.getResolution(sourceTileCoord[0]) / resolution;
       const tilePixel = [
-        (coordinate[0] - corner[0]) / resolution / renderScale,
+        (coordinate[0] - corner[0]) / resolution,
-        (corner[1] - coordinate[1]) / resolution / renderScale
+        (corner[1] - coordinate[1]) / resolution
       ];
-      if (!sourceTile.hitDetectionImageData) {
+      const features = tile.getSourceTiles().reduce(function(accumulator, sourceTile) {
-        const tileSize = toSize(sourceTileGrid.getTileSize(sourceTileGrid.getZForResolution(resolution)));
+        return accumulator.concat(sourceTile.getFeatures());
+      }, []);
+      if (!tile.hitDetectionImageData) {
+        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(sourceTile.tileCoord),
+          this.getRenderTransform(tileGrid.getTileCoordCenter(tile.wrappedTileCoord),
-            resolution * renderScale, 0, 0.5, size[0], size[1], 0)
+            resolution, 0, 0.5, size[0], size[1], 0)
         ];
         requestAnimationFrame(function() {
-          sourceTile.hitDetectionImageData = createHitDetectionImageData(tileSize, transforms,
+          tile.hitDetectionImageData = createHitDetectionImageData(tileSize, transforms,
-            sourceTile.getFeatures(), layer.getStyleFunction(),
+            features, layer.getStyleFunction(),
-            tileGrid.getTileCoordExtent(sourceTile.tileCoord), resolution, rotation);
+            tileGrid.getTileCoordExtent(tile.wrappedTileCoord),
-          resolve(hitDetect(tilePixel, sourceTile.getFeatures(), sourceTile.hitDetectionImageData));
+            tile.getReplayState(layer).renderedResolution, rotation);
+          resolve(hitDetect(tilePixel, features, tile.hitDetectionImageData));
         });
       } else {
-        resolve(hitDetect(tilePixel, sourceTile.getFeatures(), sourceTile.hitDetectionImageData));
+        resolve(hitDetect(tilePixel, features, tile.hitDetectionImageData));
       }
     }.bind(this));
   }