167 lines
4.7 KiB
JavaScript
167 lines
4.7 KiB
JavaScript
import maplibregl from "maplibre-gl";
|
|
import {Deck} from '@deck.gl/core';
|
|
import {PointCloudLayer} from '@deck.gl/layers';
|
|
import {LASLoader} from '@loaders.gl/las';
|
|
import {MapboxOverlay} from '@deck.gl/mapbox';
|
|
import {COORDINATE_SYSTEM} from '@deck.gl/core';
|
|
|
|
|
|
const map = new maplibregl.Map({
|
|
container: 'map',
|
|
style: "https://tiles.openfreemap.org/styles/bright",
|
|
center: [9.209116842757239, 52.26520546238239],
|
|
zoom: 17
|
|
});
|
|
|
|
/*
|
|
const layer = new PointCloudLayer({
|
|
data: '/3dm_32_285_5653_1_nw.copc_WGS84.laz',
|
|
loaders: [LASLoader],
|
|
});
|
|
|
|
|
|
const overlay = new MapboxOverlay({
|
|
layers: [layer]
|
|
});
|
|
|
|
map.addControl(overlay);
|
|
*/
|
|
|
|
|
|
// Hintergrundkarte ändern
|
|
function changeBaseMap(newMap){
|
|
var basemapStyle;
|
|
switch(newMap){
|
|
case "openfree_dark":
|
|
basemapStyle = "https://tiles.openfreemap.org/styles/dark"
|
|
break;
|
|
case "openfree_bright":
|
|
basemapStyle = "https://tiles.openfreemap.org/styles/bright"
|
|
break;
|
|
case "openfree_liberty":
|
|
basemapStyle = "https://tiles.openfreemap.org/styles/liberty"
|
|
break;
|
|
case "google_satellite":
|
|
basemapStyle = {
|
|
version: 8,
|
|
sources: {
|
|
"raster-tiles": {
|
|
type: "raster",
|
|
tiles: [
|
|
"https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
|
|
"https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
|
|
"https://mt2.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
|
|
"https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
|
|
],
|
|
tileSize: 256,
|
|
},
|
|
},
|
|
layers: [{ id: "raster-layer", type: "raster", source: "raster-tiles" }],
|
|
}
|
|
break;
|
|
case "terrain":
|
|
basemapStyle = {
|
|
version: 8,
|
|
sources: {
|
|
osm: {
|
|
type: 'raster',
|
|
tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
|
|
tileSize: 256,
|
|
attribution: '© OpenStreetMap Contributors',
|
|
maxzoom: 19
|
|
},
|
|
// Use a different source for terrain and hillshade layers, to improve render quality
|
|
terrainSource: {
|
|
type: 'raster-dem',
|
|
url: 'https://tiles.mapterhorn.com/tilejson.json',
|
|
},
|
|
hillshadeSource: {
|
|
type: 'raster-dem',
|
|
url: 'https://tiles.mapterhorn.com/tilejson.json'
|
|
}
|
|
},
|
|
layers: [
|
|
{
|
|
id: 'osm',
|
|
type: 'raster',
|
|
source: 'osm'
|
|
},
|
|
{
|
|
id: 'hills',
|
|
type: 'hillshade',
|
|
source: 'hillshadeSource',
|
|
layout: {visibility: 'visible'},
|
|
paint: {'hillshade-shadow-color': '#473B24'}
|
|
}
|
|
],
|
|
terrain: {
|
|
source: 'terrainSource',
|
|
exaggeration: 1
|
|
},
|
|
sky: {}
|
|
}
|
|
break;
|
|
case "satellite_terrain":
|
|
basemapStyle = {
|
|
version: 8,
|
|
sources: {
|
|
osm: {
|
|
type: 'raster',
|
|
tiles: [
|
|
"https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
|
|
"https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
|
|
"https://mt2.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
|
|
"https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
|
|
],
|
|
tileSize: 256,
|
|
attribution: '© OpenStreetMap Contributors',
|
|
maxzoom: 19
|
|
},
|
|
// Use a different source for terrain and hillshade layers, to improve render quality
|
|
terrainSource: {
|
|
type: 'raster-dem',
|
|
url: 'https://tiles.mapterhorn.com/tilejson.json',
|
|
},
|
|
hillshadeSource: {
|
|
type: 'raster-dem',
|
|
url: 'https://tiles.mapterhorn.com/tilejson.json'
|
|
}
|
|
},
|
|
layers: [
|
|
{
|
|
id: 'osm',
|
|
type: 'raster',
|
|
source: 'osm'
|
|
},
|
|
{
|
|
id: 'hills',
|
|
type: 'hillshade',
|
|
source: 'hillshadeSource',
|
|
layout: {visibility: 'visible'},
|
|
paint: {'hillshade-shadow-color': '#473B24'}
|
|
}
|
|
],
|
|
terrain: {
|
|
source: 'terrainSource',
|
|
exaggeration: 1
|
|
},
|
|
sky: {}
|
|
}
|
|
|
|
}
|
|
map.setStyle(basemapStyle);
|
|
}
|
|
|
|
// ausgewähltes Element im BaseMap DropDown Feld
|
|
const selectElement = document.querySelector('select[name="basemap"]');
|
|
selectElement.addEventListener('change', (event) => {
|
|
changeBaseMap(event.target.value);
|
|
});
|
|
|
|
|
|
// Karte auf Nord zurücksetzen
|
|
document.getElementById("resetBtn").addEventListener("click", () => {
|
|
map.resetNorth();
|
|
});
|
|
|
|
//Test
|