I have a geojson and use openlayers to show features on a map. I cluster them. Now I want to add a filter to the UI, allowing users to filter the map depending on some feature properties.
const vectorSource = new VectorSource({
format: new GeoJSON(),
url: this.dataSourceUrl,
})
const clusterSource = new Cluster({
distance: 30,
minDistance: 1,
source: vectorSource,
geometryFunction: (feature) => {
if (feature.get('poles') < this.filter) {
return feature.getGeometry()
} else {
return null
}
},
})
const styleCache = {}
const clusterLayer = new VectorLayer({
source: clusterSource,
style: (feature) => {
const size = feature.get('features')?.length
let style = styleCache[size]
if (!style) {
style = new Style({
image: new CircleStyle({
radius: 10,
stroke: new Stroke({
color: '#fff',
}),
fill: new Fill({
color: '#3399CC',
}),
}),
text: new Text({
text: size.toString(),
fill: new Fill({
color: '#fff',
}),
}),
})
styleCache[size] = style
}
return style
},
})
this.map.addLayer(clusterLayer)
whereas this.filter
is just a number for now. If I update that filter, I want to redraw the clusters, but so far I am not successful.
First I thought I could use the changed()
method of Cluster:
https://openlayers.org/en/latest/apidoc/module-ol_source_Cluster-Cluster.html#changed
but it has no effect.
I found out how I can clear the clusters.
clusterSource.getSource().clear()
but that is really all. How can I update the clusters, now showing more or less feature points?
Thank you so much for your input!
You need to refresh the cluster source
clusterSource.refresh()
https://codesandbox.io/s/cluster-forked-u3pywq?file=/main.js