Add some example tracing / visual feedback

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 =
@@ -55,6 +58,11 @@ class WebGLVectorTileLayer extends VectorTile {
   }
 }
 
+const vectorSource = new VectorSource({
+  useSpatialIndex: false,
+  features: [],
+});
+
 const map = new Map({
   layers: [
     new WebGLVectorTileLayer({
@@ -71,13 +79,24 @@ const map = new Map({
       }),
       style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text),
     }),
+    new VectorLayer({
+      style: {
+        'fill-color': 'grey',
+        'stroke-color': 'green',
+        'circle-fill-color': 'red',
+      },
+      source: vectorSource,
+    }),
   ],
   target: 'map',
   view: new View({
     center: [0, 0],
     zoom: 2,
   }),
 });
+
+let activeFeature;
+
 map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
@@ -86,4 +105,19 @@ map.on('pointermove', function (evt) {
   const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
     return feature;
   });
+  if (feature) {
+    if (activeFeature === feature) {
+      // skip
+    } else {
+      vectorSource.removeFeature(activeFeature);
+      vectorSource.addFeature(feature);
+      activeFeature = feature;
+    }
+    log(feature);
+  } else {
+    if (activeFeature) {
+      vectorSource.removeFeature(activeFeature);
+      activeFeature = null;
+    }
+  }
 });