WebGLPointsLayer wrapX support - partially addressing #11131

WebGLPointsLayer renderFrame and renderHitDetection will now draw
multiple worlds if the source and projection support wrapX.

Hit detection needs additional improvement. It stops working after
more than one wrap around the world. If 0 is the middle world, then
the hit detection works for worlds -1, 0, and -1, but not for worlds
> 2 or < -2.

The example has hit detection enabled, demonstrated with a colour
change on hover for the circle styles. When moving the mouse, the hit
detection is unreliable and flickers on/off. This needs improvement.

The webgl-points renderer test has been updated.

examples/webgl-points-layer.js

@@ -9,6 +9,7 @@ import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
 const vectorSource = new Vector({
   url: 'data/geojson/world-cities.geojson',
   format: new GeoJSON(),
+  wrapX: true,
 });
 
 const predefinedStyles = {
@@ -79,7 +80,7 @@ const predefinedStyles = {
         2000000,
         28,
       ],
-      color: '#006688',
+      color: ['match', ['get', 'hover'], 1, '#ff3f3f', '#006688'],
       rotateWithView: false,
       offset: [0, 0],
       opacity: [
@@ -97,7 +98,7 @@ const predefinedStyles = {
     symbol: {
       symbolType: 'circle',
       size: ['interpolate', ['exponential', 2.5], ['zoom'], 2, 1, 14, 32],
-      color: '#240572',
+      color: ['match', ['get', 'hover'], 1, '#ff3f3f', '#006688'],
       offset: [0, 0],
       opacity: 0.95,
     },
@@ -160,12 +161,27 @@ const map = new Map({
 
 let literalStyle;
 let pointsLayer;
+
+let selected = null;
+
+map.on('pointermove', function (ev) {
+  if (selected !== null) {
+    selected.set('hover', 0);
+    selected = null;
+  }
+
+  map.forEachFeatureAtPixel(ev.pixel, function (feature) {
+    feature.set('hover', 1);
+    selected = feature;
+    return true;
+  });
+});
+
 function refreshLayer(newStyle) {
   const previousLayer = pointsLayer;
   pointsLayer = new WebGLPointsLayer({
     source: vectorSource,
     style: newStyle,
-    disableHitDetection: true,
   });
   map.addLayer(pointsLayer);