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

Back to the proxy approach...

This commit is contained in:
Eric van der Vlist 2023-01-20 12:58:56 +01:00
parent 0722fca584
commit 982cb722f7
2 changed files with 145 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,6 +52,7 @@ import { DepartureBoard } from '@suid/icons-material';
import deTileVectorSource from '../../lib/de-tile-vector-source'; import deTileVectorSource from '../../lib/de-tile-vector-source';
import ClusterableVectorTileSource from '../../lib/ClusterableVectorTileSource'; import ClusterableVectorTileSource from '../../lib/ClusterableVectorTileSource';
import clusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy'; import clusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy';
import ClusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy';
const [getState, setState] = createSignal({ const [getState, setState] = createSignal({
lon: 0, lon: 0,
@ -278,96 +279,9 @@ const Map: Component = () => {
// // 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 vectorTileSource = new VectorTileSource({
// 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({
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,
}); });
@ -377,29 +291,20 @@ const Map: Component = () => {
declutter: false, declutter: false,
}); });
// const clusterableVectorTileSource = const clusterableVectorTileSource = new ClusterableVectorTileSourceProxy({
// clusterableVectorTileSourceProxy(vectorTileSource);
// clusterableVectorTileSource.init({
// featureFilter: (feature: Feature, resolution?: number) =>
// feature.get('type') === 'poi',
// });
let clusterLayer = new VectorLayer({
// source: vectorTileMirrorSource,
source: new Cluster({
// source: deTileVectorSource(vectorLayer.getSource()),
source: vectorTileSource, source: vectorTileSource,
});
const clusterSource = new Cluster({
source: clusterableVectorTileSource,
distance: 4000000,
//minDistance: 200,
geometryFunction: (feature: Feature) => { geometryFunction: (feature: Feature) => {
// console.log({ // console.log({
// caller: 'Map / Cluster / geometryFunction', // caller: 'Map / Cluster / geometryFunction',
// feature, // feature,
// }); // });
// test data is linestrings if (feature.get('sub-type') === 'tourism') {
// return new Point(
// olExtent.getCenter(feature.getGeometry().getExtent())
// );
if (feature.get('type') === 'poi') {
return new Point( return new Point(
olExtent.getCenter(feature.getGeometry().getExtent()) olExtent.getCenter(feature.getGeometry().getExtent())
); );
@ -419,8 +324,6 @@ const Map: Component = () => {
// features, // features,
// }); // });
//return features[0];
return new Feature({ return new Feature({
geometry: new Point( geometry: new Point(
toLonLat( toLonLat(
@ -433,9 +336,10 @@ const Map: Component = () => {
type: 'cluster', type: 'cluster',
}); });
}, },
// distance: 100000, });
// minDistance: 0,
}), let clusterLayer = new VectorLayer({
source: clusterSource,
zIndex: Infinity, zIndex: Infinity,
// style, // style,
style: function (feature) { style: function (feature) {
@ -445,17 +349,11 @@ const Map: Component = () => {
// }); // });
return new Style({ return new Style({
image: new Circle({ image: new Circle({
radius: feature.get('features').length * 5, radius: 20,
fill: new Fill({ color: 'black' }), fill: new Fill({ color: 'black' }),
}), }),
}); });
}, },
// style: new Style({
// image: new Circle({
// radius: 20,
// fill: new Fill({ color: 'black' }),
// }),
// }),
}); });
olMap.addLayer(vectorTileLayer); olMap.addLayer(vectorTileLayer);

100
src/lib/ClusterableVectorTileSourceProxy.ts
View File

@ -1,72 +1,35 @@
import { cloneDeep } from 'lodash';
import { Feature } from 'ol';
import { equals, Extent } from 'ol/extent'; import { equals, Extent } from 'ol/extent';
import { fromLonLat, Projection } from 'ol/proj'; import { fromLonLat, Projection } from 'ol/proj';
import VectorTileSource from 'ol/source/VectorTile.js'; import VectorTileSource from 'ol/source/VectorTile.js';
const CLUSTER_PROPS = '[cluster props]';
type FeatureFilter = (
feature: Feature,
resolution: number | undefined
) => boolean;
const passAllFeatureFilter = (feature: Feature, resolution?: number) => true;
interface Props {
extent: Extent | null;
resolution?: number;
extentProjected: Extent | null;
featuresSent: boolean;
featureFilter: FeatureFilter;
}
interface Options { interface Options {
featureFilter?: FeatureFilter; source: VectorTileSource;
} }
const initialProps = { class ClusterableVectorTileSourceProxy {
extent: null, extent?: Extent;
extentProjected: null, resolution?: number;
featuresSent: false, extentProjected?: Extent;
featureFilter: passAllFeatureFilter, featuresSent: boolean = false;
}; proxy?: typeof Proxy;
const getProps = (vectorTileSource: VectorTileSource) =>
vectorTileSource.get(CLUSTER_PROPS) as Props;
const setProps = (vectorTileSource: VectorTileSource, props: Props) =>
vectorTileSource.set(CLUSTER_PROPS, props);
const overloads = {
init: (target: VectorTileSource) => {
return (options?: Options) => {
let props = cloneDeep(initialProps);
if (options) {
props = { ...props, ...options };
}
setProps(target, props);
};
},
overloads = {
loadFeatures: (target: VectorTileSource) => { loadFeatures: (target: VectorTileSource) => {
return (extent: Extent, resolution: number, projection: Projection) => { return (extent: Extent, resolution: number, projection: Projection) => {
let props = getProps(target); this.resolution = resolution;
props.resolution = resolution; if (this.extent === undefined || !equals(this.extent, extent)) {
if (props.extent === null || !equals(props.extent, extent)) { this.extent = extent;
props.extent = extent;
if (target.getProjection() != null) { if (target.getProjection() != null) {
props.extentProjected = fromLonLat( this.extentProjected = fromLonLat(
extent.slice(0, 2), extent.slice(0, 2),
target.getProjection() target.getProjection()
).concat(fromLonLat(extent.slice(2), props.projection)); ).concat(fromLonLat(extent.slice(2), this.projection));
} }
} }
if (!props.featuresSent) { if (!this.featuresSent) {
target.dispatchEvent('change'); target.dispatchEvent('change');
} }
props.featuresSent = false; this.featuresSent = false;
setProps(target, props);
// console.log({ // console.log({
// caller: 'clusterableVectorTileSourceProxy', // caller: 'clusterableVectorTileSourceProxy',
// overload: 'loadFeatures', // overload: 'loadFeatures',
@ -74,27 +37,24 @@ const overloads = {
// resolution, // resolution,
// projection, // projection,
// target: target, // target: target,
// props, // this,
// }); // });
}; };
}, },
getFeatures: (target: VectorTileSource) => { getFeatures: (target: VectorTileSource) => {
return () => { return () => {
let props = getProps(target); const result =
const result = ( this.extentProjected !== undefined
props.extentProjected !== null ? target.getFeaturesInExtent(this.extentProjected)
? target.getFeaturesInExtent(props.extentProjected) : [];
: []
).filter((feature) => props.featureFilter(feature, props.resolution));
//console.trace(); //console.trace();
props.featuresSent = true; this.featuresSent = true;
setProps(target, props);
// console.log({ // console.log({
// caller: 'clusterableVectorTileSourceProxy', // caller: 'clusterableVectorTileSourceProxy',
// overload: 'getFeatures', // overload: 'getFeatures',
// result, // result,
// props, // this,
// target, // target,
// }); // });
return result; return result;
@ -116,14 +76,15 @@ const overloads = {
} }
}; };
}, },
}; };
const clusterableVectorTileSourceProxy = (vectorTileSource: VectorTileSource) => constructor(options: Options) {
new Proxy(vectorTileSource, { const { source } = options;
this.proxy = new Proxy(source, {
get: (target, prop, receiver) => { get: (target, prop, receiver) => {
let result; let result;
if (prop in overloads) { if (prop in this.overloads) {
result = overloads[prop as keyof typeof overloads](target); result = this.overloads[prop as keyof typeof this.overloads](target);
} else { } else {
result = Reflect.get(target, prop, receiver); result = Reflect.get(target, prop, receiver);
} }
@ -138,5 +99,8 @@ const clusterableVectorTileSourceProxy = (vectorTileSource: VectorTileSource) =>
return result; return result;
}, },
}); });
return this.proxy;
}
}
export default clusterableVectorTileSourceProxy; export default ClusterableVectorTileSourceProxy;