Back to the proxy approach...
This commit is contained in:
vdv committed
1 parent
0722fca584
commit
982cb722f7
2 files changed
+145
-283
No files matched your search
+50
-152
@@ -52,6 +52,7 @@ import { DepartureBoard } from '@suid/icons-material';
|
||||
import deTileVectorSource from '../../lib/de-tile-vector-source';
|
||||
import ClusterableVectorTileSource from '../../lib/ClusterableVectorTileSource';
|
||||
import clusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy';
|
||||
import ClusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy';
|
||||
|
||||
const [getState, setState] = createSignal({
|
||||
lon: 0,
|
||||
@@ -278,96 +279,9 @@ const Map: Component = () => {
|
||||
|
||||
// // 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 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));
|
||||
// // 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,
|
||||
// });
|
||||
// });
|
||||
|
||||
// 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();
|
||||
// }
|
||||
// });
|
||||
|
||||
const vectorTileSource = new ClusterableVectorTileSource({
|
||||
const vectorTileSource = new VectorTileSource({
|
||||
url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf',
|
||||
format: new MVT({ featureClass: Feature }),
|
||||
maxZoom: 14,
|
||||
});
|
||||
|
||||
@@ -377,65 +291,55 @@ const Map: Component = () => {
|
||||
declutter: false,
|
||||
});
|
||||
|
||||
// const clusterableVectorTileSource =
|
||||
// clusterableVectorTileSourceProxy(vectorTileSource);
|
||||
const clusterableVectorTileSource = new ClusterableVectorTileSourceProxy({
|
||||
source: vectorTileSource,
|
||||
});
|
||||
|
||||
// clusterableVectorTileSource.init({
|
||||
// featureFilter: (feature: Feature, resolution?: number) =>
|
||||
// feature.get('type') === 'poi',
|
||||
// });
|
||||
const clusterSource = new Cluster({
|
||||
source: clusterableVectorTileSource,
|
||||
distance: 4000000,
|
||||
//minDistance: 200,
|
||||
geometryFunction: (feature: Feature) => {
|
||||
// console.log({
|
||||
// caller: 'Map / Cluster / geometryFunction',
|
||||
// feature,
|
||||
// });
|
||||
if (feature.get('sub-type') === 'tourism') {
|
||||
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',
|
||||
// point,
|
||||
// features,
|
||||
// });
|
||||
|
||||
return new Feature({
|
||||
geometry: new Point(
|
||||
toLonLat(
|
||||
olExtent.getCenter(point.getExtent()),
|
||||
olMap.getView().getProjection()
|
||||
)
|
||||
),
|
||||
// point,
|
||||
features: features,
|
||||
type: 'cluster',
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
let clusterLayer = new VectorLayer({
|
||||
// source: vectorTileMirrorSource,
|
||||
source: new Cluster({
|
||||
// source: deTileVectorSource(vectorLayer.getSource()),
|
||||
source: vectorTileSource,
|
||||
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',
|
||||
// point,
|
||||
// features,
|
||||
// });
|
||||
|
||||
//return features[0];
|
||||
|
||||
return new Feature({
|
||||
geometry: new Point(
|
||||
toLonLat(
|
||||
olExtent.getCenter(point.getExtent()),
|
||||
olMap.getView().getProjection()
|
||||
)
|
||||
),
|
||||
// point,
|
||||
features: features,
|
||||
type: 'cluster',
|
||||
});
|
||||
},
|
||||
// distance: 100000,
|
||||
// minDistance: 0,
|
||||
}),
|
||||
source: clusterSource,
|
||||
zIndex: Infinity,
|
||||
// style,
|
||||
style: function (feature) {
|
||||
@@ -445,17 +349,11 @@ const Map: Component = () => {
|
||||
// });
|
||||
return new Style({
|
||||
image: new Circle({
|
||||
radius: feature.get('features').length * 5,
|
||||
radius: 20,
|
||||
fill: new Fill({ color: 'black' }),
|
||||
}),
|
||||
});
|
||||
},
|
||||
// style: new Style({
|
||||
// image: new Circle({
|
||||
// radius: 20,
|
||||
// fill: new Fill({ color: 'black' }),
|
||||
// }),
|
||||
// }),
|
||||
});
|
||||
|
||||
olMap.addLayer(vectorTileLayer);
|
||||
|
||||
Reference in new issue
Block a user