Still working on clustering.

This commit is contained in:
Eric van der Vlist 2023-01-18 22:10:23 +01:00
parent fce0b54574
commit 66fc287e5c
3 changed files with 262 additions and 120 deletions

View File

@ -1,3 +1,11 @@
{
"overrides": [{ "filename": "**/fr.*", "language": "fr" }]
"overrides": [
{
"filename": "**/fr.*",
"language": "fr"
}
],
"words": [
"Clusterable"
]
}

View File

@ -49,6 +49,8 @@ import VectorTileSource from 'ol/source/VectorTile.js';
import MVT from 'ol/format/MVT.js';
import style from '../gpx/styles';
import { DepartureBoard } from '@suid/icons-material';
import deTileVectorSource from '../../lib/de-tile-vector-source';
import ClusterableVectorTileSource from '../../lib/ClusterableVectorTileSource';
const [getState, setState] = createSignal({
lon: 0,
@ -238,8 +240,7 @@ const Map: Component = () => {
zIndex: Infinity,
});
const vectorTileSource = new VectorTileSource({
format: new MVT({ featureClass: Feature }),
const clusterableVectorTileSource = new ClusterableVectorTileSource({
url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf',
maxZoom: 14,
});
@ -247,11 +248,11 @@ const Map: Component = () => {
console.log({
caller: 'Map / projections',
vector: vectorLayer.getSource()?.getProjection(),
vectorTile: vectorTileSource.getProjection(),
vectorTile: clusterableVectorTileSource.getProjection(),
});
const vectorTileLayer = new VectorTileLayer({
source: vectorTileSource,
source: clusterableVectorTileSource,
style: [],
declutter: false,
});
@ -262,7 +263,7 @@ const Map: Component = () => {
zoom: +getState().zoom,
rotation: +getState().rotation,
}),
layers: [tileLayer, vectorTileLayer, vectorLayer],
layers: [tileLayer, vectorLayer, vectorTileLayer],
target: target,
controls: new Collection<Control>([
new Attribution({ collapsible: true }),
@ -285,114 +286,123 @@ const Map: Component = () => {
olMap.on(['moveend'], changeListener);
olMap.on(['singleclick'], clickHandler);
// cf https://stackoverflow.com/questions/55161380/openlayers-cluster-with-mvt-vectortilesource-impossible
// // cf https://stackoverflow.com/questions/55161380/openlayers-cluster-with-mvt-vectortilesource-impossible
const vectorTileMirrorSource = new VectorSource();
let featuresForZ: Feature[] = [];
let viewZ = vectorTileLayer
.getSource()
.getTileGrid()
.getZForResolution(olMap.getView().getResolution());
// const vectorTileMirrorSource = new VectorSource();
// let featuresForZ: Feature[] = [];
// let viewZ = vectorTileLayer
// .getSource()
// .getTileGrid()
// .getZForResolution(olMap.getView().getResolution());
const vectorMirrorRefresh = () => {
console.log({
caller: 'Map / Cluster / vectorMirrorRefresh',
olMap,
vectorMirrorLayer,
viewZ,
featuresForZ,
});
vectorTileMirrorSource.clear();
if (featuresForZ[viewZ]) {
vectorTileMirrorSource.addFeatures(featuresForZ[viewZ]);
// vectorMirrorLayer.getSource()?.refresh();
}
//vectorMirrorLayer.changed();
};
vectorTileLayer.getSource()?.on('tileloadend', (evt) => {
const z = evt.tile.getTileCoord()[0];
// const features = evt.tile.getFeatures();
// features.forEach((feature: Feature) => {
// feature.setId(undefined);
// });
const features = evt.tile
.getFeatures()
.filter((feature: Feature) => feature.get('type') === 'poi')
.map((feature: Feature) => {
const center = olExtent.getCenter(feature.getGeometry().getExtent());
const centerLonLat = toLonLat(
center,
olMap.getView().getProjection()
);
const newFeature = feature.clone();
newFeature.setGeometry(new Point(centerLonLat));
// const vectorMirrorRefresh = () => {
// console.log({
// caller: 'Map / Cluster / on tileloadend / new feature',
// feature,
// center,
// centerLonLat,
// newFeature,
// caller: 'Map / Cluster / vectorMirrorRefresh',
// olMap,
// vectorMirrorLayer,
// viewZ,
// featuresForZ,
// });
return newFeature;
});
if (!Array.isArray(featuresForZ[z])) {
featuresForZ[z] = [];
}
featuresForZ[z] = featuresForZ[z].concat(features);
// evt.tile.setFeatures([]);
if (z === viewZ) {
vectorMirrorRefresh();
}
console.log({
caller: 'Map / Cluster / on tileloadend',
olMap,
z,
viewZ,
features,
vectorMirrorLayer,
featuresForZ,
});
});
// vectorTileMirrorSource.clear();
// if (featuresForZ[viewZ]) {
// vectorTileMirrorSource.addFeatures(featuresForZ[viewZ]);
// // vectorMirrorLayer.getSource()?.refresh();
// }
// //vectorMirrorLayer.changed();
// };
olMap.getView().on('change:resolution', function () {
// use VT features from the tile z level corresponding to view resolution
const newZ = vectorTileLayer
.getSource()
.getTileGrid()
.getZForResolution(olMap.getView().getResolution());
console.log({
caller: 'Map / Cluster / on change:resolution',
olMap,
newZ,
viewZ,
vectorMirrorLayer,
featuresForZ,
});
if (newZ !== viewZ) {
viewZ = newZ;
vectorMirrorRefresh();
}
});
// vectorTileLayer.getSource()?.on('tileloadend', (evt) => {
// const z = evt.tile.getTileCoord()[0];
// // const features = evt.tile.getFeatures();
// // features.forEach((feature: Feature) => {
// // feature.setId(undefined);
// // });
// const features = evt.tile
// .getFeatures()
// .filter((feature: Feature) => feature.get('type') === 'poi')
// .map((feature: Feature) => {
// const center = olExtent.getCenter(feature.getGeometry().getExtent());
// const centerLonLat = toLonLat(
// center,
// olMap.getView().getProjection()
// );
// const newFeature = feature.clone();
// newFeature.setGeometry(new Point(centerLonLat));
// // console.log({
// // caller: 'Map / Cluster / on tileloadend / new feature',
// // feature,
// // center,
// // centerLonLat,
// // newFeature,
// // });
// return newFeature;
// });
// if (!Array.isArray(featuresForZ[z])) {
// featuresForZ[z] = [];
// }
// featuresForZ[z] = featuresForZ[z].concat(features);
// // evt.tile.setFeatures([]);
// if (z === viewZ) {
// vectorMirrorRefresh();
// }
// console.log({
// caller: 'Map / Cluster / on tileloadend',
// olMap,
// z,
// viewZ,
// features,
// vectorMirrorLayer,
// featuresForZ,
// });
// });
let vectorMirrorLayer = new VectorLayer({
// olMap.getView().on('change:resolution', function () {
// // use VT features from the tile z level corresponding to view resolution
// const newZ = vectorTileLayer
// .getSource()
// .getTileGrid()
// .getZForResolution(olMap.getView().getResolution());
// console.log({
// caller: 'Map / Cluster / on change:resolution',
// olMap,
// newZ,
// viewZ,
// vectorMirrorLayer,
// featuresForZ,
// });
// if (newZ !== viewZ) {
// viewZ = newZ;
// vectorMirrorRefresh();
// }
// });
let clusterLayer = new VectorLayer({
// source: vectorTileMirrorSource,
source: new Cluster({
source: vectorTileMirrorSource,
// geometryFunction: (feature: Feature) => {
// // console.log({
// // caller: 'Map / Cluster / geometryFunction',
// // feature,
// // });
// // test data is linestrings
// // return new Point(
// // olExtent.getCenter(feature.getGeometry().getExtent())
// // );
// if (feature.get('type') === 'poi') {
// return feature.getGeometry();
// }
// return null;
// },
// source: deTileVectorSource(vectorLayer.getSource()),
source: clusterableVectorTileSource,
geometryFunction: (feature: Feature) => {
// console.log({
// caller: 'Map / Cluster / geometryFunction',
// feature,
// });
// test data is linestrings
// return new Point(
// olExtent.getCenter(feature.getGeometry().getExtent())
// );
if (feature.get('type') === 'poi') {
return new Point(
olExtent.getCenter(feature.getGeometry().getExtent())
);
// return new Point(
// toLonLat(
// olExtent.getCenter(feature.getGeometry().getExtent()),
// olMap.getView().getProjection()
// )
// );
}
return null;
},
createCluster: (point: Point, features: Feature[]) => {
// console.log({
// caller: 'Map / Cluster / createCluster',
@ -403,15 +413,21 @@ const Map: Component = () => {
//return features[0];
return new Feature({
geometry: point,
geometry: new Point(
toLonLat(
olExtent.getCenter(point.getExtent()),
olMap.getView().getProjection()
)
),
features: features,
type: 'cluster',
});
},
distance: 100,
minDistance: 10,
distance: 100000,
minDistance: 0,
}),
zIndex: Infinity,
style,
// style,
style: function (feature) {
// console.log({
// caller: 'Map / Cluster / style',
@ -431,19 +447,25 @@ const Map: Component = () => {
// }),
// }),
});
olMap.addLayer(vectorMirrorLayer);
olMap.addLayer(clusterLayer);
setMap(olMap);
console.log({
caller: 'Map / projections',
olMap,
projections: {
map: olMap.getView().getProjection(),
vectorSource: vectorLayer.getSource()?.getProjection(),
vectorTileMirrorSource: vectorTileMirrorSource.getProjection(),
vectorTileSource: vectorTileSource.getProjection(),
clusterSource: vectorMirrorLayer.getSource()?.getProjection(),
clusterSource: clusterLayer.getSource().getProjection(),
clusterSourceSource: clusterLayer
.getSource()
?.getSource()
.getProjection(),
},
});
setMap(olMap);
});
return (

View File

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