ar2350/Projekt-Visualisierung
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Kommentiert

Browse Source
This commit is contained in:
ar2350
2026-07-02 22:02:57 +02:00
parent 267952ef71
commit da29cbeb7e
3 changed files with 860 additions and 813 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+12 -24
View File
@@ -3,22 +3,12 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>LiDAR App</title> <title>LiDAR App</title>
<link <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet"/>
href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="./libs/potree/potree.css" /> <link rel="stylesheet" type="text/css" href="./libs/potree/potree.css" />
<link <link rel="stylesheet" type="text/css" href="./libs/jquery-ui/jquery-ui.min.css"/>
rel="stylesheet"
type="text/css"
href="./libs/jquery-ui/jquery-ui.min.css"
/>
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<header id="header"> <header id="header">
@@ -26,8 +16,7 @@
</header> </header>
<h1 id="title">- Obernkirchener Sandstein -</h1> <h1 id="title">- Obernkirchener Sandstein -</h1>
<div id="coordinates" title="Koordinaten an Mausposition"></div> <div id="coordinates" title="Koordinaten an Mausposition"></div>
<div id="openButtonOuter"> <div id="openButtonOuter"></div>
</div>
<div id="sideBarOuter"> <div id="sideBarOuter">
<aside id="sidebar"> <aside id="sidebar">
<button class="sideBarButtons" id="closeSideBarButton" title="Menü einklappen"><<</button> <button class="sideBarButtons" id="closeSideBarButton" title="Menü einklappen"><<</button>
@@ -69,13 +58,15 @@
<span>Klein</span> <span>Klein</span>
<span>Groß</span> <span>Groß</span>
</div> </div>
<input id="pointSizeSlider" type="range" min="1" max="10" value="2" step="1"> <input id="pointSizeSlider" type="range" min="1" max="10" value="2" step="1"/>
<p class="sideBarText">Renderer</p> <p class="sideBarText">Renderer</p>
<button id="rendererToggle" data-active="deckgl" title="Renderer wechseln"> <button id="rendererToggle" data-active="deckgl" title="Renderer wechseln">
<span id="rendererLabel">Renderer: Deck.gl</span> <span id="rendererLabel">Renderer: Deck.gl</span>
<span id="rendererIcon">⇄</span> <span id="rendererIcon">⇄</span>
</button> </button>
<button id="openInfoPanel" title="Informationen zur Punktwolke"><img src="info.png"/>Informationen</button> <button id="openInfoPanel" title="Informationen zur Punktwolke">
<img src="info.png" />Informationen
</button>
<div class="logos"> <div class="logos">
<a href="http://www.jade-hs.de"> <a href="http://www.jade-hs.de">
<img id="logoJadeHs" src="logoJadeHs.png" /> <img id="logoJadeHs" src="logoJadeHs.png" />
@@ -92,15 +83,13 @@
</div> </div>
<div id="map"></div> <div id="map"></div>
<div id="potree_render_area"></div> <div id="potree_render_area"></div>
<footer> <footer>&#169 Arne Zitting u. Hauke Kahrs</footer>
&#169 Arne Zitting u. Hauke Kahrs
</footer>
<div id="info-panel"> <div id="info-panel">
<div id="info-panel-inner"> <div id="info-panel-inner">
<button class="sideBarButtons" id="closeInfoPanel" title="Info einklappen">>></button> <button class="sideBarButtons" id="closeInfoPanel" title="Info einklappen">>></button>
<h3 id="info-panel-title">Info</h3> <h3 id="info-panel-title">Info</h3>
<img id="info-panel-image" src="" alt="Standortbild" style="display:none;" /> <img id="info-panel-image" src="" alt="Standortbild" style="display: none"/>
<div id="info-image-nav" style="display:none;"> <div id="info-image-nav" style="display: none">
<button id="info-img-prev">&#8592;</button> <button id="info-img-prev">&#8592;</button>
<span id="info-image-counter"></span> <span id="info-image-counter"></span>
<button id="info-img-next">&#8594;</button> <button id="info-img-next">&#8594;</button>
@@ -108,8 +97,7 @@
<p id="info-panel-text">Bitte wählen Sie eine Punktwolke aus.</p> <p id="info-panel-text">Bitte wählen Sie eine Punktwolke aus.</p>
</div> </div>
</div> </div>
<div id="info-button-outer"> <div id="info-button-outer"></div>
</div>
</main> </main>
<script src="./libs/jquery/jquery-3.1.1.min.js"></script> <script src="./libs/jquery/jquery-3.1.1.min.js"></script>
<script src="./libs/other/BinaryHeap.js"></script> <script src="./libs/other/BinaryHeap.js"></script>
main.js
+253 -203
View File
@@ -1,3 +1,4 @@
import maplibregl from "maplibre-gl"; import maplibregl from "maplibre-gl";
import proj4 from "proj4"; import proj4 from "proj4";
import * as THREE from "three"; import * as THREE from "three";
@@ -5,15 +6,27 @@ import { LidarControl } from "maplibre-gl-lidar";
import "maplibre-gl/dist/maplibre-gl.css"; import "maplibre-gl/dist/maplibre-gl.css";
import "maplibre-gl-lidar/style.css"; import "maplibre-gl-lidar/style.css";
// UTM Zone 32N für Koordinatentransformation registrieren
proj4.defs("EPSG:25832", "+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs"); proj4.defs("EPSG:25832", "+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs");
// Koordinaten des Obernkirchener Sandstein (Kartenmittelpunkt)
// Koordinaten des Obernkirchener Sandstein
const center = [9.209116842757239, 52.26520546238239]; const center = [9.209116842757239, 52.26520546238239];
// die Grundkarte // Zustandsvariablen
let currentPointCloud = null; // aktuell geladene Potree-Punktwolke
let isVisible = true; // Punktwolke sichtbar?
let currentRenderer = "deckgl"; // Default-Renderer deck.gl"
let currentColorMode = "rgb"; // Farbmodus: "rgb" oder "elevation"
let currentPointSize = Number(document.getElementById("pointSizeSlider").value);
let currentPointcloudKey = null; // ausgewählte Punktwolke
let lidarControl = null; // Deck.gl LidarControl-Instanz
var quality = "medium"; // Qualitätsstufe
//-------------------------------- Karten-Initialisierung --------------------------------------------------
// Grundkarte: OpenFreeMap hell
const map = new maplibregl.Map({ const map = new maplibregl.Map({
container: 'map', container: "map",
style: "https://tiles.openfreemap.org/styles/bright", style: "https://tiles.openfreemap.org/styles/bright",
center: center, center: center,
zoom: 17, zoom: 17,
@@ -21,40 +34,27 @@ const map = new maplibregl.Map({
}); });
// Karten-Bedienelemente // Karten-Bedienelemente
map.addControl(new maplibregl.NavigationControl({ map.addControl(
new maplibregl.NavigationControl({
visualizePitch: true, visualizePitch: true,
showZoom: true, showZoom: true,
showCompass: true showCompass: true,
})); }),
);
let currentPointCloud = null;
let isVisible = true;
let currentRenderer='deckgl';
let currentColorMode='rgb';
let currentPointSize=Number(document.getElementById("pointSizeSlider").value);
let currentPointcloudKey = null;
let lidarControl=null;
var quality = 'medium';
// WICHTIG: Layer/Controls immer erst im 'load'-Event der Karte hinzufügen // Karten Load-Event: LidarControl anlegen, JSON-Datei laden
map.on('load', () => { map.on("load", () => {
lidarControl = new LidarControl({ lidarControl = new LidarControl({
title: 'Mein LiDAR-Viewer', title: "LiDAR-Viewer",
collapsed: false, collapsed: false,
pointSize: 2, pointSize: 2,
colorScheme: 'rgb', // 'elevation' oder 'rgb' colorScheme: "rgb", // 'elevation' oder 'rgb'
pointBudget: 3000000, pointBudget: 3000000,
maxRequests: 32, maxRequests: 32,
pickable: false, pickable: false,
}); });
// COPC-Datei laden
const selectBox=document.querySelector('select[name="pointcloud"]');
if (selectBox && selectBox.value){
currentPointcloudKey=selectBox.value;
loadCurrentPointCloud();
}
loadInfoJSON(); loadInfoJSON();
}); });
@@ -70,29 +70,35 @@ viewer.setBackground("none");
viewer.orbitControls.enabled = false; viewer.orbitControls.enabled = false;
viewer.fpControls.enabled = false; viewer.fpControls.enabled = false;
viewer.deviceControls.enabled = false; viewer.deviceControls.enabled = false;
elRenderArea.style.display='none'; elRenderArea.style.display = "none";
viewer.setPointBudget(3000000) viewer.setPointBudget(3000000);
//-------------------------- LIDARCONTROL (DECK.GL) NEU AUFBAUEN ----------------------------------------
// entfernt das bestehende LidarControl und erzeugt es mit den aktuellen Einstellungen neu
function resetLidarControl() { function resetLidarControl() {
if (!lidarControl) return; if (!lidarControl)
return;
try { try {
map.removeControl(lidarControl); map.removeControl(lidarControl);
} catch (e) {} } catch (e) {}
lidarControl = null; lidarControl = null;
lidarControl = new LidarControl({ lidarControl = new LidarControl({
title: 'Mein LiDAR-Viewer', title: "LiDAR-Viewer",
collapsed: false, collapsed: false,
pointSize: currentPointSize > 0 ? currentPointSize : 2, pointSize: currentPointSize > 0 ? currentPointSize : 2,
colorScheme: currentColorMode === 'rgb' ? 'rgb' : 'elevation', colorScheme: currentColorMode === "rgb" ? "rgb" : "elevation",
pointBudget: 3000000, pointBudget: 3000000,
maxRequests: 32, maxRequests: 32,
pickable: false pickable: false,
}); });
map.addControl(lidarControl, 'top-right'); map.addControl(lidarControl, "top-right");
} }
//-------------- PUNKTWOLKEN-DATENQUELLEN (Pfade je Renderer-Format) - aktuell auf Server der Jade-HS --------------------
// Punktwolkendaten im Potree-Format // Punktwolkendaten im Potree-Format
function getPointCloudFilesPOTREE() { function getPointCloudFilesPOTREE() {
return { return {
@@ -112,112 +118,140 @@ function getPointCloudFilesCOPC() {
} }
function loadCurrentPointCloud() { //---------------------------- PUNKTWOLKEN LADEN (je nach aktivem Renderer) -------------------------------------
if (!currentPointcloudKey) return;
if (currentRenderer === 'deckgl') { // wählt automatisch Potree- oder Deck.gl-Renderer und lädt die Punktwolke
function loadPointCloud() {
if (!currentPointcloudKey)
return;
if (currentRenderer === "deckgl") {
loadDeckGL(getPointCloudFilesCOPC()[currentPointcloudKey]); loadDeckGL(getPointCloudFilesCOPC()[currentPointcloudKey]);
} else { } else {
loadPointCloud(getPointCloudFilesPOTREE()[currentPointcloudKey]); loadPointCloudPotree(getPointCloudFilesPOTREE()[currentPointcloudKey]);
} }
} }
//---------------------- Punktwolken laden über den deck.gl-Renderer ----------------------
function loadDeckGL(path) { function loadDeckGL(path) {
if (!lidarControl || !path) return; if (!lidarControl || !path)
return;
resetLidarControl(); resetLidarControl();
lidarControl.loadPointCloudStreaming(path); lidarControl.loadPointCloudStreaming(path);
setTimeout(() => applyDeckGLSettings(), 500); setTimeout(() => applyDeckGLSettings(), 500);
} }
// Punktgröße, Farbschema und Colormap auf LidarControl anwenden
function applyDeckGLSettings() { function applyDeckGLSettings() {
if (!lidarControl) return; if (!lidarControl)
return;
try { try {
lidarControl.setPointSize(currentPointSize > 0 ? currentPointSize : 2); lidarControl.setPointSize(currentPointSize > 0 ? currentPointSize : 2);
lidarControl.setColorScheme(currentColorMode === 'rgb' ? 'rgb' : 'elevation'); lidarControl.setColorScheme(currentColorMode === "rgb" ? "rgb" : "elevation",);
lidarControl.setColormap('jet'); lidarControl.setColormap("jet");
//lidarControl.setPointBudget(3000000); } catch (e) {}
} catch(e) { console.warn("LidarControl API:", e); }
} }
//------------------------- Renderer zwischen deck.gl und potree umstellen -----------------------------------
function switchRenderer(renderer) { function switchRenderer(renderer) {
currentRenderer = renderer; currentRenderer = renderer;
const slider = document.getElementById("pointSizeSlider"); const slider = document.getElementById("pointSizeSlider");
if (renderer === 'deckgl') { if (renderer === "deckgl") {
elRenderArea.style.display = 'none'; elRenderArea.style.display = "none";
if (currentPointCloud) currentPointCloud.visible = false; if (currentPointCloud){
currentPointCloud.visible = false;
}
currentPointSize = 2; currentPointSize = 2;
slider.min = 1; slider.min = 1;
slider.max = 10; slider.max = 10;
slider.value = 2; slider.value = 2;
if (lidarControl && currentPointcloudKey) loadDeckGL(getPointCloudFilesCOPC()[currentPointcloudKey]); if (lidarControl && currentPointcloudKey){
document.getElementById('rendererToggle').dataset.active = 'deckgl'; loadDeckGL(getPointCloudFilesCOPC()[currentPointcloudKey]);
document.getElementById('rendererLabel').textContent = 'Renderer: Deck.gl'; }
document.getElementById("rendererToggle").dataset.active = "deckgl";
document.getElementById("rendererLabel").textContent = "Renderer: Deck.gl";
} else { } else {
resetLidarControl(); resetLidarControl();
elRenderArea.style.display = 'block'; elRenderArea.style.display = "block";
currentPointSize = 0; currentPointSize = 0;
slider.min = 0; slider.min = 0;
slider.max = 1000; slider.max = 1000;
slider.value = 0; slider.value = 0;
if (currentPointcloudKey) loadPointCloud(getPointCloudFilesPOTREE()[currentPointcloudKey]); if (currentPointcloudKey){
document.getElementById('rendererToggle').dataset.active = 'potree'; loadPointCloudPotree(getPointCloudFilesPOTREE()[currentPointcloudKey]);
document.getElementById('rendererLabel').textContent = 'Renderer: Potree'; }
document.getElementById("rendererToggle").dataset.active = "potree";
document.getElementById("rendererLabel").textContent = "Renderer: Potree";
} }
applyVisibility(); applyVisibility();
} }
function applyVisibility() {
if (currentRenderer === 'potree' && currentPointCloud) { // Sichtbarkeit der Punktwolke je nach aktivem Renderer setzen
function applyVisibility() {
if (currentRenderer === "potree" && currentPointCloud) {
currentPointCloud.visible = isVisible; currentPointCloud.visible = isVisible;
} }
if (currentRenderer === 'deckgl') { if (currentRenderer === "deckgl") {
// Trick: Punktgröße auf 0 setzen
lidarControl.setPointSize(isVisible ? 2 : 0); lidarControl.setPointSize(isVisible ? 2 : 0);
} }
} }
// Farbmodus (rgb/elevation) auf die Potree-Punktwolke anwenden
function applyColorModePotree() { function applyColorModePotree() {
if (!currentPointCloud) return; if (!currentPointCloud)
return;
let mat = currentPointCloud.material; let mat = currentPointCloud.material;
mat.activeAttributeName = currentColorMode === 'rgb' ? "rgba" : "elevation"; mat.activeAttributeName = currentColorMode === "rgb" ? "rgba" : "elevation";
viewer.renderer.resetState(); viewer.renderer.resetState();
viewer.render(); viewer.render();
map.triggerRepaint(); map.triggerRepaint();
} }
// Farbmodus je nach aktivem Renderer anwenden
function applyColorMode() { function applyColorMode() {
if (currentRenderer === 'potree') { applyColorModePotree(); } if (currentRenderer === "potree") {
else { applyDeckGLSettings(); } applyColorModePotree();
} else {
applyDeckGLSettings();
}
} }
//-------------------- INFO-JSON laden (Texte/Bilder zu den Punktwolken) -----------------
function loadInfoJSON() { function loadInfoJSON() {
fetch("info.json") fetch("info.json").then((r) => r.json()).then((data) => {
.then(r => r.json()) pointCloudInfo = data;
.then(data => { pointCloudInfo = data; }) })
.catch(e => console.error("Fehler beim Laden der JSON:", e)); .catch((e) => console.error("Fehler beim Laden der JSON:", e));
} }
//------------------------ Punktwolke im Potree Format laden -----------------------------
//------------------------lädt Punktwolke im Potree Format----------------------------- function loadPointCloudPotree(path) {
function loadPointCloud(path) {
viewer.scene.view.yaw = 0; viewer.scene.view.yaw = 0;
viewer.scene.view.pitch = 0; viewer.scene.view.pitch = 0;
// vorhandene Punktwolke aus der Szene entfernen
if (currentPointCloud) { if (currentPointCloud) {
const index = viewer.scene.pointclouds.indexOf(currentPointCloud); const index = viewer.scene.pointclouds.indexOf(currentPointCloud);
if (index !== -1) viewer.scene.pointclouds.splice(index, 1); if (index !== -1)
if (currentPointCloud.parent) currentPointCloud.parent.remove(currentPointCloud); viewer.scene.pointclouds.splice(index, 1);
if (currentPointCloud.parent){
currentPointCloud.parent.remove(currentPointCloud);
}
currentPointCloud = null; currentPointCloud = null;
viewer.render(); viewer.render();
} }
if (!path || !isVisible) return; if (!path || !isVisible)
return;
Potree.loadPointCloud(path, "punktwolke", function (e) { Potree.loadPointCloud(path, "punktwolke", function (e) {
currentPointCloud = e.pointcloud; currentPointCloud = e.pointcloud;
@@ -252,45 +286,34 @@ function loadPointCloud(path) {
// Variable, um Endlosschleifen zu verhindern // Variable, um Endlosschleifen zu verhindern
let isSyncing = false; let isSyncing = false;
/* //------------------ Kamera von Potree und MapLibre syncronisieren ------------------------------------
Kamera von Potree und MapLibre syncronisieren
*/
function syncCamera() { function syncCamera() {
if (!currentPointCloud || isSyncing || currentRenderer !== "potree")
if (!currentPointCloud || isSyncing || currentRenderer!== 'potree') return; return;
isSyncing = true; isSyncing = true;
const transform = map.transform; const transform = map.transform;
// 1. Dimensionen auf den Pixel genau angleichen // 1. Dimensionen auf den Pixel genau angleichen
if (viewer.renderer) { if (viewer.renderer) {
viewer.renderer.setSize(map.getCanvas().clientWidth, map.getCanvas().clientHeight); viewer.renderer.setSize(map.getCanvas().clientWidth, map.getCanvas().clientHeight,);
} }
// 2. Mathematische Parameter aus dem MapLibre-Kern extrahieren // 2. Mathematische Parameter aus dem MapLibre-Kern extrahieren
const pitch = transform.pitch * Math.PI / 180; const pitch = (transform.pitch * Math.PI) / 180;
const bearing = transform.bearing * Math.PI / 180; const bearing = (transform.bearing * Math.PI) / 180;
const mapCenter = map.getCenter(); const mapCenter = map.getCenter();
const [utmX, utmY] = proj4("EPSG:4326", "EPSG:25832", [mapCenter.lng, mapCenter.lat]); const [utmX, utmY] = proj4("EPSG:4326", "EPSG:25832", [mapCenter.lng, mapCenter.lat,]);
// WICHTIG: Nutze MapLibres exakte mathematische Kameradistanz // MapLibres exakte mathematische Kameradistanz nutzen
const distanceInMeters = transform.cameraToCenterDistance / transform.pixelsPerMeter; const distanceInMeters = transform.cameraToCenterDistance / transform.pixelsPerMeter;
const target = new THREE.Vector3(utmX, utmY, 0); const target = new THREE.Vector3(utmX, utmY, 0);
const offset = new THREE.Vector3( const offset = new THREE.Vector3(0, -distanceInMeters * Math.sin(pitch), distanceInMeters * Math.cos(pitch),);
0,
-distanceInMeters * Math.sin(pitch),
distanceInMeters * Math.cos(pitch)
);
offset.applyAxisAngle(new THREE.Vector3(0, 0, 1), -bearing); offset.applyAxisAngle(new THREE.Vector3(0, 0, 1), -bearing);
const cameraPosition = target.clone().add(offset); const cameraPosition = target.clone().add(offset);
// 3. Potree-Kamera absolut starr setzen // 3. Potree-Kamera absolut starr setzen
viewer.scene.view.position.copy(cameraPosition); viewer.scene.view.position.copy(cameraPosition);
viewer.scene.view.lookAt(target); viewer.scene.view.lookAt(target);
viewer.setFOV(transform.fov); viewer.setFOV(transform.fov);
// 4. Potree rendern // 4. Potree rendern
@@ -300,153 +323,170 @@ function syncCamera() {
isSyncing = false; isSyncing = false;
} }
const originalRequestAnimationFrame = window.requestAnimationFrame;
const hookRenderLoop = () => {
// Erzwinge die Kamerasynchronisation bei jedem Karten-Update
syncCamera();
};
// Verwendet MapLibres internes Repaint-System, um absolut latenzfrei zu synchronisieren // Kartenbewegungs-Events: Kamera-Synchronisation
map.on('movestart', () => { map.on("movestart", () => {
map.getCanvasContainer().style.cursor = 'grabbing'; map.getCanvasContainer().style.cursor = "grabbing";
}); });
// bei jeder Kartenbwegeung die Kameras synchronisieren // bei jeder Kartenbewegung die Kameras synchronisieren
map.on('zoom', syncCamera); map.on("zoom", syncCamera);
map.on('move', syncCamera); map.on("move", syncCamera);
map.on('rotate', syncCamera); map.on("rotate", syncCamera);
map.on('pitch', syncCamera); map.on("pitch", syncCamera);
map.on('draw', syncCamera); map.on("draw", syncCamera);
// Potree-Canvas soll keine Mausereignisse abfangen, nur die MapLibre-Canvas
elRenderArea.style.pointerEvents = "none"; elRenderArea.style.pointerEvents = "none";
map.getCanvas().style.pointerEvents = "auto"; map.getCanvas().style.pointerEvents = "auto";
/* //---------------------- Hintergrundkarte ändern ---------------------------------------------------
Hintergrundkarte ändern, Optionen: hell, dunkel, 3D-Gebäudemodelle, Satellit, Terrain, Satellit+Terrain
*/
function changeBaseMap(newMap) { function changeBaseMap(newMap) {
var basemapStyle; var basemapStyle;
switch (newMap) { switch (newMap) {
// dunkle Karte
case "openfree_dark": case "openfree_dark":
basemapStyle = "https://tiles.openfreemap.org/styles/dark"; basemapStyle = "https://tiles.openfreemap.org/styles/dark";
break; break;
// helle Karte
case "openfree_bright": case "openfree_bright":
basemapStyle = "https://tiles.openfreemap.org/styles/bright"; basemapStyle = "https://tiles.openfreemap.org/styles/bright";
break; break;
// mit LOD1-GEbäudemodellen
case "openfree_liberty": case "openfree_liberty":
basemapStyle = "https://tiles.openfreemap.org/styles/liberty"; basemapStyle = "https://tiles.openfreemap.org/styles/liberty";
break; break;
// Satellitenbild
case "satellite": case "satellite":
basemapStyle = { basemapStyle = {
version: 8, version: 8,
sources: { sources: {
"raster-tiles": { "raster-tiles": {
type: "raster", type: "raster",
tiles: ["https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=6mG881AthmTTWyLvFyjH"], tiles: [
"https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=6mG881AthmTTWyLvFyjH",
],
tileSize: 256, tileSize: 256,
attribution: "&copy; MapTiler" attribution: "&copy; MapTiler",
}
}, },
layers: [{ },
layers: [
{
id: "satellite-layer", id: "satellite-layer",
type: "raster", type: "raster",
source: "raster-tiles" source: "raster-tiles",
}] },
],
}; };
break; break;
// Gelände
case "terrain": case "terrain":
basemapStyle = { basemapStyle = {
version: 8, version: 8,
sources: { sources: {
topo: { topo: {
type: 'raster', type: "raster",
url: 'https://api.maptiler.com/maps/topo-v4/tiles.json?key=6mG881AthmTTWyLvFyjH', url: "https://api.maptiler.com/maps/topo-v4/tiles.json?key=6mG881AthmTTWyLvFyjH",
tileSize: 256 tileSize: 256,
}, },
terrainSource: { terrainSource: {
type: 'raster-dem', type: "raster-dem",
url: 'https://tiles.mapterhorn.com/tilejson.json' url: "https://tiles.mapterhorn.com/tilejson.json",
}, },
hillshadeSource: { hillshadeSource: {
type: 'raster-dem', type: "raster-dem",
url: 'https://tiles.mapterhorn.com/tilejson.json' url: "https://tiles.mapterhorn.com/tilejson.json",
}
}, },
layers: [{ },
id: 'topo', layers: [
type: 'raster', {
source: 'topo' id: "topo",
}, { type: "raster",
id: 'hills', source: "topo",
type: 'hillshade', },
source: 'hillshadeSource', {
id: "hills",
type: "hillshade",
source: "hillshadeSource",
layout: { layout: {
visibility: 'visible' visibility: "visible",
}, },
paint: { paint: {
'hillshade-shadow-color': '#473B24' "hillshade-shadow-color": "#473B24",
}
}],
terrain: {
source: 'terrainSource',
exaggeration: 1
}, },
sky: {} },
],
terrain: {
source: "terrainSource",
exaggeration: 1,
},
sky: {},
}; };
break; break;
// Gelände mit Satellitenbild
case "satellite_terrain": case "satellite_terrain":
basemapStyle = { basemapStyle = {
version: 8, version: 8,
sources: { sources: {
"raster-tiles": { "raster-tiles": {
type: "raster", type: "raster",
tiles: ["https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=6mG881AthmTTWyLvFyjH"], tiles: [
"https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=6mG881AthmTTWyLvFyjH",
],
tileSize: 256, tileSize: 256,
attribution: "&copy; MapTiler" attribution: "&copy; MapTiler",
}, },
terrainSource: { terrainSource: {
type: 'raster-dem', type: "raster-dem",
url: 'https://tiles.mapterhorn.com/tilejson.json' url: "https://tiles.mapterhorn.com/tilejson.json",
}, },
hillshadeSource: { hillshadeSource: {
type: 'raster-dem', type: "raster-dem",
url: 'https://tiles.mapterhorn.com/tilejson.json' url: "https://tiles.mapterhorn.com/tilejson.json",
}
}, },
layers: [{ },
id: 'raster-tiles', layers: [
type: 'raster', {
source: 'raster-tiles' id: "raster-tiles",
}, { type: "raster",
id: 'hills', source: "raster-tiles",
type: 'hillshade', },
source: 'hillshadeSource', {
id: "hills",
type: "hillshade",
source: "hillshadeSource",
layout: { layout: {
visibility: 'visible' visibility: "visible",
}, },
paint: { paint: {
'hillshade-shadow-color': '#473B24' "hillshade-shadow-color": "#473B24",
}
}],
terrain: {
source: 'terrainSource',
exaggeration: 1
}, },
sky: {} },
],
terrain: {
source: "terrainSource",
exaggeration: 1,
},
sky: {},
}; };
break; break;
} }
map.setStyle(basemapStyle); map.setStyle(basemapStyle);
} }
//------------------------------------------------------Action-Listener und Event-Handler---------------------------------------------------------------------------------
// Punktwolke aus/einblenden
document.querySelector('#disable').addEventListener('click', function() { //----------------------------------Action-Listener und Event-Handler--------------------------------------
// Punktwolke über Button aus/einblenden
document.querySelector("#disable").addEventListener("click", function () {
isVisible = !isVisible; isVisible = !isVisible;
//if (currentPointCloud)
// currentPointCloud.visible = isVisible;
applyVisibility(); applyVisibility();
if (isVisible) { if (isVisible) {
@@ -462,21 +502,21 @@ document.querySelector('#disable').addEventListener('click', function() {
// Koordinaten an der Mausposition darstellen (auf 5 Nachkommastellen begrenzt) // Koordinaten an der Mausposition darstellen (auf 5 Nachkommastellen begrenzt)
const coordinatesDiv = document.getElementById('coordinates'); const coordinatesDiv = document.getElementById("coordinates");
map.on('mousemove', (e) => { map.on("mousemove", (e) => {
coordinatesDiv.innerHTML = `Lon: ${e.lngLat.lng.toFixed(5)}° | Lat: ${e.lngLat.lat.toFixed(5)}°`; coordinatesDiv.innerHTML = `Lon: ${e.lngLat.lng.toFixed(5)}° | Lat: ${e.lngLat.lat.toFixed(5)}°`;
}); });
// Hintergrundkarte ändern, wenn anderes Element im DropDown gewählt wird // Hintergrundkarte ändern, wenn anderes Element im DropDown gewählt wird
document.querySelector('select[name="basemap"]').addEventListener('change', (e) => changeBaseMap(e.target.value)); document.querySelector('select[name="basemap"]').addEventListener("change", (e) => {
changeBaseMap(e.target.value)
});
// Punktwolke austauschen, wenn anderes Element im DropDown gewählt wird // Punktwolke austauschen, wenn anderes Element im DropDown gewählt wird
document.querySelector('select[name="pointcloud"]').addEventListener('change', (e) => { document.querySelector('select[name="pointcloud"]').addEventListener("change", (e) => {
//loadPointCloud(getPointCloudFilesPOTREE()[e.target.value]);
currentPointcloudKey = e.target.value; currentPointcloudKey = e.target.value;
loadCurrentPointCloud(); loadPointCloud();
}); });
@@ -484,17 +524,21 @@ document.querySelector('select[name="pointcloud"]').addEventListener('change', (
document.getElementById("location").addEventListener("click", () => map.flyTo({ center, zoom: 17 })); document.getElementById("location").addEventListener("click", () => map.flyTo({ center, zoom: 17 }));
// Punktgröße mit Slider anpassen
document.getElementById("pointSizeSlider").oninput = function () { document.getElementById("pointSizeSlider").oninput = function () {
//viewer.setMinNodeSize(this.value);
currentPointSize = Number(this.value); currentPointSize = Number(this.value);
if (currentRenderer === 'potree') { if (currentRenderer === "potree") {
viewer.setMinNodeSize(currentPointSize); viewer.setMinNodeSize(currentPointSize);
} else if (lidarControl) { } else if (lidarControl) {
try { lidarControl.setPointSize(currentPointSize); } catch(e) {} try {
lidarControl.setPointSize(currentPointSize);
} catch (e) {}
} }
}; };
//--------------------------- Sidepannel ein/ausklappen ----------------------------------------------------
const closeButton = document.getElementById("closeSideBarButton"); const closeButton = document.getElementById("closeSideBarButton");
const sidebar = document.getElementById("sidebar"); const sidebar = document.getElementById("sidebar");
const openOuter = document.getElementById("openButtonOuter"); const openOuter = document.getElementById("openButtonOuter");
@@ -513,23 +557,24 @@ if (closeButton) {
} }
document.querySelectorAll('.qualityButtons').forEach(btn => { //------------------------- QUALITÄTS- UND FARB-BUTTONS ----------------------------------------------------
btn.addEventListener('click', () => { // Qualitätsstufe wählen
document.querySelectorAll(".qualityButtons").forEach((btn) => {
btn.addEventListener("click", () => {
quality = btn.id; quality = btn.id;
//if (currentPointCloud) loadPointCloud(getPointCloudFiles()[document.getElementById("pointcloud").value]); if (currentPointcloudKey)
if (currentPointcloudKey) loadCurrentPointCloud(); loadPointCloud();
document.querySelectorAll('.qualityButtons').forEach(b => b.classList.remove('active')); document.querySelectorAll(".qualityButtons").forEach((b) => b.classList.remove("active"));
btn.classList.add('active'); btn.classList.add("active");
}); });
}); });
document.querySelectorAll('.colorButtons').forEach(btn => { // Farbmodus (rgb/elevation) wählen
btn.addEventListener('click', () => { document.querySelectorAll(".colorButtons").forEach((btn) => {
//if (!currentPointCloud) return; // Abbrechen, falls noch keine Wolke geladen ist btn.addEventListener("click", () => {
document.querySelectorAll(".colorButtons").forEach((b) => b.classList.remove("active"));
document.querySelectorAll('.colorButtons').forEach(b => b.classList.remove('active')); btn.classList.add("active");
btn.classList.add('active');
currentColorMode = btn.id; currentColorMode = btn.id;
applyColorMode(); applyColorMode();
}); });
@@ -537,26 +582,25 @@ document.querySelectorAll('.colorButtons').forEach(btn => {
// Sobald die Karte das allererste Mal stabil steht, Kamera abgleichen // Sobald die Karte das allererste Mal stabil steht, Kamera abgleichen
map.once('idle', () => { map.once("idle", () => {
syncCamera(); syncCamera();
}); });
//--------------- INFO-PANEL (Texte & Bilder zu den Punktwolken) -------------------------------
let pointCloudInfo = {}; let pointCloudInfo = {};
const infoPanel = document.getElementById("info-panel"); const infoPanel = document.getElementById("info-panel");
const infoPanelTitle = document.getElementById("info-panel-title"); const infoPanelTitle = document.getElementById("info-panel-title");
const infoPanelText = document.getElementById("info-panel-text"); const infoPanelText = document.getElementById("info-panel-text");
const openInfoPanel = document.getElementById("openInfoPanel"); const openInfoPanel = document.getElementById("openInfoPanel");
const closeInfoPanel = document.getElementById("closeInfoPanel"); const closeInfoPanel = document.getElementById("closeInfoPanel");
let currentImageIndex = 0; let currentImageIndex = 0;
// Info-Panel mit Titel, Text und Bild/Bildern der gewählten Punktwolke befüllen
function updateInfoPanel() { function updateInfoPanel() {
const key = document.querySelector('select[name="pointcloud"]').value; const key = document.querySelector('select[name="pointcloud"]').value;
const info = pointCloudInfo[key]; const info = pointCloudInfo[key];
currentImageIndex = 0; currentImageIndex = 0;
if (info) { if (info) {
@@ -572,6 +616,7 @@ function updateInfoPanel() {
} }
// aktuelles Bild + Bildzähler im Info-Panel anzeigen
function updateImage(info) { function updateImage(info) {
const img = document.getElementById("info-panel-image"); const img = document.getElementById("info-panel-image");
const nav = document.getElementById("info-image-nav"); const nav = document.getElementById("info-image-nav");
@@ -589,44 +634,49 @@ function updateImage(info) {
} }
// vorheriges Bild im Info-Panel anzeigen
document.getElementById("info-img-prev").addEventListener("click", () => { document.getElementById("info-img-prev").addEventListener("click", () => {
const key = document.querySelector('select[name="pointcloud"]').value; const key = document.querySelector('select[name="pointcloud"]').value;
const info = pointCloudInfo[key]; const info = pointCloudInfo[key];
if (!info) return; if (!info)
return;
currentImageIndex = (currentImageIndex - 1 + info.images.length) % info.images.length; currentImageIndex = (currentImageIndex - 1 + info.images.length) % info.images.length;
updateImage(info); updateImage(info);
}); });
// nächstes Bild im Info-Panel anzeigen
document.getElementById("info-img-next").addEventListener("click", () => { document.getElementById("info-img-next").addEventListener("click", () => {
const key = document.querySelector('select[name="pointcloud"]').value; const key = document.querySelector('select[name="pointcloud"]').value;
const info = pointCloudInfo[key]; const info = pointCloudInfo[key];
if (!info) return; if (!info)
return;
currentImageIndex = (currentImageIndex + 1) % info.images.length; currentImageIndex = (currentImageIndex + 1) % info.images.length;
updateImage(info); updateImage(info);
}); });
// Info-Panel öffnen
openInfoPanel.addEventListener("click", () => { openInfoPanel.addEventListener("click", () => {
infoPanel.classList.add("open"); infoPanel.classList.add("open");
//openInfoPanel.style.display = "none";
}); });
// Info-Panel schließen
closeInfoPanel.addEventListener("click", () => { closeInfoPanel.addEventListener("click", () => {
infoPanel.classList.remove("open"); infoPanel.classList.remove("open");
openInfoPanel.style.display = "flex"; openInfoPanel.style.display = "flex";
}); });
// Panel aktualisieren wenn Punktwolke gewechselt wird // Info-Panel aktualisieren, wenn Punktwolke gewechselt wird
document.querySelector('select[name="pointcloud"]').addEventListener("change", () => { document.querySelector('select[name="pointcloud"]').addEventListener("change", () => {
updateInfoPanel(); updateInfoPanel();
}); });
document.getElementById('rendererToggle').addEventListener('click', function() { //Renderer Toggle Button
const next = currentRenderer === 'deckgl' ? 'potree' : 'deckgl'; document.getElementById("rendererToggle").addEventListener("click", function () {
const next = currentRenderer === "deckgl" ? "potree" : "deckgl";
switchRenderer(next); switchRenderer(next);
}); });
style.css
+21 -12
View File
@@ -1,4 +1,5 @@
html, body { html,
body {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
@@ -6,7 +7,7 @@ html, body {
body { body {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
} }
@@ -69,7 +70,9 @@ body{
background-color: #f8f9fa; background-color: #f8f9fa;
border: none !important; border: none !important;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); box-shadow:
0 0 0 2px rgba(0, 0, 0, 0.1),
0 4px 6px rgba(0, 0, 0, 0.05);
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -155,7 +158,6 @@ select{
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
cursor: pointer; cursor: pointer;
transition: 0.2s; transition: 0.2s;
} }
.selectWrapper { .selectWrapper {
@@ -223,7 +225,9 @@ select:hover{
select:focus { select:focus {
outline: none; outline: none;
box-shadow:0 0 0 4px rgba(37,99,235,0.15), 0 8px 24px rgba(0,0,0,0.12); box-shadow:
0 0 0 4px rgba(37, 99, 235, 0.15),
0 8px 24px rgba(0, 0, 0, 0.12);
} }
#disable:hover { #disable:hover {
@@ -367,7 +371,8 @@ position: absolute;
margin-bottom: 10px; margin-bottom: 10px;
} }
.qualityButtons, .colorButtons{ .qualityButtons,
.colorButtons {
flex: 1; flex: 1;
margin: 0; margin: 0;
appearance: none; appearance: none;
@@ -383,7 +388,8 @@ position: absolute;
transition: 0.2s; transition: 0.2s;
} }
.qualityButtons.active, .colorButtons.active{ .qualityButtons.active,
.colorButtons.active {
background: background:
linear-gradient( linear-gradient(
135deg, 135deg,
@@ -426,7 +432,8 @@ position: absolute;
135deg, 135deg,
rgba(18, 77, 216, 0.92) 10%, rgba(18, 77, 216, 0.92) 10%,
rgba(13, 61, 175, 0.92) 60%, rgba(13, 61, 175, 0.92) 60%,
rgba(6,45,135,0.92) 100%); rgba(6, 45, 135, 0.92) 100%
);
color: #ffffff; color: #ffffff;
} }
@@ -435,7 +442,8 @@ position: absolute;
135deg, 135deg,
rgba(22, 163, 74, 0.92) 10%, rgba(22, 163, 74, 0.92) 10%,
rgba(15, 118, 54, 0.92) 60%, rgba(15, 118, 54, 0.92) 60%,
rgba(6,78,32,0.92) 100%); rgba(6, 78, 32, 0.92) 100%
);
color: #ffffff; color: #ffffff;
} }
@@ -536,7 +544,8 @@ position: absolute;
color: #1e293b; color: #1e293b;
} }
#info-img-prev, #info-img-next { #info-img-prev,
#info-img-next {
border: none; border: none;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
border-radius: 8px; border-radius: 8px;
@@ -546,7 +555,8 @@ position: absolute;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
} }
#info-img-prev:hover, #info-img-next:hover { #info-img-prev:hover,
#info-img-next:hover {
background: rgb(233, 232, 232); background: rgb(233, 232, 232);
} }
@@ -570,4 +580,3 @@ button:has(.lidar-control-icon) {
padding: 0 !important; padding: 0 !important;
border: none !important; border: none !important;
} }