diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index a05e7fe..48749e0 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -366,9 +366,8 @@ const Map: Component = () => { // } // }); - const vectorTileSource = new VectorTileSource({ + const vectorTileSource = new ClusterableVectorTileSource({ url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf', - format: new MVT({ featureClass: Feature }), maxZoom: 14, }); @@ -378,19 +377,19 @@ const Map: Component = () => { declutter: false, }); - const clusterableVectorTileSource = - clusterableVectorTileSourceProxy(vectorTileSource); + // const clusterableVectorTileSource = + // clusterableVectorTileSourceProxy(vectorTileSource); - clusterableVectorTileSource.init({ - featureFilter: (feature: Feature, resolution?: number) => - feature.get('type') === 'poi', - }); + // clusterableVectorTileSource.init({ + // featureFilter: (feature: Feature, resolution?: number) => + // feature.get('type') === 'poi', + // }); let clusterLayer = new VectorLayer({ // source: vectorTileMirrorSource, source: new Cluster({ // source: deTileVectorSource(vectorLayer.getSource()), - source: clusterableVectorTileSource, + source: vectorTileSource, geometryFunction: (feature: Feature) => { // console.log({ // caller: 'Map / Cluster / geometryFunction', @@ -434,8 +433,8 @@ const Map: Component = () => { type: 'cluster', }); }, - distance: 100000, - minDistance: 0, + // distance: 100000, + // minDistance: 0, }), zIndex: Infinity, // style, diff --git a/src/lib/ClusterableVectorTileSource.ts b/src/lib/ClusterableVectorTileSource.ts index 1909ae9..81fbd19 100644 --- a/src/lib/ClusterableVectorTileSource.ts +++ b/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({