Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Re-trying the class extension approach.

This commit is contained in:
Eric van der Vlist 2023-01-20 12:01:30 +01:00
parent c70e7baa4b
commit 0722fca584
2 changed files with 33 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/map/Map.tsx
View File

@ -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,

52
src/lib/ClusterableVectorTileSource.ts
View File

@ -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({