Feature: more or less working version of clustering, clusters of multiple layers are joined

This commit is contained in:
Pieter Vander Vennet 2025-07-24 15:57:30 +02:00
parent 5bc8f11d24
commit 0048c091d0
9 changed files with 143 additions and 65 deletions

View file

@ -1,25 +1,27 @@
import { Store, UIEventSource } from "../UIEventSource"
import FilteredLayer from "../../Models/FilteredLayer"
import { Feature } from "geojson"
import { Feature, Geometry } from "geojson"
import { OsmTags } from "../../Models/OsmFeature"
export interface FeatureSource<T extends Feature = Feature> {
export interface FeatureSource<T extends Feature = Feature<Geometry, OsmTags>> {
features: Store<T[]>
}
export interface UpdatableFeatureSource<T extends Feature = Feature> extends FeatureSource<T> {
export interface UpdatableFeatureSource<T extends Feature = Feature<Geometry, OsmTags>> extends FeatureSource<T> {
/**
* Forces an update and downloads the data, even if the feature source is supposed to be active
*/
updateAsync()
updateAsync(): void
}
export interface WritableFeatureSource<T extends Feature = Feature> extends FeatureSource<T> {
export interface WritableFeatureSource<T extends Feature = Feature<Geometry, OsmTags>> extends FeatureSource<T> {
features: UIEventSource<T[]>
}
/**
* A feature source which only contains features for the defined layer
*/
export interface FeatureSourceForLayer<T extends Feature = Feature> extends FeatureSource<T> {
export interface FeatureSourceForLayer<T extends Feature = Feature<Geometry, OsmTags>> extends FeatureSource<T> {
readonly layer: FilteredLayer
}

View file

@ -11,17 +11,17 @@ import { UIEventSource } from "../UIEventSource"
* If this is the case, multiple objects with a different _matching_layer_id are generated.
* In any case, this featureSource marks the objects with _matching_layer_id
*/
export default class PerLayerFeatureSourceSplitter<T extends FeatureSource = FeatureSource> {
public readonly perLayer: ReadonlyMap<string, T>
export default class PerLayerFeatureSourceSplitter<T extends Feature, SRC extends FeatureSource<T>> {
public readonly perLayer: ReadonlyMap<string, SRC>
constructor(
layers: FilteredLayer[],
upstream: FeatureSource,
upstream: FeatureSource<T>,
options?: {
constructStore?: (features: UIEventSource<Feature[]>, layer: FilteredLayer) => T
handleLeftovers?: (featuresWithoutLayer: Feature[]) => void
constructStore?: (features: UIEventSource<T[]>, layer: FilteredLayer) => SRC
handleLeftovers?: (featuresWithoutLayer: T[]) => void
}
) {
const knownLayers = new Map<string, T>()
const knownLayers = new Map<string, SRC>()
/**
* Keeps track of the ids that are included per layer.
* Used to know if the downstream feature source needs to be pinged
@ -32,12 +32,12 @@ export default class PerLayerFeatureSourceSplitter<T extends FeatureSource = Fea
const constructStore =
options?.constructStore ?? ((store, layer) => new SimpleFeatureSource(layer, store))
for (const layer of layers) {
const src = new UIEventSource<Feature[]>([])
const src = new UIEventSource<T[]>([])
layerSources.set(layer.layerDef.id, src)
knownLayers.set(layer.layerDef.id, <T>constructStore(src, layer))
knownLayers.set(layer.layerDef.id, <SRC>constructStore(src, layer))
}
upstream.features.addCallbackAndRunD((features) => {
upstream.features.addCallbackAndRunD((features: T[]) => {
if (layers === undefined) {
return
}
@ -51,7 +51,7 @@ export default class PerLayerFeatureSourceSplitter<T extends FeatureSource = Fea
*/
const hasChanged: boolean[] = layers.map(() => false)
const newIndices: Set<string>[] = layers.map(() => new Set<string>())
const noLayerFound: Feature[] = []
const noLayerFound: T[] = []
for (const layer of layers) {
featuresPerLayer.set(layer.layerDef.id, [])
@ -115,7 +115,7 @@ export default class PerLayerFeatureSourceSplitter<T extends FeatureSource = Fea
})
}
public forEach(f: (featureSource: T) => void) {
public forEach(f: ((src: SRC) => void)) {
for (const fs of this.perLayer.values()) {
f(fs)
}

View file

@ -1,24 +1,19 @@
import { Feature as GeojsonFeature, Geometry } from "geojson"
import { Feature, Feature as GeojsonFeature, Geometry } from "geojson"
import { Store, UIEventSource } from "../../UIEventSource"
import { FeatureSourceForTile, UpdatableFeatureSource } from "../FeatureSource"
import { MvtToGeojson } from "mvt-to-geojson"
import { OsmTags } from "../../../Models/OsmFeature"
export default class MvtSource implements FeatureSourceForTile, UpdatableFeatureSource {
public readonly features: Store<GeojsonFeature<Geometry, { [name: string]: any }>[]>
public readonly features: Store<GeojsonFeature<Geometry, OsmTags>[]>
public readonly x: number
public readonly y: number
public readonly z: number
private readonly _url: string
private readonly _layerName: string
private readonly _features: UIEventSource<
GeojsonFeature<
Geometry,
{
[name: string]: any
}
>[]
> = new UIEventSource<GeojsonFeature<Geometry, { [p: string]: any }>[]>([])
GeojsonFeature<Geometry, OsmTags>[]
> = new UIEventSource<GeojsonFeature<Geometry, OsmTags>[]>([])
private currentlyRunning: Promise<any>
constructor(
@ -26,11 +21,9 @@ export default class MvtSource implements FeatureSourceForTile, UpdatableFeature
x: number,
y: number,
z: number,
layerName?: string,
isActive?: Store<boolean>
) {
this._url = url
this._layerName = layerName
this.x = x
this.y = y
this.z = z
@ -61,7 +54,7 @@ export default class MvtSource implements FeatureSourceForTile, UpdatableFeature
return
}
const buffer = await result.arrayBuffer()
const features = MvtToGeojson.fromBuffer(buffer, this.x, this.y, this.z)
const features = <Feature<Geometry, OsmTags>[]>MvtToGeojson.fromBuffer(buffer, this.x, this.y, this.z)
for (const feature of features) {
const properties = feature.properties
if (!properties["osm_type"]) {

View file

@ -1,14 +1,15 @@
import { UIEventSource } from "../../UIEventSource"
import FilteredLayer from "../../../Models/FilteredLayer"
import { FeatureSourceForLayer } from "../FeatureSource"
import { Feature } from "geojson"
import { Feature, Geometry } from "geojson"
import { OsmTags } from "../../../Models/OsmFeature"
export default class SimpleFeatureSource implements FeatureSourceForLayer {
public readonly features: UIEventSource<Feature[]>
export default class SimpleFeatureSource<T extends Feature = Feature<Geometry, OsmTags>> implements FeatureSourceForLayer<T> {
public readonly features: UIEventSource<T[]>
public readonly layer: FilteredLayer
constructor(layer: FilteredLayer, featureSource?: UIEventSource<Feature[]>) {
constructor(layer: FilteredLayer, featureSource?: UIEventSource<T[]>) {
this.layer = layer
this.features = featureSource ?? new UIEventSource<Feature[]>([])
this.features = featureSource ?? new UIEventSource<T[]>([])
}
}

View file

@ -2,7 +2,6 @@ import { FeatureSource } from "../FeatureSource"
import { Feature, Point } from "geojson"
import { ImmutableStore, Store, UIEventSource } from "../../UIEventSource"
import { GeoOperations } from "../../GeoOperations"
import StaticFeatureSource from "../Sources/StaticFeatureSource"
import { Tiles } from "../../../Models/TileRange"
export interface ClusteringOptions {
@ -19,9 +18,14 @@ export interface ClusteringOptions {
showSummaryAt?: "tilecenter" | "average"
}
interface SummaryProperties {
id: string,
total: number,
tile_id: number
}
export class ClusteringFeatureSource<T extends Feature<Point> = Feature<Point>> implements FeatureSource<T> {
public readonly summaryPoints: FeatureSource
private readonly id: string
private readonly showSummaryAt: "tilecenter" | "average"
features: Store<T[]>
@ -42,11 +46,9 @@ export class ClusteringFeatureSource<T extends Feature<Point> = Feature<Point>>
const clusterCutoff = options?.dontClusterAboveZoom ?? 17
const doCluster = options?.dontClusterAboveZoom === undefined ? new ImmutableStore(true) : currentZoomlevel.map(zoom => zoom <= clusterCutoff)
const cutoff = options?.cutoff ?? 20
const summaryPoints = new UIEventSource<Feature<Point>[]>([])
currentZoomlevel = currentZoomlevel.stabilized(500)
this.summaryPoints = new StaticFeatureSource(summaryPoints)
const summaryPoints = new UIEventSource<Feature<Point, SummaryProperties>[]>([])
currentZoomlevel = currentZoomlevel.stabilized(500).map(z => Math.floor(z))
this.features = (upstream.features.map(features => {
console.log(">>> Updating features in clusters ", this.id, ":", features)
if (!doCluster.data) {
summaryPoints.set([])
return features
@ -55,7 +57,7 @@ export class ClusteringFeatureSource<T extends Feature<Point> = Feature<Point>>
const z = currentZoomlevel.data
const perTile = GeoOperations.spreadIntoBboxes(features, z)
const resultingFeatures = []
const summary: Feature<Point>[] = []
const summary: Feature<Point, SummaryProperties>[] = []
for (const tileIndex of perTile.keys()) {
const tileFeatures: Feature<Point>[] = perTile.get(tileIndex)
if (tileFeatures.length > cutoff) {
@ -69,11 +71,12 @@ export class ClusteringFeatureSource<T extends Feature<Point> = Feature<Point>>
}, [doCluster, currentZoomlevel]))
ClusterGrouping.singleton.registerSource(summaryPoints)
}
private createSummaryFeature(features: Feature<Point>[], tileId: number): Feature<Point> {
private createSummaryFeature(features: Feature<Point>[], tileId: number): Feature<Point, SummaryProperties> {
let lon: number
let lat: number
@ -91,7 +94,7 @@ export class ClusteringFeatureSource<T extends Feature<Point> = Feature<Point>>
lon = lonSum / features.length
lat = latSum / features.length
}
return <Feature<Point>>{
return {
type: "Feature",
geometry: {
type: "Point",
@ -99,9 +102,68 @@ export class ClusteringFeatureSource<T extends Feature<Point> = Feature<Point>>
},
properties: {
id: "summary_" + this.id + "_" + tileId,
z,
total_metric: "" + features.length
tile_id: tileId,
total: features.length
}
}
}
}
/**
* Groups multiple summaries together
*/
export class ClusterGrouping implements FeatureSource<Feature<Point, { total_metric: string }>> {
private readonly _features: UIEventSource<Feature<Point, { total_metric: string }>[]> = new UIEventSource([])
public readonly features: Store<Feature<Point, { total_metric: string }>[]> = this._features
public static readonly singleton = new ClusterGrouping()
public readonly isDirty = new UIEventSource(false)
private constructor() {
this.isDirty.stabilized(200).addCallback(dirty => {
if (dirty) {
this.update()
}
})
}
private allSource: Store<Feature<Point, { total: number, tile_id: number }>[]>[] = []
private update() {
const countPerTile = new Map<number, number>()
for (const source of this.allSource) {
for (const f of source.data) {
const id = f.properties.tile_id
const count = f.properties.total + (countPerTile.get(id) ?? 0)
countPerTile.set(id, count)
}
}
const features: Feature<Point, { total_metric: string, id: string }>[] = []
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
},
geometry: {
type: "Point",
coordinates
}
})
}
this._features.set(features)
this.isDirty.set(false)
}
public registerSource(features: Store<Feature<Point, SummaryProperties>[]>) {
this.allSource.push(features)
features.addCallbackAndRun(() => {
//this.isDirty.set(true)
this.update()
})
}
}