Clustering tileVectorSource...
This commit is contained in:
parent
370a4fa90c
commit
fce0b54574
|
|
@ -10,7 +10,7 @@ import Attribution from 'ol/control/Attribution';
|
|||
import Rotate from 'ol/control/Rotate';
|
||||
import ScaleLine from 'ol/control/ScaleLine';
|
||||
import Control from 'ol/control/Control';
|
||||
import { useGeographic as olUseGeographic } from 'ol/proj';
|
||||
import { toLonLat, useGeographic as olUseGeographic } from 'ol/proj';
|
||||
import DragRotate from 'ol/interaction/DragRotate';
|
||||
|
||||
import 'ol/ol.css';
|
||||
|
|
@ -48,6 +48,7 @@ import VectorTileLayer from 'ol/layer/VectorTile';
|
|||
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';
|
||||
|
||||
const [getState, setState] = createSignal({
|
||||
lon: 0,
|
||||
|
|
@ -243,6 +244,12 @@ const Map: Component = () => {
|
|||
maxZoom: 14,
|
||||
});
|
||||
|
||||
console.log({
|
||||
caller: 'Map / projections',
|
||||
vector: vectorLayer.getSource()?.getProjection(),
|
||||
vectorTile: vectorTileSource.getProjection(),
|
||||
});
|
||||
|
||||
const vectorTileLayer = new VectorTileLayer({
|
||||
source: vectorTileSource,
|
||||
style: [],
|
||||
|
|
@ -282,7 +289,10 @@ const Map: Component = () => {
|
|||
|
||||
const vectorTileMirrorSource = new VectorSource();
|
||||
let featuresForZ: Feature[] = [];
|
||||
let viewZ: number = floor(+getState().zoom) - 1;
|
||||
let viewZ = vectorTileLayer
|
||||
.getSource()
|
||||
.getTileGrid()
|
||||
.getZForResolution(olMap.getView().getResolution());
|
||||
|
||||
const vectorMirrorRefresh = () => {
|
||||
console.log({
|
||||
|
|
@ -295,19 +305,42 @@ const Map: Component = () => {
|
|||
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();
|
||||
// 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();
|
||||
}
|
||||
|
|
@ -343,27 +376,73 @@ const Map: Component = () => {
|
|||
});
|
||||
|
||||
let vectorMirrorLayer = new VectorLayer({
|
||||
// source: vectorTileMirrorSource,
|
||||
source: new Cluster({
|
||||
source: vectorTileMirrorSource,
|
||||
geometryFunction: function (feature: Feature) {
|
||||
// test data is linestrings
|
||||
return new Point(
|
||||
olExtent.getCenter(feature.getGeometry().getExtent())
|
||||
);
|
||||
// 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;
|
||||
// },
|
||||
createCluster: (point: Point, features: Feature[]) => {
|
||||
// console.log({
|
||||
// caller: 'Map / Cluster / createCluster',
|
||||
// point,
|
||||
// features,
|
||||
// });
|
||||
|
||||
// return features[0];
|
||||
|
||||
return new Feature({
|
||||
geometry: point,
|
||||
features: features,
|
||||
});
|
||||
},
|
||||
distance: 100,
|
||||
minDistance: 10,
|
||||
}),
|
||||
zIndex: Infinity,
|
||||
style,
|
||||
// style: function (feature) {
|
||||
// return new Style({
|
||||
// image: new Circle({
|
||||
// radius: feature.get('features').length * 5,
|
||||
// fill: new Fill({ color: 'black' }),
|
||||
// }),
|
||||
// });
|
||||
// },
|
||||
style: function (feature) {
|
||||
// console.log({
|
||||
// caller: 'Map / Cluster / style',
|
||||
// feature,
|
||||
// });
|
||||
return new Style({
|
||||
image: new Circle({
|
||||
radius: feature.get('features').length * 5,
|
||||
fill: new Fill({ color: 'black' }),
|
||||
}),
|
||||
});
|
||||
},
|
||||
// style: new Style({
|
||||
// image: new Circle({
|
||||
// radius: 20,
|
||||
// fill: new Fill({ color: 'black' }),
|
||||
// }),
|
||||
// }),
|
||||
});
|
||||
olMap.addLayer(vectorMirrorLayer);
|
||||
|
||||
console.log({
|
||||
caller: 'Map / projections',
|
||||
olMap,
|
||||
map: olMap.getView().getProjection(),
|
||||
vectorSource: vectorLayer.getSource()?.getProjection(),
|
||||
vectorTileMirrorSource: vectorTileMirrorSource.getProjection(),
|
||||
vectorTileSource: vectorTileSource.getProjection(),
|
||||
clusterSource: vectorMirrorLayer.getSource()?.getProjection(),
|
||||
});
|
||||
|
||||
setMap(olMap);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue