More work on clustering, more or less finished

This commit is contained in:
Pieter Vander Vennet 2021-09-27 14:45:48 +02:00
parent a3c16d6297
commit 215aebce19
8 changed files with 276 additions and 185 deletions

View file

@ -3,120 +3,178 @@ import {BBox} from "../../Logic/GeoOperations";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import {UIEventSource} from "../../Logic/UIEventSource";
import {Tiles} from "../../Models/TileRange";
import StaticFeatureSource from "../../Logic/FeatureSource/Sources/StaticFeatureSource";
export class TileHierarchyAggregator implements FeatureSource {
private _parent: TileHierarchyAggregator;
private _root: TileHierarchyAggregator;
private _z: number;
private _x: number;
private _y: number;
private _tileIndex: number
private _counter: SingleTileCounter
/**
* A feature source containing meta features.
* It will contain exactly one point for every tile of the specified (dynamic) zoom level
*/
export default class PerTileCountAggregator implements FeatureSource {
public readonly features: UIEventSource<{ feature: any; freshness: Date }[]> = new UIEventSource<{ feature: any; freshness: Date }[]>([]);
public readonly name: string = "PerTileCountAggregator"
private _subtiles: [TileHierarchyAggregator, TileHierarchyAggregator, TileHierarchyAggregator, TileHierarchyAggregator] = [undefined, undefined, undefined, undefined]
public totalValue: number = 0
private readonly perTile: Map<number, SingleTileCounter> = new Map<number, SingleTileCounter>()
private readonly _requestedZoomLevel: UIEventSource<number>;
private static readonly empty = []
public readonly features = new UIEventSource<{ feature: any, freshness: Date }[]>(TileHierarchyAggregator.empty)
public readonly name;
constructor(requestedZoomLevel: UIEventSource<number>) {
this._requestedZoomLevel = requestedZoomLevel;
const self = this;
this._requestedZoomLevel.addCallbackAndRun(_ => self.update())
private readonly featuresStatic = []
private readonly featureProperties: { count: number, tileId: number };
private constructor(parent: TileHierarchyAggregator, z: number, x: number, y: number) {
this._parent = parent;
this._root = parent?._root ?? this
this._z = z;
this._x = x;
this._y = y;
this._tileIndex = Tiles.tile_index(z, x, y)
this.name = "Count(" + this._tileIndex + ")"
const totals = {
tileId: this._tileIndex,
count: 0
}
this.featureProperties = totals
const now = new Date()
const feature = {
"type": "Feature",
"properties": totals,
"geometry": {
"type": "Point",
"coordinates": Tiles.centerPointOf(z, x, y)
}
}
this.featuresStatic.push({feature: feature, freshness: now})
const bbox = BBox.fromTile(z, x, y)
const box = {
"type": "Feature",
"properties": totals,
"geometry": {
"type": "Polygon",
"coordinates": [
[
[bbox.minLon, bbox.minLat],
[bbox.minLon, bbox.maxLat],
[bbox.maxLon, bbox.maxLat],
[bbox.maxLon, bbox.minLat],
[bbox.minLon, bbox.minLat]
]
]
}
}
this.featuresStatic.push({feature: box, freshness: now})
}
public getTile(tileIndex): TileHierarchyAggregator {
if (tileIndex === this._tileIndex) {
return this;
}
let [tileZ, tileX, tileY] = Tiles.tile_from_index(tileIndex)
while (tileZ - 1 > this._z) {
tileX = Math.floor(tileX / 2)
tileY = Math.floor(tileY / 2)
tileZ--
}
const xDiff = tileX - (2 * this._x)
const yDiff = tileY - (2 * this._y)
const subtileIndex = yDiff * 2 + xDiff;
return this._subtiles[subtileIndex]?.getTile(tileIndex)
}
private update() {
const now = new Date()
const allCountsAsFeatures : {feature: any, freshness: Date}[] = []
const aggregate = this.calculatePerTileCount()
aggregate.forEach((totalsPerLayer, tileIndex) => {
const totals = {}
let totalCount = 0
totalsPerLayer.forEach((total, layerId) => {
totals[layerId] = total
totalCount += total
})
totals["tileId"] = tileIndex
totals["count"] = totalCount
const feature = {
"type": "Feature",
"properties": totals,
"geometry": {
"type": "Point",
"coordinates": Tiles.centerPointOf(...Tiles.tile_from_index(tileIndex))
}
}
allCountsAsFeatures.push({feature: feature, freshness: now})
const bbox= BBox.fromTileIndex(tileIndex)
const box = {
"type": "Feature",
"properties":totals,
"geometry": {
"type": "Polygon",
"coordinates": [
[
[bbox.minLon, bbox.minLat],
[bbox.minLon, bbox.maxLat],
[bbox.maxLon, bbox.maxLat],
[bbox.maxLon, bbox.minLat],
[bbox.minLon, bbox.minLat]
]
]
}
}
allCountsAsFeatures.push({feature:box, freshness: now})
const newMap = new Map<string, number>()
let total = 0
this?._counter?.countsPerLayer?.data?.forEach((count, layerId) => {
newMap.set(layerId, count)
total += count
})
this.features.setData(allCountsAsFeatures)
}
/**
* Calculates an aggregate count per tile and per subtile
* @private
*/
private calculatePerTileCount() {
const perTileCount = new Map<number, Map<string, number>>()
const targetZoom = this._requestedZoomLevel.data;
// We only search for tiles of the same zoomlevel or a higher zoomlevel, which is embedded
for (const singleTileCounter of Array.from(this.perTile.values())) {
let tileZ = singleTileCounter.z
let tileX = singleTileCounter.x
let tileY = singleTileCounter.y
if (tileZ < targetZoom) {
for (const tile of this._subtiles) {
if (tile === undefined) {
continue;
}
total += tile.totalValue
}
this.totalValue = total
this._parent?.update()
if (total === 0) {
this.features.setData(TileHierarchyAggregator.empty)
} else {
this.featureProperties.count = total;
this.features.data = this.featuresStatic
this.features.ping()
}
}
while (tileZ > targetZoom) {
public addTile(source: FeatureSourceForLayer & Tiled) {
const self = this;
if (source.tileIndex === this._tileIndex) {
if (this._counter === undefined) {
this._counter = new SingleTileCounter(this._tileIndex)
this._counter.countsPerLayer.addCallbackAndRun(_ => self.update())
}
this._counter.addTileCount(source)
} else {
// We have to give it to one of the subtiles
let [tileZ, tileX, tileY] = Tiles.tile_from_index(source.tileIndex)
while (tileZ - 1 > this._z) {
tileX = Math.floor(tileX / 2)
tileY = Math.floor(tileY / 2)
tileZ--
}
const tileI = Tiles.tile_index(tileZ, tileX, tileY)
let counts = perTileCount.get(tileI)
if (counts === undefined) {
counts = new Map<string, number>()
perTileCount.set(tileI, counts)
const xDiff = tileX - (2 * this._x)
const yDiff = tileY - (2 * this._y)
const subtileIndex = yDiff * 2 + xDiff;
if (this._subtiles[subtileIndex] === undefined) {
this._subtiles[subtileIndex] = new TileHierarchyAggregator(this, tileZ, tileX, tileY)
}
singleTileCounter.countsPerLayer.data.forEach((count, layerId) => {
if (counts.has(layerId)) {
counts.set(layerId, count + counts.get(layerId))
} else {
counts.set(layerId, count)
}
this._subtiles[subtileIndex].addTile(source)
}
}
public static createHierarchy() {
return new TileHierarchyAggregator(undefined, 0, 0, 0)
}
private visitSubTiles(f : (aggr: TileHierarchyAggregator) => boolean){
const visitFurther = f(this)
if(visitFurther){
this._subtiles.forEach(tile => tile?.visitSubTiles(f))
}
}
getCountsForZoom(locationControl: UIEventSource<{ zoom : number }>, cutoff: number) : FeatureSource{
const self = this
return new StaticFeatureSource(
locationControl.map(loc => {
const features = []
const targetZoom = loc.zoom
self.visitSubTiles(aggr => {
if(aggr.totalValue < cutoff) {
return false
}
if(aggr._z === targetZoom){
features.push(...aggr.features.data)
return false
}
return aggr._z <= targetZoom;
})
return features
})
}
return perTileCount;
, true);
}
public addTile(tile: FeatureSourceForLayer & Tiled, shouldBeCounted: UIEventSource<boolean>) {
let counter = this.perTile.get(tile.tileIndex)
if (counter === undefined) {
counter = new SingleTileCounter(tile.tileIndex)
this.perTile.set(tile.tileIndex, counter)
// We do **NOT** add a callback on the perTile index, even though we could! It'll update just fine without it
}
counter.addTileCount(tile, shouldBeCounted)
}
}
/**
@ -131,6 +189,7 @@ class SingleTileCounter implements Tiled {
public readonly x: number
public readonly y: number
constructor(tileIndex: number) {
this.tileIndex = tileIndex
this.bbox = BBox.fromTileIndex(tileIndex)
@ -140,17 +199,16 @@ class SingleTileCounter implements Tiled {
this.y = y
}
public addTileCount(source: FeatureSourceForLayer, shouldBeCounted: UIEventSource<boolean>) {
public addTileCount(source: FeatureSourceForLayer) {
const layer = source.layer.layerDef
this.registeredLayers.set(layer.id, layer)
const self = this
source.features.map(f => {
/*if (!shouldBeCounted.data) {
return;
}*/
self.countsPerLayer.data.set(layer.id, f.length)
self.countsPerLayer.ping()
}, [shouldBeCounted])
})
}
}

View file

@ -17,6 +17,7 @@ export default class ShowDataLayer {
// Used to generate a fresh ID when needed
private _cleanCount = 0;
private geoLayer = undefined;
private isDirty = false;
/**
* If the selected element triggers, this is used to lookup the correct layer and to open the popup
@ -37,9 +38,30 @@ export default class ShowDataLayer {
this._layerToShow = options.layerToShow;
const self = this;
options.leafletMap.addCallbackAndRunD(_ => {
self.update(options)
}
);
features.addCallback(_ => self.update(options));
options.leafletMap.addCallback(_ => self.update(options));
this.update(options);
options.doShowLayer?.addCallbackAndRun(doShow => {
const mp = options.leafletMap.data;
if (mp == undefined) {
return;
}
if (doShow) {
if (self.isDirty) {
self.update(options)
} else {
mp.addLayer(this.geoLayer)
}
} else {
if(this.geoLayer !== undefined){
mp.removeLayer(this.geoLayer)
}
}
})
State.state.selectedElement.addCallbackAndRunD(selected => {
if (self._leafletMap.data === undefined) {
@ -68,26 +90,16 @@ export default class ShowDataLayer {
}
})
options.doShowLayer?.addCallbackAndRun(doShow => {
const mp = options.leafletMap.data;
if (this.geoLayer == undefined || mp == undefined) {
return;
}
if (doShow) {
mp.addLayer(this.geoLayer)
} else {
mp.removeLayer(this.geoLayer)
}
})
}
private update(options) {
private update(options: ShowDataLayerOptions) {
if (this._features.data === undefined) {
return;
}
this.isDirty = true;
if (options?.doShowLayer?.data === false) {
return;
}
const mp = options.leafletMap.data;
if (mp === undefined) {
@ -99,7 +111,18 @@ export default class ShowDataLayer {
mp.removeLayer(this.geoLayer);
}
this.geoLayer = this.CreateGeojsonLayer()
const self = this;
const data = {
type: "FeatureCollection",
features: []
}
// @ts-ignore
this.geoLayer = L.geoJSON(data, {
style: feature => self.createStyleFor(feature),
pointToLayer: (feature, latLng) => self.pointToLayer(feature, latLng),
onEachFeature: (feature, leafletLayer) => self.postProcessFeature(feature, leafletLayer)
});
const allFeats = this._features.data;
for (const feat of allFeats) {
if (feat === undefined) {
@ -123,6 +146,7 @@ export default class ShowDataLayer {
if (options.doShowLayer?.data ?? true) {
mp.addLayer(this.geoLayer)
}
this.isDirty = false;
}
@ -143,7 +167,7 @@ export default class ShowDataLayer {
return;
}
const tagSource = feature.properties.id === undefined ? new UIEventSource<any>(feature.properties) :
const tagSource = feature.properties.id === undefined ? new UIEventSource<any>(feature.properties) :
State.state.allElements.getEventSourceById(feature.properties.id)
const clickable = !(layer.title === undefined && (layer.tagRenderings ?? []).length === 0)
const style = layer.GenerateLeafletStyle(tagSource, clickable);
@ -218,19 +242,4 @@ export default class ShowDataLayer {
}
private CreateGeojsonLayer(): L.Layer {
const self = this;
const data = {
type: "FeatureCollection",
features: []
}
// @ts-ignore
return L.geoJSON(data, {
style: feature => self.createStyleFor(feature),
pointToLayer: (feature, latLng) => self.pointToLayer(feature, latLng),
onEachFeature: (feature, leafletLayer) => self.postProcessFeature(feature, leafletLayer)
});
}
}