Still working on clustering.

src/lib/ClusterableVectorTileSource.ts

@@ -0,0 +1,112 @@
+import { Feature } from 'ol';
+import { equals, Extent } from 'ol/extent';
+import MVT from 'ol/format/MVT';
+import { fromLonLat, Projection } from 'ol/proj';
+import VectorTileSource from 'ol/source/VectorTile.js';
+
+class ClusterableVectorTileSource extends VectorTileSource {
+  extent: Extent | null = null;
+  extentProjected: Extent | null = null;
+  featuresSent: boolean = false;
+
+  changeHandler = () => {
+    this.featuresSent = false;
+    console.log({
+      caller: 'ClusterableVectorTileSource',
+      method: 'changeHandler',
+      this: this,
+    });
+  };
+
+  constructor(properties: any) {
+    properties.format = new MVT({ featureClass: Feature });
+    super(properties);
+    this.addEventListener('change', this.changeHandler);
+    console.log({
+      caller: 'ClusterableVectorTileSource',
+      method: 'constructor',
+      this: this,
+    });
+  }
+
+  loadFeatures = (
+    extent: Extent,
+    resolution: number,
+    projection: Projection
+  ) => {
+    console.log({
+      caller: 'ClusterableVectorTileSource',
+      method: 'loadFeatures',
+      extent,
+      resolution,
+      projection,
+      this: this,
+    });
+    if (this.extent === null || !equals(this.extent, extent)) {
+      this.extent = extent;
+      if (this.projection != null) {
+        this.extentProjected = fromLonLat(
+          extent.slice(0, 2),
+          this.projection
+        ).concat(fromLonLat(extent.slice(2), this.projection));
+      }
+    }
+    if (!this.featuresSent) {
+      super.dispatchEvent('change');
+    }
+    this.featuresSent = false;
+  };
+
+  getFeatures = () => {
+    const result =
+      this.extentProjected !== null
+        ? super.getFeaturesInExtent(this.extentProjected)
+        : [];
+    console.log({
+      caller: 'ClusterableVectorTileSource',
+      method: 'getFeatures',
+      result,
+      this: this,
+    });
+    //console.trace();
+    this.featuresSent = true;
+    return result;
+  };
+
+  getFeaturesInExtent = (extent: Extent) => {
+    const features = super.getFeaturesInExtent(extent);
+    console.log({
+      caller: 'ClusterableVectorTileSource',
+      method: 'getFeaturesInExtent',
+      extent,
+      features,
+      this: this,
+    });
+    return features;
+    // if (this.projection === null) {
+    //   return super.getFeaturesInExtent(extent);
+    // }
+    // return super.getFeaturesInExtent(
+    //   (this.extentProjected = fromLonLat(
+    //     extent.slice(0, 2),
+    //     this.projection
+    //   ).concat(fromLonLat(extent.slice(2), this.projection)))
+    // );
+  };
+
+  addEventListener = (type: string, listener: any) => {
+    console.log({
+      caller: 'ClusterableVectorTileSource',
+      method: 'addEventListener',
+      type,
+      listener,
+      this: this,
+    });
+    super.addEventListener(type, listener);
+    if (type === 'change') {
+      super.addEventListener('tileloadend', listener);
+    }
+  };
+}
+
+export default ClusterableVectorTileSource;