Clustering tileVectorSource...

src/components/map/Map.tsx

@@ -10,7 +10,7 @@ import Attribution from 'ol/control/Attribution';
 import Rotate from 'ol/control/Rotate';
 import ScaleLine from 'ol/control/ScaleLine';
 import Control from 'ol/control/Control';
-import { useGeographic as olUseGeographic } from 'ol/proj';
+import { toLonLat, useGeographic as olUseGeographic } from 'ol/proj';
 import DragRotate from 'ol/interaction/DragRotate';
 
 import 'ol/ol.css';
@@ -48,6 +48,7 @@ import VectorTileLayer from 'ol/layer/VectorTile';
 import VectorTileSource from 'ol/source/VectorTile.js';
 import MVT from 'ol/format/MVT.js';
 import style from '../gpx/styles';
+import { DepartureBoard } from '@suid/icons-material';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -243,6 +244,12 @@ const Map: Component = () => {
       maxZoom: 14,
     });
 
+    console.log({
+      caller: 'Map / projections',
+      vector: vectorLayer.getSource()?.getProjection(),
+      vectorTile: vectorTileSource.getProjection(),
+    });
+
     const vectorTileLayer = new VectorTileLayer({
       source: vectorTileSource,
       style: [],
@@ -282,7 +289,10 @@ const Map: Component = () => {
 
     const vectorTileMirrorSource = new VectorSource();
     let featuresForZ: Feature[] = [];
-    let viewZ: number = floor(+getState().zoom) - 1;
+    let viewZ = vectorTileLayer
+      .getSource()
+      .getTileGrid()
+      .getZForResolution(olMap.getView().getResolution());
 
     const vectorMirrorRefresh = () => {
       console.log({
@@ -295,19 +305,42 @@ const Map: Component = () => {
       vectorTileMirrorSource.clear();
       if (featuresForZ[viewZ]) {
         vectorTileMirrorSource.addFeatures(featuresForZ[viewZ]);
+        //        vectorMirrorLayer.getSource()?.refresh();
       }
+      //vectorMirrorLayer.changed();
     };
 
     vectorTileLayer.getSource()?.on('tileloadend', (evt) => {
       const z = evt.tile.getTileCoord()[0];
-      const features = evt.tile.getFeatures();
+      // const features = evt.tile.getFeatures();
-      features.forEach((feature: Feature) => {
+      // features.forEach((feature: Feature) => {
-        feature.setId(undefined);
+      //   feature.setId(undefined);
+      // });
+      const features = evt.tile
+        .getFeatures()
+        .filter((feature: Feature) => feature.get('type') === 'poi')
+        .map((feature: Feature) => {
+          const center = olExtent.getCenter(feature.getGeometry().getExtent());
+          const centerLonLat = toLonLat(
+            center,
+            olMap.getView().getProjection()
+          );
+          const newFeature = feature.clone();
+          newFeature.setGeometry(new Point(centerLonLat));
+          // console.log({
+          //   caller: 'Map / Cluster / on tileloadend / new feature',
+          //   feature,
+          //   center,
+          //   centerLonLat,
+          //   newFeature,
+          // });
+          return newFeature;
         });
       if (!Array.isArray(featuresForZ[z])) {
         featuresForZ[z] = [];
       }
       featuresForZ[z] = featuresForZ[z].concat(features);
+      // evt.tile.setFeatures([]);
       if (z === viewZ) {
         vectorMirrorRefresh();
       }
@@ -343,27 +376,73 @@ const Map: Component = () => {
     });
 
     let vectorMirrorLayer = new VectorLayer({
+      // source: vectorTileMirrorSource,
       source: new Cluster({
         source: vectorTileMirrorSource,
-        geometryFunction: function (feature: Feature) {
+        // geometryFunction: (feature: Feature) => {
-          // test data is linestrings
+        //   // console.log({
-          return new Point(
+        //   //   caller: 'Map / Cluster / geometryFunction',
-            olExtent.getCenter(feature.getGeometry().getExtent())
+        //   //   feature,
-          );
+        //   // });
+        //   // test data is linestrings
+        //   // return new Point(
+        //   //   olExtent.getCenter(feature.getGeometry().getExtent())
+        //   // );
+        //   if (feature.get('type') === 'poi') {
+        //     return feature.getGeometry();
+        //   }
+        //   return null;
+        // },
+        createCluster: (point: Point, features: Feature[]) => {
+          // console.log({
+          //   caller: 'Map / Cluster / createCluster',
+          //   point,
+          //   features,
+          // });
+
+          // return features[0];
+
+          return new Feature({
+            geometry: point,
+            features: features,
+          });
         },
+        distance: 100,
+        minDistance: 10,
       }),
+      zIndex: Infinity,
       style,
-      // style: function (feature) {
+      style: function (feature) {
-      //   return new Style({
+        // console.log({
+        //   caller: 'Map / Cluster / style',
+        //   feature,
+        // });
+        return new Style({
+          image: new Circle({
+            radius: feature.get('features').length * 5,
+            fill: new Fill({ color: 'black' }),
+          }),
+        });
+      },
+      // style: new Style({
       //   image: new Circle({
-      //       radius: feature.get('features').length * 5,
+      //     radius: 20,
       //     fill: new Fill({ color: 'black' }),
       //   }),
-      //   });
+      // }),
-      // },
     });
     olMap.addLayer(vectorMirrorLayer);
 
+    console.log({
+      caller: 'Map / projections',
+      olMap,
+      map: olMap.getView().getProjection(),
+      vectorSource: vectorLayer.getSource()?.getProjection(),
+      vectorTileMirrorSource: vectorTileMirrorSource.getProjection(),
+      vectorTileSource: vectorTileSource.getProjection(),
+      clusterSource: vectorMirrorLayer.getSource()?.getProjection(),
+    });
+
     setMap(olMap);
   });