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

Compare commits

base: ar2350/Projekt-Visualisierung:d6a98a4f05ad68ce9e022bb214682890e75f06e1
Branches Tags
ar2350/Projekt-Visualisierung:main
...
compare: ar2350/Projekt-Visualisierung:main
Branches Tags
ar2350/Projekt-Visualisierung:main

2 Commits
d6a98a4f05 ... main

Author SHA1 Message Date
ar2350 da29cbeb7e Kommentiert 2026-07-02 22:02:57 +02:00
ar2350 267952ef71 Finaler build 2026-06-16 21:22:41 +02:00
5 changed files with 866 additions and 819 deletions
Expand all files Collapse all files
dist/info.json
Vendored
+3 -3
View File
@@ -2,16 +2,16 @@
"first": { "first": {
"title": "Fläche im unteren Bereich", "title": "Fläche im unteren Bereich",
"text": "Dieser Bereich des Steinbruchs zeigt eine natürliche Oberfläche aus Obernkirchener Sandstein. Zwischen einzelnen Sandsteinblöcken haben sich Sträucher und andere Pflanzen angesiedelt. Der Sandstein entstand vor etwa 140 Millionen Jahren in einer küstennahen Landschaft der Unterkreide.", "text": "Dieser Bereich des Steinbruchs zeigt eine natürliche Oberfläche aus Obernkirchener Sandstein. Zwischen einzelnen Sandsteinblöcken haben sich Sträucher und andere Pflanzen angesiedelt. Der Sandstein entstand vor etwa 140 Millionen Jahren in einer küstennahen Landschaft der Unterkreide.",
"images": ["stand1_1.jpeg", "stand1_2.jpeg"] "images": ["/stand1_1.jpeg", "/stand1_2.jpeg"]
}, },
"second": { "second": {
"title": "Abbauwand", "title": "Abbauwand",
"text": "An dieser Felswand wird der Obernkirchener Sandstein abgebaut. Das Gestein ist für seine hohe Festigkeit und Witterungsbeständigkeit bekannt und wird seit Jahrhunderten als Bau- und Werkstein genutzt. Es findet sich unter anderem an zahlreichen historischen Gebäuden in Deutschland.", "text": "An dieser Felswand wird der Obernkirchener Sandstein abgebaut. Das Gestein ist für seine hohe Festigkeit und Witterungsbeständigkeit bekannt und wird seit Jahrhunderten als Bau- und Werkstein genutzt. Es findet sich unter anderem an zahlreichen historischen Gebäuden in Deutschland.",
"images": ["stand2_1.jpeg"] "images": ["/stand2_1.jpeg"]
}, },
"third": { "third": {
"title": "Dinosaurier-Spuren", "title": "Dinosaurier-Spuren",
"text": "Auf dieser öffentlich zugänglichen Fläche sind fossile Fußspuren von Dinosauriern erhalten geblieben. Die Spuren entstanden vor rund 140 Millionen Jahren in feuchtem Sand und wurden später durch weitere Sedimentschichten konserviert. Sie gehören zu den bekanntesten Fossilienfunden im Obernkirchener Sandstein.", "text": "Auf dieser öffentlich zugänglichen Fläche sind fossile Fußspuren von Dinosauriern erhalten geblieben. Die Spuren entstanden vor rund 140 Millionen Jahren in feuchtem Sand und wurden später durch weitere Sedimentschichten konserviert. Sie gehören zu den bekanntesten Fossilienfunden im Obernkirchener Sandstein.",
"images": ["stand3_1.jpeg", "stand3_2.jpeg"] "images": ["/stand3_1.jpeg", "/stand3_2.jpeg"]
} }
} }
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);
}); });
public/info.json
+3 -3
View File
@@ -2,16 +2,16 @@
"first": { "first": {
"title": "Fläche im unteren Bereich", "title": "Fläche im unteren Bereich",
"text": "Dieser Bereich des Steinbruchs zeigt eine natürliche Oberfläche aus Obernkirchener Sandstein. Zwischen einzelnen Sandsteinblöcken haben sich Sträucher und andere Pflanzen angesiedelt. Der Sandstein entstand vor etwa 140 Millionen Jahren in einer küstennahen Landschaft der Unterkreide.", "text": "Dieser Bereich des Steinbruchs zeigt eine natürliche Oberfläche aus Obernkirchener Sandstein. Zwischen einzelnen Sandsteinblöcken haben sich Sträucher und andere Pflanzen angesiedelt. Der Sandstein entstand vor etwa 140 Millionen Jahren in einer küstennahen Landschaft der Unterkreide.",
"images": ["stand1_1.jpeg", "stand1_2.jpeg"] "images": ["/stand1_1.jpeg", "/stand1_2.jpeg"]
}, },
"second": { "second": {
"title": "Abbauwand", "title": "Abbauwand",
"text": "An dieser Felswand wird der Obernkirchener Sandstein abgebaut. Das Gestein ist für seine hohe Festigkeit und Witterungsbeständigkeit bekannt und wird seit Jahrhunderten als Bau- und Werkstein genutzt. Es findet sich unter anderem an zahlreichen historischen Gebäuden in Deutschland.", "text": "An dieser Felswand wird der Obernkirchener Sandstein abgebaut. Das Gestein ist für seine hohe Festigkeit und Witterungsbeständigkeit bekannt und wird seit Jahrhunderten als Bau- und Werkstein genutzt. Es findet sich unter anderem an zahlreichen historischen Gebäuden in Deutschland.",
"images": ["stand2_1.jpeg"] "images": ["/stand2_1.jpeg"]
}, },
"third": { "third": {
"title": "Dinosaurier-Spuren", "title": "Dinosaurier-Spuren",
"text": "Auf dieser öffentlich zugänglichen Fläche sind fossile Fußspuren von Dinosauriern erhalten geblieben. Die Spuren entstanden vor rund 140 Millionen Jahren in feuchtem Sand und wurden später durch weitere Sedimentschichten konserviert. Sie gehören zu den bekanntesten Fossilienfunden im Obernkirchener Sandstein.", "text": "Auf dieser öffentlich zugänglichen Fläche sind fossile Fußspuren von Dinosauriern erhalten geblieben. Die Spuren entstanden vor rund 140 Millionen Jahren in feuchtem Sand und wurden später durch weitere Sedimentschichten konserviert. Sie gehören zu den bekanntesten Fossilienfunden im Obernkirchener Sandstein.",
"images": ["stand3_1.jpeg", "stand3_2.jpeg"] "images": ["/stand3_1.jpeg", "/stand3_2.jpeg"]
} }
} }
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;
} }