Add some example tracing / visual feedback

openlayers · Dec 19, 2023 · d01b24d · d01b24d
1 parent 7e3dd87
commit d01b24d
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 4 deletions.
diff --git a/examples/webgl-vector-tiles.js b/examples/webgl-vector-tiles.js
@@ -1,11 +1,14 @@
 import MVT from '../src/ol/format/MVT.js';
 import Map from '../src/ol/Map.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import VectorSource from '../src/ol/source/Vector.js';
 import VectorTile from '../src/ol/layer/VectorTile.js';
 import VectorTileSource from '../src/ol/source/VectorTile.js';
 import View from '../src/ol/View.js';
 import WebGLVectorTileLayerRenderer from '../src/ol/renderer/webgl/VectorTileLayer.js';
 import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';
 import {asArray} from '../src/ol/color.js';
+import {log} from '../src/ol/console.js';
 import {packColor, parseLiteralStyle} from '../src/ol/webgl/styleparser.js';
 
 const key =
@@ -15,7 +18,7 @@ const result = parseLiteralStyle({
   'fill-color': ['get', 'fillColor'],
   'stroke-color': ['get', 'strokeColor'],
   'stroke-width': ['get', 'strokeWidth'],
-  'circle-radius': 4,
+  'circle-radius': 10,
   'circle-fill-color': '#777',
 });
 
@@ -55,6 +58,11 @@ class WebGLVectorTileLayer extends VectorTile {
   }
 }
 
+const vectorSource = new VectorSource({
+  useSpatialIndex: false,
+  features: [],
+});
+
 const map = new Map({
   layers: [
     new WebGLVectorTileLayer({
@@ -71,19 +79,55 @@ const map = new Map({
       }),
       style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text),
     }),
+    new VectorLayer({
+      style: {
+        'fill-color': 'grey',
+        'stroke-color': 'green',
+        'stroke-width': 3,
+        'circle-fill-color': 'red',
+        'circle-radius': 10,
+      },
+      source: vectorSource,
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
     zoom: 2,
   }),
 });
+
+let activeFeature;
+
 map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
   }
   const pixel = map.getEventPixel(evt.originalEvent);
-  const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
-    return feature;
-  });
+  const feature = map.forEachFeatureAtPixel(
+    pixel,
+    function (feature) {
+      return feature;
+    },
+    {
+      layerFilter(layer) {
+        return layer instanceof WebGLVectorTileLayer;
+      },
+    }
+  );
+  if (feature) {
+    if (activeFeature === feature) {
+      // skip
+    } else {
+      log(feature);
+      vectorSource.removeFeature(activeFeature);
+      vectorSource.addFeature(feature);
+      activeFeature = feature;
+    }
+  } else {
+    if (activeFeature) {
+      vectorSource.removeFeature(activeFeature);
+      activeFeature = null;
+    }
+  }
 });
diff --git a/src/ol/renderer/webgl/VectorTileLayer.js b/src/ol/renderer/webgl/VectorTileLayer.js
@@ -482,6 +482,9 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
       ];
       // It is assumed that there is no approximation with this color
       const ref = colorDecodeId(hitColor);
+      if (!ref) {
+        return;
+      }
       const feature = t.tileGeometry.getFeatureFromRef(ref);
       if (feature) {
         return callback(feature, this.getLayer(), null);