Testing clustering with a proxy.

src/components/map/Map.tsx

@@ -51,6 +51,7 @@ import style from '../gpx/styles';
 import { DepartureBoard } from '@suid/icons-material';
 import deTileVectorSource from '../../lib/de-tile-vector-source';
 import ClusterableVectorTileSource from '../../lib/ClusterableVectorTileSource';
+import clusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -240,22 +241,11 @@ const Map: Component = () => {
       zIndex: Infinity,
     });
 
-    const clusterableVectorTileSource = new ClusterableVectorTileSource({
-      url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf',
-      maxZoom: 14,
-    });
-
-    console.log({
-      caller: 'Map / projections',
-      vector: vectorLayer.getSource()?.getProjection(),
-      vectorTile: clusterableVectorTileSource.getProjection(),
-    });
-
-    const vectorTileLayer = new VectorTileLayer({
-      source: clusterableVectorTileSource,
-      style: [],
-      declutter: false,
-    });
+    //  console.log({
+    //   caller: 'Map / projections',
+    //   vector: vectorLayer.getSource()?.getProjection(),
+    //   vectorTile: clusterableVectorTileSource.getProjection(),
+    // });
 
     const olMap = new OlMap({
       view: new View({
@@ -263,7 +253,7 @@ const Map: Component = () => {
         zoom: +getState().zoom,
         rotation: +getState().rotation,
       }),
-      layers: [tileLayer, vectorLayer, vectorTileLayer],
+      layers: [tileLayer, vectorLayer],
       target: target,
       controls: new Collection<Control>([
         new Attribution({ collapsible: true }),
@@ -376,6 +366,26 @@ const Map: Component = () => {
     //   }
     // });
 
+    const vectorTileSource = new VectorTileSource({
+      url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf',
+      format: new MVT({ featureClass: Feature }),
+      maxZoom: 14,
+    });
+
+    const vectorTileLayer = new VectorTileLayer({
+      source: vectorTileSource,
+      style: [],
+      declutter: false,
+    });
+
+    const clusterableVectorTileSource =
+      clusterableVectorTileSourceProxy(vectorTileSource);
+
+    clusterableVectorTileSource.init({
+      featureFilter: (feature: Feature, resolution?: number) =>
+        feature.get('type') === 'poi',
+    });
+
     let clusterLayer = new VectorLayer({
       // source: vectorTileMirrorSource,
       source: new Cluster({
@@ -419,6 +429,7 @@ const Map: Component = () => {
                 olMap.getView().getProjection()
               )
             ),
+            //            point,
             features: features,
             type: 'cluster',
           });
@@ -447,25 +458,25 @@ const Map: Component = () => {
       //   }),
       // }),
     });
-    olMap.addLayer(clusterLayer);
 
-    
+    olMap.addLayer(vectorTileLayer);
+    olMap.addLayer(clusterLayer);
 
     setMap(olMap);
 
-    console.log({
-      caller: 'Map / projections',
-      olMap,
-      projections: {
-        map: olMap.getView().getProjection(),
-        vectorSource: vectorLayer.getSource()?.getProjection(),
-        clusterSource: clusterLayer.getSource().getProjection(),
-        clusterSourceSource: clusterLayer
-          .getSource()
-          ?.getSource()
-          .getProjection(),
-      },
-    });
+    // console.log({
+    //   caller: 'Map / projections',
+    //   olMap,
+    //   projections: {
+    //     map: olMap.getView().getProjection(),
+    //     vectorSource: vectorLayer.getSource()?.getProjection(),
+    //     clusterSource: clusterLayer.getSource().getProjection(),
+    //     clusterSourceSource: clusterLayer
+    //       .getSource()
+    //       ?.getSource()
+    //       .getProjection(),
+    //   },
+    // });
   });
 
   return (