Merge pull request #10094 from ahocevar/immediate-hitdetection

New Layer#getFeatures method with fast hit detection

test/spec/ol/layer/vector.test.js

@@ -2,6 +2,10 @@ import Layer from '../../../../src/ol/layer/Layer.js';
 import VectorLayer from '../../../../src/ol/layer/Vector.js';
 import VectorSource from '../../../../src/ol/source/Vector.js';
 import Style, {createDefaultStyle} from '../../../../src/ol/style/Style.js';
+import Feature from '../../../../src/ol/Feature.js';
+import Point from '../../../../src/ol/geom/Point.js';
+import Map from '../../../../src/ol/Map.js';
+import View from '../../../../src/ol/View.js';
 
 
 describe('ol.layer.Vector', function() {
@@ -123,4 +127,55 @@ describe('ol.layer.Vector', function() {
 
   });
 
+  describe('#getFeatures()', function() {
+
+    let map, layer;
+
+    beforeEach(function() {
+      layer = new VectorLayer({
+        source: new VectorSource({
+          features: [
+            new Feature({
+              geometry: new Point([-1000000, 0]),
+              name: 'feature1'
+            }),
+            new Feature({
+              geometry: new Point([1000000, 0]),
+              name: 'feture2'
+            })
+          ]
+        })
+      });
+      const container = document.createElement('div');
+      container.style.width = '256px';
+      container.style.height = '256px';
+      document.body.appendChild(container);
+      map = new Map({
+        target: container,
+        layers: [
+          layer
+        ],
+        view: new View({
+          zoom: 2,
+          center: [0, 0]
+        })
+      });
+    });
+
+    afterEach(function() {
+      document.body.removeChild(map.getTargetElement());
+      map.setTarget(null);
+    });
+
+    it('detects features properly', function(done) {
+      map.renderSync();
+      const pixel = map.getPixelFromCoordinate([-1000000, 0]);
+      layer.getFeatures(pixel).then(function(features) {
+        expect(features[0].get('name')).to.be('feature1');
+        done();
+      });
+    });
+
+  });
+
 });

test/spec/ol/layer/vectortile.test.js

@@ -1,5 +1,9 @@
 import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
 import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
+import GeoJSON from '../../../../src/ol/format/GeoJSON.js';
+import View from '../../../../src/ol/View.js';
+import Map from '../../../../src/ol/Map.js';
+import {fromLonLat} from '../../../../src/ol/proj.js';
 
 
 describe('ol.layer.VectorTile', function() {
@@ -57,4 +61,74 @@ describe('ol.layer.VectorTile', function() {
     });
   });
 
+  describe('#getFeatures()', function() {
+
+    let map, layer;
+
+    beforeEach(function() {
+      layer = new VectorTileLayer({
+        source: new VectorTileSource({
+          format: new GeoJSON(),
+          url: `data:application/json;charset=utf-8,
+            {
+              "type": "FeatureCollection",
+              "features": [
+                {
+                  "type": "Feature",
+                  "geometry": {
+                    "type": "Point",
+                    "coordinates": [-36, 0]
+                  },
+                  "properties": {
+                    "name": "feature1"
+                  }
+                },
+                {
+                  "type": "Feature",
+                  "geometry": {
+                    "type": "Point",
+                    "coordinates": [36, 0]
+                  },
+                  "properties": {
+                    "name": "feature2"
+                  }
+                }
+              ]
+            }
+          `
+        })
+      });
+      const container = document.createElement('div');
+      container.style.width = '256px';
+      container.style.height = '256px';
+      document.body.appendChild(container);
+      map = new Map({
+        target: container,
+        layers: [
+          layer
+        ],
+        view: new View({
+          zoom: 0,
+          center: [0, 0]
+        })
+      });
+    });
+
+    afterEach(function() {
+      document.body.removeChild(map.getTargetElement());
+      map.setTarget(null);
+    });
+
+    it('detects features properly', function(done) {
+      map.once('rendercomplete', function() {
+        const pixel = map.getPixelFromCoordinate(fromLonLat([-36, 0]));
+        layer.getFeatures(pixel).then(function(features) {
+          expect(features[0].get('name')).to.be('feature1');
+          done();
+        });
+      });
+    });
+
+  });
+
 });

test/spec/ol/renderer/canvas/vectorimage.test.js

@@ -40,6 +40,7 @@ describe('ol/renderer/canvas/VectorImageLayer', function() {
         extent: extent,
         viewHints: [],
         viewState: {
+          center: [0, 0],
           projection: projection,
           resolution: 1,
           rotation: 0

test/spec/ol/renderer/canvas/vectorlayer.test.js

@@ -208,6 +208,7 @@ describe('ol.renderer.canvas.VectorLayer', function() {
       const frameState = {
         layerStatesArray: [{}],
         viewState: {
+          center: [0, 0],
           resolution: 1,
           rotation: 0
         }
@@ -234,6 +235,7 @@ describe('ol.renderer.canvas.VectorLayer', function() {
       frameState = {
         viewHints: [],
         viewState: {
+          center: [0, 0],
           projection: projection,
           resolution: 1,
           rotation: 0

test/spec/ol/renderer/canvas/vectortilelayer.test.js

@@ -22,6 +22,7 @@ import VectorTileRenderType from '../../../../../src/ol/layer/VectorTileRenderTy
 import {getUid} from '../../../../../src/ol/util.js';
 import TileLayer from '../../../../../src/ol/layer/Tile.js';
 import XYZ from '../../../../../src/ol/source/XYZ.js';
+import {create} from '../../../../../src/ol/transform.js';
 
 
 describe('ol.renderer.canvas.VectorTileLayer', function() {
@@ -262,6 +263,7 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
         layerIndex: 0,
         extent: proj.getExtent(),
         pixelRatio: 1,
+        pixelToCoordinateTransform: create(),
         time: Date.now(),
         viewHints: [],
         viewState: {