forked from MapComplete/MapComplete
Intermediate refactoring
This commit is contained in:
parent
93db813cfc
commit
069cddf034
103 changed files with 7950 additions and 0 deletions
173
Logic/FilteredLayer.js
Normal file
173
Logic/FilteredLayer.js
Normal file
|
@ -0,0 +1,173 @@
|
|||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.FilteredLayer = void 0;
|
||||
var TagsFilter_1 = require("./TagsFilter");
|
||||
var UIEventSource_1 = require("../UI/UIEventSource");
|
||||
var leaflet_1 = require("leaflet");
|
||||
var GeoOperations_1 = require("./GeoOperations");
|
||||
/***
|
||||
* 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
|
||||
*/
|
||||
var FilteredLayer = /** @class */ (function () {
|
||||
function FilteredLayer(name, map, storage, changes, filters, maxAllowedOverlap, style, selectedElement, showOnPopup) {
|
||||
this.isDisplayed = new UIEventSource_1.UIEventSource(true);
|
||||
/** List of new elements, geojson features
|
||||
*/
|
||||
this._newElements = [];
|
||||
this._selectedElement = selectedElement;
|
||||
this._showOnPopup = showOnPopup;
|
||||
if (style === undefined) {
|
||||
style = function () {
|
||||
return {};
|
||||
};
|
||||
}
|
||||
this.name = name;
|
||||
this._map = map;
|
||||
this.filters = filters;
|
||||
this._style = style;
|
||||
this._storage = storage;
|
||||
this._maxAllowedOverlap = maxAllowedOverlap;
|
||||
var self = this;
|
||||
this.isDisplayed.addCallback(function (isDisplayed) {
|
||||
if (self._geolayer !== undefined && self._geolayer !== null) {
|
||||
if (isDisplayed) {
|
||||
self._geolayer.addTo(self._map.map);
|
||||
}
|
||||
else {
|
||||
self._map.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
|
||||
*/
|
||||
FilteredLayer.prototype.SetApplicableData = function (geojson) {
|
||||
var leftoverFeatures = [];
|
||||
var selfFeatures = [];
|
||||
for (var _i = 0, _a = geojson.features; _i < _a.length; _i++) {
|
||||
var feature = _a[_i];
|
||||
// feature.properties contains all the properties
|
||||
var tags = TagsFilter_1.TagUtils.proprtiesToKV(feature.properties);
|
||||
if (this.filters.matches(tags)) {
|
||||
selfFeatures.push(feature);
|
||||
}
|
||||
else {
|
||||
leftoverFeatures.push(feature);
|
||||
}
|
||||
}
|
||||
this.RenderLayer({
|
||||
type: "FeatureCollection",
|
||||
features: selfFeatures
|
||||
});
|
||||
var notShadowed = [];
|
||||
for (var _b = 0, leftoverFeatures_1 = leftoverFeatures; _b < leftoverFeatures_1.length; _b++) {
|
||||
var feature = leftoverFeatures_1[_b];
|
||||
if (this._maxAllowedOverlap !== undefined && this._maxAllowedOverlap > 0) {
|
||||
if (GeoOperations_1.GeoOperations.featureIsContainedInAny(feature, selfFeatures, this._maxAllowedOverlap)) {
|
||||
// This feature is filtered away
|
||||
continue;
|
||||
}
|
||||
}
|
||||
notShadowed.push(feature);
|
||||
}
|
||||
return {
|
||||
type: "FeatureCollection",
|
||||
features: notShadowed
|
||||
};
|
||||
};
|
||||
FilteredLayer.prototype.AddNewElement = function (element) {
|
||||
this._newElements.push(element);
|
||||
console.log("Element added");
|
||||
this.RenderLayer(this._dataFromOverpass); // Update the layer
|
||||
};
|
||||
FilteredLayer.prototype.RenderLayer = function (data) {
|
||||
var self = this;
|
||||
if (this._geolayer !== undefined && this._geolayer !== null) {
|
||||
this._map.map.removeLayer(this._geolayer);
|
||||
}
|
||||
this._dataFromOverpass = data;
|
||||
var fusedFeatures = [];
|
||||
var idsFromOverpass = [];
|
||||
for (var _i = 0, _a = data.features; _i < _a.length; _i++) {
|
||||
var feature = _a[_i];
|
||||
idsFromOverpass.push(feature.properties.id);
|
||||
fusedFeatures.push(feature);
|
||||
}
|
||||
for (var _b = 0, _c = this._newElements; _b < _c.length; _b++) {
|
||||
var feature = _c[_b];
|
||||
if (idsFromOverpass.indexOf(feature.properties.id) < 0) {
|
||||
// This element is not yet uploaded or not yet visible in overpass
|
||||
// We include it in the layer
|
||||
fusedFeatures.push(feature);
|
||||
}
|
||||
}
|
||||
// We use a new, fused dataset
|
||||
data = {
|
||||
type: "FeatureCollection",
|
||||
features: fusedFeatures
|
||||
};
|
||||
// The data is split in two parts: the poinst and the rest
|
||||
// The points get a special treatment in order to render them properly
|
||||
// Note that some features might get a point representation as well
|
||||
this._geolayer = leaflet_1.default.geoJSON(data, {
|
||||
style: function (feature) {
|
||||
return self._style(feature.properties);
|
||||
},
|
||||
pointToLayer: function (feature, latLng) {
|
||||
var style = self._style(feature.properties);
|
||||
var marker;
|
||||
if (style.icon === undefined) {
|
||||
marker = leaflet_1.default.circle(latLng, {
|
||||
radius: 25,
|
||||
color: style.color
|
||||
});
|
||||
}
|
||||
else {
|
||||
marker = leaflet_1.default.marker(latLng, {
|
||||
icon: style.icon
|
||||
});
|
||||
}
|
||||
return marker;
|
||||
},
|
||||
onEachFeature: function (feature, layer) {
|
||||
var eventSource = self._storage.addOrGetElement(feature);
|
||||
eventSource.addCallback(function () {
|
||||
if (layer.setIcon) {
|
||||
layer.setIcon(self._style(feature.properties).icon);
|
||||
}
|
||||
else {
|
||||
console.log("UPdating", layer);
|
||||
self._geolayer.setStyle(function (feature) {
|
||||
return self._style(feature.properties);
|
||||
});
|
||||
}
|
||||
});
|
||||
layer.on("click", function (e) {
|
||||
console.log("Selected ", feature);
|
||||
self._selectedElement.setData(feature.properties);
|
||||
var uiElement = self._showOnPopup(eventSource);
|
||||
var popup = leaflet_1.default.popup()
|
||||
.setContent(uiElement.Render())
|
||||
.setLatLng(e.latlng)
|
||||
.openOn(self._map.map);
|
||||
uiElement.Update();
|
||||
uiElement.Activate();
|
||||
leaflet_1.default.DomEvent.stop(e); // Marks the event as consumed
|
||||
});
|
||||
}
|
||||
});
|
||||
if (this.isDisplayed.data) {
|
||||
this._geolayer.addTo(this._map.map);
|
||||
}
|
||||
};
|
||||
return FilteredLayer;
|
||||
}());
|
||||
exports.FilteredLayer = FilteredLayer;
|
Loading…
Add table
Add a link
Reference in a new issue