update project

2026-04-27 17:24:22 +02:00
commit 0a6b638004
9 changed files with 5407 additions and 0 deletions
--- a/main.js
+++ b/main.js
@@ -0,0 +1,145 @@
+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: '&copy; 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: {
+      "satellite": {
+        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,
+      },
+      // ── Elevation data ──────────────────────────
+      "terrarium": {
+        type: "raster-dem",
+        tiles: ["https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png"],
+        tileSize: 256,
+        encoding: "terrarium",
+        maxzoom: 15
+      },
+    },
+    layers: [{ id: "satellite", type: "raster", source: "satellite" }],
+    // 2-fache Überhöhung
+    terrain: { source: "terrarium", exaggeration: 2 },
+  }
+  }
+  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();
+});