forked from MapComplete/MapComplete
First attempt to get the editor-layer-index working
This commit is contained in:
Pieter Vander Vennet
parent
e46ea51d44
commit
08175a747f
11 changed files with 268 additions and 74 deletions
116
Logic/AvailableBaseLayers.ts
Normal file
116
Logic/AvailableBaseLayers.ts
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
import * as editorlayerindex from "../assets/editor-layer-index.json"
|
||||
import {UIEventSource} from "./UIEventSource";
|
||||
import {GeoOperations} from "./GeoOperations";
|
||||
import {State} from "../State";
|
||||
import {Basemap} from "./Leaflet/Basemap";
|
||||
|
||||
/**
|
||||
* Calculates which layers are available at the current location
|
||||
*/
|
||||
export default class AvailableBaseLayers {
|
||||
|
||||
public static layerOverview = AvailableBaseLayers.LoadRasterIndex();
|
||||
public availableEditorLayers: UIEventSource<{ id: string, url: string, max_zoom: number, license_url: number, name: string, geometry: any, leafletLayer: any }[]>;
|
||||
|
||||
constructor(state: State) {
|
||||
const self = this;
|
||||
this.availableEditorLayers =
|
||||
state.locationControl.map(
|
||||
(currentLocation) => {
|
||||
const currentLayers = self.availableEditorLayers?.data;
|
||||
const newLayers = AvailableBaseLayers.AvailableLayersAt(currentLocation?.lon, currentLocation?.lat);
|
||||
|
||||
if (currentLayers === undefined) {
|
||||
return newLayers;
|
||||
}
|
||||
if (newLayers.length !== currentLayers.length) {
|
||||
return newLayers;
|
||||
}
|
||||
for (let i = 0; i < newLayers.length; i++) {
|
||||
if (newLayers[i].name !== currentLayers[i].name) {
|
||||
return newLayers;
|
||||
}
|
||||
}
|
||||
|
||||
return currentLocation;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
public static AvailableLayersAt(lon: number, lat: number): { url: string, max_zoom: number, license_url: number, name: string, geometry: any }[] {
|
||||
const availableLayers = []
|
||||
const globalLayers = [];
|
||||
for (const i in AvailableBaseLayers.layerOverview) {
|
||||
const layer = AvailableBaseLayers.layerOverview[i];
|
||||
if (layer.feature.geometry === null) {
|
||||
globalLayers.push(layer);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (lon === undefined || lat === undefined) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (GeoOperations.inside([lon, lat], layer.feature)) {
|
||||
availableLayers.push(layer);
|
||||
}
|
||||
}
|
||||
|
||||
return availableLayers.concat(globalLayers);
|
||||
}
|
||||
|
||||
private static LoadRasterIndex(): { id: string, url: string, max_zoom: number, license_url: number, name: string, feature: any }[] {
|
||||
const layers: { id: string, url: string, max_zoom: number, license_url: number, name: string, feature: any, leafletLayer: any }[] = []
|
||||
// @ts-ignore
|
||||
const features = editorlayerindex.features;
|
||||
for (const i in features) {
|
||||
const layer = features[i];
|
||||
const props = layer.properties;
|
||||
|
||||
if(props.id === "Bing"){
|
||||
// Doesnt work
|
||||
continue;
|
||||
}
|
||||
|
||||
if (props.overlay) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if(props.max_zoom < 19){
|
||||
continue;
|
||||
}
|
||||
|
||||
if (props.url.toLowerCase().indexOf("apikey") > 0) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (props.url.toLowerCase().indexOf("{bbox}") > 0) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const leafletLayer = Basemap.CreateBackgroundLayer(
|
||||
props.id,
|
||||
props.name,
|
||||
props.url,
|
||||
props.name,
|
||||
props.max_zoom,
|
||||
props.type.toLowerCase() === "wms",
|
||||
props.type.toLowerCase() === "wmts"
|
||||
)
|
||||
|
||||
// Note: if layer.geometry is null, there is global coverage for this layer
|
||||
layers.push({
|
||||
id: props.id,
|
||||
feature: layer,
|
||||
url: props.url,
|
||||
max_zoom: props.max_zoom,
|
||||
license_url: props.license_url,
|
||||
name: props.name,
|
||||
leafletLayer: leafletLayer
|
||||
});
|
||||
}
|
||||
return layers;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -36,7 +36,6 @@ export class GeoOperations {
|
|||
return false;
|
||||
}
|
||||
|
||||
|
||||
if (feature.geometry.type === "Polygon" || feature.geometry.type === "MultiPolygon") {
|
||||
|
||||
const poly = feature;
|
||||
|
|
@ -77,7 +76,7 @@ export class GeoOperations {
|
|||
|
||||
return false;
|
||||
}
|
||||
private static inside(pointCoordinate, feature): boolean {
|
||||
public static inside(pointCoordinate, feature): boolean {
|
||||
// ray-casting algorithm based on
|
||||
// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
|
||||
|
||||
|
|
|
|||
|
|
@ -5,54 +5,46 @@ import {UIElement} from "../../UI/UIElement";
|
|||
|
||||
export class BaseLayers {
|
||||
|
||||
public static readonly defaultLayer: { name: string, layer: any, id: string } = {
|
||||
id: "osm",
|
||||
name: "Kaart van OpenStreetMap", layer: L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
{
|
||||
attribution: '',
|
||||
maxZoom: 19,
|
||||
minZoom: 1
|
||||
})
|
||||
};
|
||||
public static readonly baseLayers: { name: string, layer: any, id: string } [] = [
|
||||
|
||||
{
|
||||
id: "aiv-latest",
|
||||
name: "Luchtfoto Vlaanderen (recentste door AIV)",
|
||||
layer: L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&" +
|
||||
"LAYER=omwrgbmrvl&STYLE=&FORMAT=image/png&tileMatrixSet=GoogleMapsVL&tileMatrix={z}&tileRow={y}&tileCol={x}",
|
||||
{
|
||||
// omwrgbmrvl
|
||||
attribution: 'Luchtfoto\'s van © AIV Vlaanderen (Laatste) © AGIV',
|
||||
maxZoom: 22,
|
||||
minZoom: 1,
|
||||
wmts: true
|
||||
})
|
||||
},
|
||||
BaseLayers.defaultLayer,
|
||||
{
|
||||
id: "aiv-13-15",
|
||||
name: "Luchtfoto Vlaanderen (2013-2015, door AIV)",
|
||||
layer: L.tileLayer.wms('https://geoservices.informatievlaanderen.be/raadpleegdiensten/OGW/wms?s',
|
||||
{
|
||||
maxZoom: 22,
|
||||
layers: "OGWRGB13_15VL",
|
||||
attribution: "Luchtfoto's van © AIV Vlaanderen (2013-2015) | "
|
||||
})
|
||||
},
|
||||
{
|
||||
id:"grb",
|
||||
name: "Kaart Grootschalig ReferentieBestand Vlaanderen (GRB) door AIV",
|
||||
layer: L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=grb_bsk&STYLE=&FORMAT=image/png&tileMatrixSet=GoogleMapsVL&tileMatrix={z}&tileCol={x}&tileRow={y}",
|
||||
{
|
||||
attribution: 'Achtergrond <i>Grootschalig ReferentieBestand</i>(GRB) © AGIV',
|
||||
maxZoom: 22,
|
||||
minZoom: 1,
|
||||
wmts: true
|
||||
})
|
||||
}
|
||||
]
|
||||
;
|
||||
/*public static readonly baseLayers: { name: string, layer: any, id: string } [] = [
|
||||
|
||||
{
|
||||
id: "aiv-latest",
|
||||
name: "Luchtfoto Vlaanderen (recentste door AIV)",
|
||||
layer: L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&" +
|
||||
"LAYER=omwrgbmrvl&STYLE=&FORMAT=image/png&tileMatrixSet=GoogleMapsVL&tileMatrix={z}&tileRow={y}&tileCol={x}",
|
||||
{
|
||||
// omwrgbmrvl
|
||||
attribution: 'Luchtfoto\'s van © AIV Vlaanderen (Laatste) © AGIV',
|
||||
maxZoom: 22,
|
||||
minZoom: 1,
|
||||
wmts: true
|
||||
})
|
||||
},
|
||||
BaseLayers.defaultLayer,
|
||||
{
|
||||
id: "aiv-13-15",
|
||||
name: "Luchtfoto Vlaanderen (2013-2015, door AIV)",
|
||||
layer: L.tileLayer.wms('https://geoservices.informatievlaanderen.be/raadpleegdiensten/OGW/wms?s',
|
||||
{
|
||||
maxZoom: 22,
|
||||
layers: "OGWRGB13_15VL",
|
||||
attribution: "Luchtfoto's van © AIV Vlaanderen (2013-2015) | "
|
||||
})
|
||||
},
|
||||
{
|
||||
id:"grb",
|
||||
name: "Kaart Grootschalig ReferentieBestand Vlaanderen (GRB) door AIV",
|
||||
layer: L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=grb_bsk&STYLE=&FORMAT=image/png&tileMatrixSet=GoogleMapsVL&tileMatrix={z}&tileCol={x}&tileRow={y}",
|
||||
{
|
||||
attribution: 'Achtergrond <i>Grootschalig ReferentieBestand</i>(GRB) © AGIV',
|
||||
maxZoom: 22,
|
||||
minZoom: 1,
|
||||
wmts: true
|
||||
})
|
||||
}
|
||||
]
|
||||
;*/
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -60,26 +52,32 @@ export class BaseLayers {
|
|||
export class Basemap {
|
||||
|
||||
|
||||
public static readonly defaultLayer: { name: string, layer: any, id: string } =
|
||||
Basemap.CreateBackgroundLayer("osm", "OpenStreetMap", "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
"<a href='https://openstreetmap.org/copyright' target='_blank'>OpenStreetMap (ODBL)</a>",
|
||||
22, false);
|
||||
|
||||
// @ts-ignore
|
||||
public readonly map: Map;
|
||||
|
||||
public readonly Location: UIEventSource<{ zoom: number, lat: number, lon: number }>;
|
||||
public readonly LastClickLocation: UIEventSource<{ lat: number, lon: number }> = new UIEventSource<{ lat: number, lon: number }>(undefined)
|
||||
private _previousLayer: L.tileLayer = undefined;
|
||||
private _previousLayer: L.tileLayer = undefined;
|
||||
public readonly CurrentLayer: UIEventSource<{
|
||||
id: string,
|
||||
name: string,
|
||||
layer: L.tileLayer
|
||||
}> = new UIEventSource<L.tileLayer>(BaseLayers.defaultLayer);
|
||||
}> = new UIEventSource<L.tileLayer>(Basemap.defaultLayer);
|
||||
|
||||
|
||||
constructor(leafletElementId: string,
|
||||
location: UIEventSource<{ zoom: number, lat: number, lon: number }>,
|
||||
extraAttribution: UIElement) {
|
||||
this._previousLayer = Basemap.defaultLayer.layer;
|
||||
this.map = L.map(leafletElementId, {
|
||||
center: [location.data.lat ?? 0, location.data.lon ?? 0],
|
||||
zoom: location.data.zoom ?? 2,
|
||||
layers: [BaseLayers.defaultLayer.layer],
|
||||
layers: [this._previousLayer],
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -118,9 +116,43 @@ export class Basemap {
|
|||
|
||||
this.map.on("contextmenu", function (e) {
|
||||
self.LastClickLocation.setData({lat: e.latlng.lat, lon: e.latlng.lng});
|
||||
console.log("Right click")
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
public static CreateBackgroundLayer(id: string, name: string, url: string, attribution: string,
|
||||
maxZoom: number, isWms: boolean, isWMTS?: boolean) {
|
||||
|
||||
url = url.replace("{zoom}", "{z}")
|
||||
.replace("{switch:", "{")
|
||||
.replace("{proj}", "EPSG:3857")
|
||||
.replace("{width}", "256")
|
||||
.replace("{height}", "256")
|
||||
|
||||
//geoservices.informatievlaanderen.be/raadpleegdiensten/dhmv/wms?FORMAT=image/jpeg&VERSION=1.1.1&SERVICE=WMS&REQUEST=GetMap&LAYERS=DHMV_II_SVF_25cm&STYLES=&SRS=EPSG:3857&WIDTH=256&HEIGHT=256
|
||||
if (isWms) {
|
||||
return {
|
||||
id: id,
|
||||
name: name,
|
||||
layer: L.tileLayer.wms(url,
|
||||
{
|
||||
maxZoom: maxZoom ?? 19,
|
||||
attribution: attribution + " | "
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
id: id,
|
||||
name: name,
|
||||
layer: L.tileLayer(url,
|
||||
{
|
||||
attribution: attribution,
|
||||
maxZoom: maxZoom,
|
||||
minZoom: 1,
|
||||
wmts: isWMTS ?? false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export class UIEventSource<T>{
|
|||
newSource.setData(f(self.data));
|
||||
}
|
||||
|
||||
this.addCallback(update);
|
||||
this.addCallbackAndRun(update);
|
||||
for (const extraSource of extraSources) {
|
||||
extraSource?.addCallback(update);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue