Re-trying the class extension approach.

src/lib/ClusterableVectorTileSource.ts

@@ -9,25 +9,19 @@ class ClusterableVectorTileSource extends VectorTileSource {
   resolution: number | undefined;
   extentProjected: Extent | null = null;
   featuresSent: boolean = false;
-  featureFilter = (feature: Feature, resolution: number | undefined) => feature;
 
-  changeHandler = () => {
-    this.featuresSent = false;
-    console.log({
-      caller: 'ClusterableVectorTileSource',
-      method: 'changeHandler',
-      this: this,
-    });
-  };
+  // changeHandler = () => {
+  //   this.featuresSent = false;
+  //   console.log({
+  //     caller: 'ClusterableVectorTileSource',
+  //     method: 'changeHandler',
+  //     this: this,
+  //   });
+  // };
 
   constructor(properties: any) {
     properties.format = new MVT({ featureClass: Feature });
-    const { featureFilter, ...otherProperties } = properties;
-    super(otherProperties);
-    if (featureFilter) {
-      this.featureFilter = featureFilter;
-    }
-    this.addEventListener('change', this.changeHandler);
+    super(properties);
     console.log({
       caller: 'ClusterableVectorTileSource',
       method: 'constructor',
@@ -69,7 +63,7 @@ class ClusterableVectorTileSource extends VectorTileSource {
       this.extentProjected !== null
         ? super.getFeaturesInExtent(this.extentProjected)
         : []
-    ).filter((feature) => this.featureFilter(feature, this.resolution));
+    );
     console.log({
       caller: 'ClusterableVectorTileSource',
       method: 'getFeatures',
@@ -81,18 +75,18 @@ class ClusterableVectorTileSource extends VectorTileSource {
     return result;
   };
 
-  getFeaturesInExtent = (extent: Extent) => {
-    const features = super
-      .getFeaturesInExtent(extent)
-      .filter((feature) => this.featureFilter(feature, this.resolution));
-    console.log({
-      caller: 'ClusterableVectorTileSource',
-      method: 'getFeaturesInExtent',
-      extent,
-      features,
-      this: this,
-    });
-    return features;
+  // getFeaturesInExtent = (extent: Extent) => {
+  //   const features = super
+  //     .getFeaturesInExtent(extent)
+  //     .filter((feature) => this.featureFilter(feature, this.resolution));
+  //   console.log({
+  //     caller: 'ClusterableVectorTileSource',
+  //     method: 'getFeaturesInExtent',
+  //     extent,
+  //     features,
+  //     this: this,
+  //   });
+  //   return features;
     // if (this.projection === null) {
     //   return super.getFeaturesInExtent(extent);
     // }
@@ -102,7 +96,7 @@ class ClusterableVectorTileSource extends VectorTileSource {
     //     this.projection
     //   ).concat(fromLonLat(extent.slice(2), this.projection)))
     // );
-  };
+  //};
 
   addEventListener = (type: string, listener: any) => {
     console.log({