Add hit detection support to WebGL vector layer

examples/webgl-vector-layer.html

@@ -8,3 +8,4 @@
 experimental: true
 ---
 <div id="map" class="map"></div>
+<div id="info">&nbsp;</div>

examples/webgl-vector-layer.js

@@ -42,3 +42,48 @@ const map = new Map({
     zoom: 1,
   }),
 });
+
+const featureOverlay = new WebGLLayer({
+  source: new VectorSource(),
+  map: map,
+  style: {
+    'stroke-color': 'rgba(255, 255, 255, 0.7)',
+    'stroke-width': 2,
+  },
+});
+
+let highlight;
+const displayFeatureInfo = function (pixel) {
+  const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
+    return feature;
+  });
+
+  const info = document.getElementById('info');
+  if (feature) {
+    info.innerHTML = feature.get('ECO_NAME') || ' ';
+  } else {
+    info.innerHTML = ' ';
+  }
+
+  if (feature !== highlight) {
+    if (highlight) {
+      featureOverlay.getSource().removeFeature(highlight);
+    }
+    if (feature) {
+      featureOverlay.getSource().addFeature(feature);
+    }
+    highlight = feature;
+  }
+};
+
+map.on('pointermove', function (evt) {
+  if (evt.dragging) {
+    return;
+  }
+  const pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('click', function (evt) {
+  displayFeatureInfo(evt.pixel);
+});

site/src/doc/errors/index.md

@@ -225,7 +225,6 @@ Layer opacity must be a number.
 ### 66
 
 `forEachFeatureAtCoordinate` cannot be used on a WebGL layer if the hit detection logic has not been enabled.
-This is done by providing adequate shaders using the `hitVertexShader` and `hitFragmentShader` properties of `WebGLPointsLayerRenderer`.
 
 ### 67