277 lines
10 KiB
TypeScript
277 lines
10 KiB
TypeScript
import {TagsFilter, TagUtils} from "./Tags";
|
|
import {UIEventSource} from "./UIEventSource";
|
|
import * as L from "leaflet"
|
|
import {Layer} from "leaflet"
|
|
import {GeoOperations} from "./GeoOperations";
|
|
import {UIElement} from "../UI/UIElement";
|
|
import State from "../State";
|
|
import LayerConfig from "../Customizations/JSON/LayerConfig";
|
|
import Hash from "./Web/Hash";
|
|
import LazyElement from "../UI/Base/LazyElement";
|
|
|
|
/***
|
|
* A filtered layer is a layer which offers a 'set-data' function
|
|
* It is initialized with a tagfilter.
|
|
*
|
|
* When geojson-data is given to 'setData', all the geojson matching the filter, is rendered on this layer.
|
|
* If it is not rendered, it is returned in a 'leftOver'-geojson; which can be consumed by the next layer.
|
|
*
|
|
* This also makes sure that no objects are rendered twice if they are applicable on two layers
|
|
*/
|
|
export class FilteredLayer {
|
|
|
|
public readonly name: string | UIElement;
|
|
public readonly filters: TagsFilter;
|
|
public readonly isDisplayed: UIEventSource<boolean> = new UIEventSource(true);
|
|
public readonly layerDef: LayerConfig;
|
|
private readonly combinedIsDisplayed: UIEventSource<boolean>;
|
|
private readonly _maxAllowedOverlap: number;
|
|
|
|
/** The featurecollection from overpass
|
|
*/
|
|
private _dataFromOverpass: any[];
|
|
/** List of new elements, geojson features
|
|
*/
|
|
private _newElements = [];
|
|
/**
|
|
* The leaflet layer object which should be removed on rerendering
|
|
*/
|
|
private _geolayer;
|
|
|
|
private _showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement;
|
|
|
|
|
|
constructor(
|
|
layerDef: LayerConfig,
|
|
showOnPopup: ((tags: UIEventSource<any>, feature: any) => UIElement)
|
|
) {
|
|
this.layerDef = layerDef;
|
|
|
|
this._showOnPopup = showOnPopup;
|
|
this.name = name;
|
|
this.filters = layerDef.overpassTags;
|
|
this._maxAllowedOverlap = layerDef.hideUnderlayingFeaturesMinPercentage;
|
|
const self = this;
|
|
this.combinedIsDisplayed = this.isDisplayed.map<boolean>(isDisplayed => {
|
|
return isDisplayed && State.state.locationControl.data.zoom >= self.layerDef.minzoom
|
|
},
|
|
[State.state.locationControl]
|
|
);
|
|
this.combinedIsDisplayed.addCallback(function (isDisplayed) {
|
|
const map = State.state.leafletMap.data;
|
|
if (self._geolayer !== undefined && self._geolayer !== null) {
|
|
if (isDisplayed) {
|
|
self._geolayer.addTo(map);
|
|
} else {
|
|
map.removeLayer(self._geolayer);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* The main function to load data into this layer.
|
|
* The data that is NOT used by this layer, is returned as a geojson object; the other data is rendered
|
|
*/
|
|
public SetApplicableData(features: any[]): any[] {
|
|
const leftoverFeatures = [];
|
|
const selfFeatures = [];
|
|
for (let feature of features) {
|
|
const tags = TagUtils.proprtiesToKV(feature.properties);
|
|
const matches = this.filters.matches(tags);
|
|
if (matches) {
|
|
selfFeatures.push(feature);
|
|
}
|
|
if (!matches || this.layerDef.passAllFeatures) {
|
|
leftoverFeatures.push(feature);
|
|
}
|
|
}
|
|
|
|
this.RenderLayer(selfFeatures)
|
|
|
|
const notShadowed = [];
|
|
for (const feature of leftoverFeatures) {
|
|
if (this._maxAllowedOverlap !== undefined && this._maxAllowedOverlap > 0) {
|
|
if (GeoOperations.featureIsContainedInAny(feature, selfFeatures, this._maxAllowedOverlap)) {
|
|
// This feature is filtered away
|
|
continue;
|
|
}
|
|
}
|
|
|
|
notShadowed.push(feature);
|
|
}
|
|
|
|
return notShadowed;
|
|
}
|
|
|
|
|
|
public AddNewElement(element) {
|
|
this._newElements.push(element);
|
|
this.RenderLayer(this._dataFromOverpass); // Update the layer
|
|
}
|
|
|
|
private RenderLayer(features) {
|
|
|
|
if (this._geolayer !== undefined && this._geolayer !== null) {
|
|
// Remove the old geojson layer from the map - we'll reshow all the elements later on anyway
|
|
State.state.leafletMap.data.removeLayer(this._geolayer);
|
|
}
|
|
|
|
// We fetch all the data we have to show:
|
|
let fusedFeatures = this.ApplyWayHandling(this.FuseData(features));
|
|
|
|
// And we copy some features as points - if needed
|
|
const data = {
|
|
type: "FeatureCollection",
|
|
features: fusedFeatures
|
|
}
|
|
|
|
let self = this;
|
|
this._geolayer = L.geoJSON(data, {
|
|
style: feature => {
|
|
const tagsSource = State.state.allElements.getEventSourceFor(feature);
|
|
return self.layerDef.GenerateLeafletStyle(tagsSource, self._showOnPopup !== undefined);
|
|
},
|
|
pointToLayer: function (feature, latLng) {
|
|
// Point to layer converts the 'point' to a layer object - as the geojson layer natively cannot handle points
|
|
// Click handling is done in the next step
|
|
const tagSource = State.state.allElements.getEventSourceFor(feature);
|
|
|
|
const style = self.layerDef.GenerateLeafletStyle(tagSource, self._showOnPopup !== undefined);
|
|
let marker;
|
|
if (style.icon === undefined) {
|
|
marker = L.circle(latLng, {
|
|
radius: 25,
|
|
color: style.color
|
|
});
|
|
} else if (style.icon.iconUrl.startsWith("$circle")) {
|
|
marker = L.circle(latLng, {
|
|
radius: 25,
|
|
color: style.color
|
|
});
|
|
} else {
|
|
style.icon.html.ListenTo(self.isDisplayed)
|
|
marker = L.marker(latLng, {
|
|
icon: L.divIcon({
|
|
html: style.icon.html.Render(),
|
|
className: style.icon.className,
|
|
iconAnchor: style.icon.iconAnchor,
|
|
iconUrl: style.icon.iconUrl,
|
|
popupAnchor: style.icon.popupAnchor,
|
|
iconSize: style.icon.iconSize
|
|
})
|
|
});
|
|
}
|
|
return marker;
|
|
},
|
|
onEachFeature: function (feature, layer: Layer) {
|
|
|
|
if (self._showOnPopup === undefined) {
|
|
// No popup contents defined -> don't do anything
|
|
return;
|
|
}
|
|
const popup = L.popup({
|
|
autoPan: true,
|
|
closeOnEscapeKey: true,
|
|
}, layer);
|
|
|
|
|
|
const eventSource = State.state.allElements.getEventSourceFor(feature);
|
|
let uiElement: LazyElement = new LazyElement(() => self._showOnPopup(eventSource, feature));
|
|
popup.setContent(uiElement.Render());
|
|
layer.bindPopup(popup);
|
|
// We first render the UIelement (which'll still need an update later on...)
|
|
// But at least it'll be visible already
|
|
|
|
|
|
layer.on("click", (e) => {
|
|
// We set the element as selected...
|
|
uiElement.Activate();
|
|
State.state.selectedElement.setData(feature);
|
|
});
|
|
|
|
if (feature.properties.id.replace(/\//g, "_") === Hash.Get().data) {
|
|
// This element is in the URL, so this is a share link
|
|
// We already open it
|
|
uiElement.Activate();
|
|
popup.setContent(uiElement.Render());
|
|
|
|
const center = GeoOperations.centerpoint(feature).geometry.coordinates;
|
|
popup.setLatLng({lat: center[1], lng: center[0]});
|
|
popup.openOn(State.state.leafletMap.data);
|
|
State.state.selectedElement.setData(feature);
|
|
uiElement.Update();
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
if (this.combinedIsDisplayed.data) {
|
|
this._geolayer.addTo(State.state.leafletMap.data);
|
|
}
|
|
|
|
}
|
|
|
|
private ApplyWayHandling(fusedFeatures: any[]) {
|
|
if (this.layerDef.wayHandling === LayerConfig.WAYHANDLING_DEFAULT) {
|
|
// We don't have to do anything special
|
|
return fusedFeatures;
|
|
}
|
|
|
|
|
|
// We have to convert all the ways into centerpoints
|
|
const existingPoints = [];
|
|
const newPoints = [];
|
|
const existingWays = [];
|
|
|
|
for (const feature of fusedFeatures) {
|
|
if (feature.geometry.type === "Point") {
|
|
existingPoints.push(feature);
|
|
continue;
|
|
}
|
|
|
|
existingWays.push(feature);
|
|
const centerPoint = GeoOperations.centerpoint(feature);
|
|
newPoints.push(centerPoint);
|
|
}
|
|
|
|
fusedFeatures = existingPoints.concat(newPoints);
|
|
if (this.layerDef.wayHandling === LayerConfig.WAYHANDLING_CENTER_AND_WAY) {
|
|
fusedFeatures = fusedFeatures.concat(existingWays)
|
|
}
|
|
return fusedFeatures;
|
|
}
|
|
|
|
//*Fuses the old and the new datasets*/
|
|
private FuseData(data: any[]) {
|
|
const oldData = this._dataFromOverpass ?? [];
|
|
|
|
// We keep track of all the ids that are freshly loaded in order to avoid adding duplicates
|
|
const idsFromOverpass: Set<number> = new Set<number>();
|
|
// A list of all the features to show
|
|
const fusedFeatures = [];
|
|
// First, we add all the fresh data:
|
|
for (const feature of data) {
|
|
idsFromOverpass.add(feature.properties.id);
|
|
fusedFeatures.push(feature);
|
|
}
|
|
// Now we add all the stale data
|
|
for (const feature of oldData) {
|
|
if (idsFromOverpass.has(feature.properties.id)) {
|
|
continue; // Feature already loaded and a fresher version is available
|
|
}
|
|
idsFromOverpass.add(feature.properties.id);
|
|
fusedFeatures.push(feature);
|
|
}
|
|
this._dataFromOverpass = fusedFeatures;
|
|
|
|
for (const feature of this._newElements) {
|
|
if (!idsFromOverpass.has(feature.properties.id)) {
|
|
// This element is not yet uploaded or not yet visible in overpass
|
|
// We include it in the layer
|
|
fusedFeatures.push(feature);
|
|
}
|
|
}
|
|
return fusedFeatures;
|
|
}
|
|
} |