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', url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf',
format: new MVT({ featureClass: Feature }),
maxZoom: 14, maxZoom: 14,
}); });
@ -378,19 +377,19 @@ const Map: Component = () => {
declutter: false, declutter: false,
}); });
const clusterableVectorTileSource = // const clusterableVectorTileSource =
clusterableVectorTileSourceProxy(vectorTileSource); // clusterableVectorTileSourceProxy(vectorTileSource);
clusterableVectorTileSource.init({ // clusterableVectorTileSource.init({
featureFilter: (feature: Feature, resolution?: number) => // featureFilter: (feature: Feature, resolution?: number) =>
feature.get('type') === 'poi', // feature.get('type') === 'poi',
}); // });
let clusterLayer = new VectorLayer({ let clusterLayer = new VectorLayer({
// source: vectorTileMirrorSource, // source: vectorTileMirrorSource,
source: new Cluster({ source: new Cluster({
// source: deTileVectorSource(vectorLayer.getSource()), // source: deTileVectorSource(vectorLayer.getSource()),
source: clusterableVectorTileSource, source: vectorTileSource,
geometryFunction: (feature: Feature) => { geometryFunction: (feature: Feature) => {
// console.log({ // console.log({
// caller: 'Map / Cluster / geometryFunction', // caller: 'Map / Cluster / geometryFunction',
@ -434,8 +433,8 @@ const Map: Component = () => {
type: 'cluster', type: 'cluster',
}); });
}, },
distance: 100000, // distance: 100000,
minDistance: 0, // minDistance: 0,
}), }),
zIndex: Infinity, zIndex: Infinity,
// style, // style,

52
src/lib/ClusterableVectorTileSource.ts
View File

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