mapcomplete/Logic/Basemap.ts

110 lines
3.9 KiB
TypeScript
Raw Normal View History

2020-06-24 00:35:19 +02:00
import L from "leaflet"
import {UIEventSource} from "../UI/UIEventSource";
2020-06-29 03:12:44 +02:00
import {UIElement} from "../UI/UIElement";
2020-06-24 00:35:19 +02:00
2020-07-22 14:46:43 +02:00
export class BaseLayers {
public static readonly defaultLayer: { name: string, layer: any } = {
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 } [] = [
{
name: "Luchtfoto Vlaanderen (recentste door AIV)",
layer: L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&" +
2020-07-22 14:46:43 +02:00
"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,
{
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) | "
})
},
{
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
})
}
]
;
2020-06-24 00:35:19 +02:00
2020-07-22 14:46:43 +02:00
}
2020-06-24 00:35:19 +02:00
2020-07-22 14:46:43 +02:00
// Contains all setup and baselayers for Leaflet stuff
export class Basemap {
2020-06-24 00:35:19 +02:00
2020-07-22 14:46:43 +02:00
// @ts-ignore
public map: Map;
2020-06-24 00:35:19 +02:00
2020-07-22 14:46:43 +02:00
public Location: UIEventSource<{ zoom: number, lat: number, lon: number }>;
public LastClickLocation: UIEventSource<{ lat: number, lon: number }> = new UIEventSource<{ lat: number, lon: number }>(undefined)
private _previousLayer: L.tileLayer = undefined;
2020-07-22 14:46:43 +02:00
public CurrentLayer: UIEventSource<{
name: string,
layer: L.tileLayer
}> = new UIEventSource<L.tileLayer>(BaseLayers.defaultLayer);
2020-06-24 00:35:19 +02:00
2020-06-29 03:12:44 +02:00
constructor(leafletElementId: string,
location: UIEventSource<{ zoom: number, lat: number, lon: number }>,
extraAttribution: UIElement) {
this.map = L.map(leafletElementId, {
2020-06-24 00:35:19 +02:00
center: [location.data.lat, location.data.lon],
zoom: location.data.zoom,
layers: [BaseLayers.defaultLayer.layer],
2020-06-24 00:35:19 +02:00
});
2020-06-29 03:40:19 +02:00
this.map.attributionControl.setPrefix(
extraAttribution.Render() + " | <a href='https://osm.org'>OpenStreetMap</a>");
2020-06-24 00:35:19 +02:00
this.Location = location;
2020-06-29 03:12:44 +02:00
this.map.zoomControl.setPosition("bottomright");
2020-06-24 00:35:19 +02:00
const self = this;
2020-06-24 00:35:19 +02:00
this.map.on("moveend", function () {
location.data.zoom = self.map.getZoom();
location.data.lat = self.map.getCenter().lat;
2020-06-29 03:12:44 +02:00
location.data.lon = self.map.getCenter().lng;
2020-06-24 00:35:19 +02:00
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);
});
2020-06-29 03:12:44 +02:00
this.map.on("click", function (e) {
self.LastClickLocation.setData({lat: e.latlng.lat, lon: e.latlng.lng})
});
2020-06-24 00:35:19 +02:00
}
}