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