125 lines
4.7 KiB
TypeScript
125 lines
4.7 KiB
TypeScript
import L from "leaflet"
|
|
import {UIEventSource} from "../UIEventSource";
|
|
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: 20,
|
|
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',
|
|
{
|
|
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: 20,
|
|
minZoom: 1,
|
|
wmts: true
|
|
})
|
|
}
|
|
]
|
|
;
|
|
|
|
}
|
|
|
|
// Contains all setup and baselayers for Leaflet stuff
|
|
export class Basemap {
|
|
|
|
|
|
// @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;
|
|
public readonly CurrentLayer: UIEventSource<{
|
|
id: string,
|
|
name: string,
|
|
layer: L.tileLayer
|
|
}> = new UIEventSource<L.tileLayer>(BaseLayers.defaultLayer);
|
|
|
|
|
|
constructor(leafletElementId: string,
|
|
location: UIEventSource<{ zoom: number, lat: number, lon: number }>,
|
|
extraAttribution: UIElement) {
|
|
this.map = L.map(leafletElementId, {
|
|
center: [location.data.lat ?? 0, location.data.lon ?? 0],
|
|
zoom: location.data.zoom ?? 2,
|
|
layers: [BaseLayers.defaultLayer.layer],
|
|
});
|
|
|
|
|
|
// Users are not allowed to zoom to the 'copies' on the left and the right, stuff goes wrong then
|
|
// We give a bit of leeway for people on the edges
|
|
// Also see: https://www.reddit.com/r/openstreetmap/comments/ih4zzc/mapcomplete_a_new_easytouse_editor/g31ubyv/
|
|
this.map.setMaxBounds(
|
|
[[-100,-200],[100,200]]
|
|
);
|
|
this.map.attributionControl.setPrefix(
|
|
extraAttribution.Render() + " | <a href='https://osm.org'>OpenStreetMap</a>");
|
|
this.Location = location;
|
|
|
|
|
|
this.map.zoomControl.setPosition("bottomright");
|
|
const self = this;
|
|
|
|
this.map.on("moveend", function () {
|
|
location.data.zoom = self.map.getZoom();
|
|
location.data.lat = self.map.getCenter().lat;
|
|
location.data.lon = self.map.getCenter().lng;
|
|
location.ping();
|
|
});
|
|
|
|
this.CurrentLayer.addCallback((layer:{layer: L.tileLayer}) => {
|
|
if(self._previousLayer !== undefined){
|
|
self.map.removeLayer(self._previousLayer);
|
|
}
|
|
self._previousLayer = layer.layer;
|
|
self.map.addLayer(layer.layer);
|
|
});
|
|
|
|
this.map.on("click", function (e) {
|
|
self.LastClickLocation.setData({lat: e.latlng.lat, lon: e.latlng.lng})
|
|
});
|
|
|
|
this.map.on("contextmenu", function (e) {
|
|
self.LastClickLocation.setData({lat: e.latlng.lat, lon: e.latlng.lng});
|
|
console.log("Right click")
|
|
e.preventDefault();
|
|
});
|
|
}
|
|
|
|
}
|