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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
cSpell.json
View File

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

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

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

112
src/lib/ClusterableVectorTileSource.ts Normal file
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;