Feature(clustering): fix count update on filters, fix hiding when zoomed out to much

This commit is contained in:
Pieter Vander Vennet 2025-07-24 19:28:34 +02:00
parent 0048c091d0
commit 63e9d20255
5 changed files with 26 additions and 21 deletions

View file

@ -1,12 +1,13 @@
import { Store, UIEventSource } from "../../UIEventSource"
import FilteredLayer from "../../../Models/FilteredLayer"
import { FeatureSource } from "../FeatureSource"
import { Feature } from "geojson"
import { Feature, Geometry } from "geojson"
import { GlobalFilter } from "../../../Models/GlobalFilter"
import { OsmTags } from "../../../Models/OsmFeature"
export default class FilteringFeatureSource implements FeatureSource {
public features: UIEventSource<Feature[]> = new UIEventSource([])
private readonly upstream: FeatureSource
export default class FilteringFeatureSource<T extends Feature = Feature<Geometry, OsmTags>> implements FeatureSource<T> {
public readonly features: UIEventSource<T[]> = new UIEventSource([])
private readonly upstream: FeatureSource<T>
private readonly _fetchStore?: (id: string) => Store<Record<string, string>>
private readonly _globalFilters?: Store<GlobalFilter[]>
private readonly _alreadyRegistered = new Set<Store<any>>()
@ -18,7 +19,7 @@ export default class FilteringFeatureSource implements FeatureSource {
constructor(
layer: FilteredLayer,
upstream: FeatureSource,
upstream: FeatureSource<T>,
fetchStore?: (id: string) => Store<Record<string, string>>,
globalFilters?: Store<GlobalFilter[]>,
metataggingUpdated?: Store<any>,
@ -40,7 +41,7 @@ export default class FilteringFeatureSource implements FeatureSource {
})
layer.appliedFilters.forEach((value) =>
value.addCallback((_) => {
value.addCallback(() => {
this.update()
})
)
@ -68,7 +69,7 @@ export default class FilteringFeatureSource implements FeatureSource {
private update() {
const layer = this._layer
const features: Feature[] = this.upstream.features.data ?? []
const features: T[] = this.upstream.features.data ?? []
const includedFeatureIds = new Set<string>()
const globalFilters = this._globalFilters?.data?.map((f) => f)
const zoomlevel = this._zoomlevel?.data
@ -121,10 +122,9 @@ export default class FilteringFeatureSource implements FeatureSource {
}
this._alreadyRegistered.add(src)
const self = this
// Add a callback as a changed tag might change the filter
src.addCallbackAndRunD((_) => {
self._is_dirty.setData(true)
src.addCallbackAndRunD(() => {
this._is_dirty.setData(true)
})
}
}

View file

@ -12,8 +12,8 @@ export class IfVisibleFeatureSource<T extends Feature> implements FeatureSource<
let dirty = false
upstream.features.addCallbackAndRun(features => {
if (!visible.data) {
console.log(">>> not writing data as not visible")
dirty = true
this._features.set([])
return
}
this._features.set(features)

View file

@ -140,13 +140,14 @@ export class ClusterGrouping implements FeatureSource<Feature<Point, { total_met
}
}
const features: Feature<Point, { total_metric: string, id: string }>[] = []
const now = new Date().getTime() + ""
for (const tileId of countPerTile.keys()) {
const coordinates = Tiles.centerPointOf(tileId)
features.push({
type: "Feature",
properties: {
total_metric: "" + countPerTile.get(tileId),
id: "clustered_all_" + tileId
id: "clustered_all_" + tileId + "_" + now // We add the date to force a fresh ID every time, this makes sure values are updated
},
geometry: {
type: "Point",

View file

@ -79,12 +79,12 @@ export class PointRenderingLayer {
}
allowed_location_codes.forEach((code) => {
const marker = this._allMarkers.get(<OsmId>selected.properties.id)
.get(code)
?.get(code)
?.getElement()
if (marker === undefined) {
return
}
marker?.classList?.add("selected")
marker.classList?.add("selected")
this._markedAsSelected.push(marker)
})
})

View file

@ -388,20 +388,26 @@ export default class ShowDataLayer {
})
}
/**
* Show the data, unless they are clustered.
* This method does _not_ add the clusters themselves to the map,
* this should be done independently. In a themeViewGui, this is done by the 'addSpecialLayers'
* @see ClusterGrouping
* @param mlmap
* @param state
* @param options
*/
public static showLayerClustered(mlmap: Store<MlMap>,
state: { mapProperties: { zoom: UIEventSource<number> } },
options: ShowDataLayerOptions & { layer: LayerConfig }
) {
options.preprocessPoints = feats => {
const clustering = new ClusteringFeatureSource(feats, state.mapProperties.zoom.map(z => z + 2),
options.preprocessPoints = feats =>
new ClusteringFeatureSource(feats, state.mapProperties.zoom.map(z => z + 2),
options.layer.id,
{
cutoff: 7,
showSummaryAt: "tilecenter"
})
return clustering
}
new ShowDataLayer(mlmap, options)
}
@ -417,8 +423,6 @@ export default class ShowDataLayer {
})
}
public destruct() {}
private static zoomToCurrentFeatures(map: MlMap, features: Feature[]) {
if (!features || !map || features.length == 0) {
return