midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Removed old select layer button

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-22 14:46:43 +02:00
parent 3113afb39d
commit 54c92bd34a
1 changed files with 48 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
Logic/Basemap.ts
View file

@ -2,22 +2,13 @@ import L from "leaflet"
import {UIEventSource} from "../UI/UIEventSource"; import {UIEventSource} from "../UI/UIEventSource";
import {UIElement} from "../UI/UIElement"; import {UIElement} from "../UI/UIElement";
// Contains all setup and baselayers for Leaflet stuff
export class Basemap {
// @ts-ignore export class BaseLayers {
public map: Map;
public Location: UIEventSource<{ zoom: number, lat: number, lon: number }>; public static readonly defaultLayerName = "Kaart van OpenStreetMap";
public LastClickLocation: UIEventSource<{ lat: number, lon: number }> = new UIEventSource<{lat: number, lon: number}>(undefined) public static readonly baseLayers = {
["Luchtfoto Vlaanderen (recentste door AIV)"]:
private aivLucht2013Layer = L.tileLayer.wms('https://geoservices.informatievlaanderen.be/raadpleegdiensten/OGW/wms?s', L.tileLayer("https://tile.informatievlaanderen.be/ws/raadpleegdiensten/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&" +
{
layers: "OGWRGB13_15VL",
attribution: "Luchtfoto's van © AIV Vlaanderen (2013-2015) | "
});
private aivLuchtLatestLayer = 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}", "LAYER=omwrgbmrvl&STYLE=&FORMAT=image/png&tileMatrixSet=GoogleMapsVL&tileMatrix={z}&tileRow={y}&tileCol={x}",
{ {
// omwrgbmrvl // omwrgbmrvl
@ -25,57 +16,60 @@ export class Basemap {
maxZoom: 20, maxZoom: 20,
minZoom: 1, minZoom: 1,
wmts: true wmts: true
}); }),
["Luchtfoto Vlaanderen (2013-2015, door AIV)"]: L.tileLayer.wms('https://geoservices.informatievlaanderen.be/raadpleegdiensten/OGW/wms?s',
{
private osmLayer = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", layers: "OGWRGB13_15VL",
attribution: "Luchtfoto's van © AIV Vlaanderen (2013-2015) | "
}),
[BaseLayers.defaultLayerName]: L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png",
{ {
attribution: '', attribution: '',
maxZoom: 19, maxZoom: 19,
minZoom: 1 minZoom: 1
}); }),
private osmBeLayer = L.tileLayer("https://tile.osm.be/osmbe/{z}/{x}/{y}.png", ["Kaart Grootschalig ReferentieBestand Vlaanderen (GRB) door AIV"]: 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: '<a href="https://geo6.be/">Tile hosting courtesy of Geo6</a>',
maxZoom: 18,
minZoom: 1
});
private grbLayer = 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', attribution: 'Achtergrond <i>Grootschalig ReferentieBestand</i>(GRB) © AGIV',
maxZoom: 20, maxZoom: 20,
minZoom: 1, minZoom: 1,
wmts: true wmts: true
}); }),
private baseLayers = {
"Luchtfoto Vlaanderen (recentste door AIV)": this.aivLuchtLatestLayer,
"Luchtfoto Vlaanderen (2013-2015, door AIV)": this.aivLucht2013Layer,
"Kaart van OpenStreetMap": this.osmLayer,
"Kaart Grootschalig ReferentieBestand Vlaanderen (GRB) door AIV": this.grbLayer
}; };
public static readonly defaultLayer = BaseLayers.baseLayers[BaseLayers.defaultLayerName];
}
// Contains all setup and baselayers for Leaflet stuff
export class Basemap {
// @ts-ignore
public map: Map;
public Location: UIEventSource<{ zoom: number, lat: number, lon: number }>;
public LastClickLocation: UIEventSource<{ lat: number, lon: number }> = new UIEventSource<{ lat: number, lon: number }>(undefined)
public CurrentLayer: UIEventSource<{
name: string,
layer: L.tileLayer
}> = new UIEventSource<L.tileLayer>(
{name: BaseLayers.defaultLayerName, layer: BaseLayers.defaultLayer}
);
constructor(leafletElementId: string, constructor(leafletElementId: string,
location: UIEventSource<{ zoom: number, lat: number, lon: number }>, location: UIEventSource<{ zoom: number, lat: number, lon: number }>,
extraAttribution: UIElement) { extraAttribution: UIElement) {
this.map = L.map(leafletElementId, { this.map = L.map(leafletElementId, {
center: [location.data.lat, location.data.lon], center: [location.data.lat, location.data.lon],
zoom: location.data.zoom, zoom: location.data.zoom,
layers: [this.osmLayer], layers: [BaseLayers.defaultLayer],
}); });
this.map.attributionControl.setPrefix( this.map.attributionControl.setPrefix(
extraAttribution.Render() + " | <a href='https://osm.org'>OpenStreetMap</a>"); extraAttribution.Render() + " | <a href='https://osm.org'>OpenStreetMap</a>");
this.Location = location; this.Location = location;
const layerControl = L.control.layers(this.baseLayers, null,
{
position: 'bottomright',
hideSingleBase: true
})
layerControl.addTo(this.map);
this.map.zoomControl.setPosition("bottomright"); this.map.zoomControl.setPosition("bottomright");
const self = this; const self = this;