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

bugs gefixt

Browse Source
This commit is contained in:
ar2350
2026-06-16 17:27:50 +02:00
parent 2951e18d3f
commit 792d515b2d
3 changed files with 36 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
-5
View File
@@ -27,7 +27,6 @@
<h1 id="title">- Obernkirchener Sandstein -</h1>
<div id="coordinates" title="Koordinaten an Mausposition"></div>
<div id="openButtonOuter">
</div>
<div id="sideBarOuter">
<aside id="sidebar">
@@ -96,7 +95,6 @@
<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>
@@ -111,10 +109,8 @@
</div>
</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>
<script src="./libs/tween/tween.min.js"></script>
@@ -122,7 +118,6 @@
<script src="./libs/proj4/proj4.js"></script>
<script src="./libs/potree/potree.js"></script>
<script src="./libs/plasio/js/laslaz.js"></script>
<script type="module" src="/main.js"></script>
</body>
</html>
main.js
+23 -38
View File
@@ -1,9 +1,7 @@
import maplibregl from "maplibre-gl";
import proj4 from "proj4";
import * as THREE from "three";
// !!! NPM import
import { LidarControl } from "maplibre-gl-lidar";
// CSS Styles importieren!
import "maplibre-gl/dist/maplibre-gl.css";
import "maplibre-gl-lidar/style.css";
@@ -38,7 +36,6 @@ let currentPointcloudKey = null;
let lidarControl=null;
var quality = 'medium';
//-------------------------LOGIK DECK.GL - aktuell beim Laden der Karte - hier rausnehmen------------------------------------------------------
// WICHTIG: Layer/Controls immer erst im 'load'-Event der Karte hinzufügen
map.on('load', () => {
@@ -71,7 +68,6 @@ viewer.setBackground("none");
viewer.orbitControls.enabled = false;
viewer.fpControls.enabled = false;
viewer.deviceControls.enabled = false;
elRenderArea.style.display='none';
function resetLidarControl() {
@@ -132,6 +128,7 @@ function applyDeckGLSettings() {
try {
lidarControl.setPointSize(currentPointSize > 0 ? currentPointSize : 2);
lidarControl.setColorScheme(currentColorMode === 'rgb' ? 'rgb' : 'elevation');
lidarControl.setColormap('jet');
} catch(e) { console.warn("LidarControl API:", e); }
}
@@ -194,11 +191,10 @@ function loadInfoJSON() {
.then(data => { pointCloudInfo = data; })
.catch(e => console.error("Fehler beim Laden der JSON:", e));
}
// aktuell dargestellte Punktwolke
//------------------------lädt Punktwolke im Potree Format @hauke: entweder hier copc einbauen mit if else oder eigene Funktion dafür machen-----------------------------
//------------------------lädt Punktwolke im Potree Format-----------------------------
function loadPointCloud(path) {
viewer.scene.view.yaw = 0;
viewer.scene.view.pitch = 0;
@@ -224,20 +220,25 @@ function loadPointCloud(path) {
// 1. Three.js zwingen, die Wolke sofort in der 3D-Welt zu platzieren
currentPointCloud.updateMatrixWorld(true);
// 2. POTREE WECKRUF: Zwinge den Viewer, sich intern zu dimensionieren.
// Das löst das Problem, dass Potree beim allerersten Aufruf die Kamera ignoriert.
// 2. POTREE WECKRUF
viewer.update(viewer.clock.getDelta(), Number.MAX_VALUE);
// --- HIER IST DIE KORREKTUR ---
// Erzwinge den aktuell ausgewählten Farbmodus (z.B. elevation)
// auf das frisch generierte Material der neuen Punktwolke!
applyColorMode();
// 3. Jetzt die Kamera berechnen und setzen
syncCamera();
// 4. Ein zweites Mal synchronisieren, falls MapLibre im selben Frame das Canvas resized hat
// 4. Ein zweites Mal synchronisieren
requestAnimationFrame(() => {
syncCamera();
});
});
}
// Variable, um Endlosschleifen zu verhindern
let isSyncing = false;
@@ -289,22 +290,14 @@ function syncCamera() {
isSyncing = false;
}
// ==========================================
// DER REVOLUTIONÄRE SYNCHRONISATIONS-LOOP
// ==========================================
// Wir klinken uns direkt in den Browser-Zeichenzyklus von MapLibre ein.
// Jedes Mal, wenn MapLibre ein Frame anfordert, aktualisieren wir Potree DIREKT davor/dabei.
const originalRequestAnimationFrame = window.requestAnimationFrame;
const hookRenderLoop = () => {
// Erzwinge die Kamerasynchronisation bei jedem Karten-Update
syncCamera();
};
// Verwende MapLibres internes Repaint-System, um absolut latenzfrei zu synchronisieren
// Verwendet MapLibres internes Repaint-System, um absolut latenzfrei zu synchronisieren
map.on('movestart', () => {
// Während der Interaktion zwingen wir MapLibre zu einem Dauer-Repaint,
// damit der Render-Loop durchgehend feuert
map.getCanvasContainer().style.cursor = 'grabbing';
});
@@ -313,14 +306,7 @@ map.on('zoom', syncCamera);
map.on('move', syncCamera);
map.on('rotate', syncCamera);
map.on('pitch', syncCamera);
// Zusätzliche Absicherung für CSS/DOM-Verzögerungen:
// Das 'draw'-Event feuert tiefer im Inneren von MapLibre als 'render'
map.on('draw', syncCamera);
// CSS-Fix für das Potree-Container-Element (wichtig gegen Mikroruckler)
// Stelle sicher, dass dein #potree_render_area im CSS folgende Attribute hat:
// pointer-events: none; (damit MapLibre die Maus-Events direkt und ohne Millisekunden-Verzögerung bekommt!)
elRenderArea.style.pointerEvents = "none";
map.getCanvas().style.pointerEvents = "auto";
@@ -487,6 +473,7 @@ document.querySelector('select[name="pointcloud"]').addEventListener('change', (
// Kartenausschnitt auf Ursprung zurücksetzen
document.getElementById("location").addEventListener("click", () => map.flyTo({center, zoom: 17}));
document.getElementById("pointSizeSlider").oninput = function() {
//viewer.setMinNodeSize(this.value);
currentPointSize = Number(this.value);
@@ -497,6 +484,7 @@ if (currentRenderer === 'potree') {
}
};
const closeButton = document.getElementById("closeSideBarButton");
const sidebar = document.getElementById("sidebar");
const openOuter = document.getElementById("openButtonOuter");
@@ -514,6 +502,7 @@ if (closeButton) {
});
}
document.querySelectorAll('.qualityButtons').forEach(btn => {
btn.addEventListener('click', () => {
quality = btn.id;
@@ -543,20 +532,7 @@ map.once('idle', () => {
});
// Falls du beim Start direkt eine Standard-Punktwolke lädst,
// stelle sicher, dass das Dropdown nach dem ersten stabilen Frame getriggert wird:
/*map.once('load', () => {
const selectBox = document.querySelector('select[name="pointcloud"]');
if (selectBox && selectBox.value) {
loadPointCloud(getPointCloudFiles()[selectBox.value]);
}*/
// Informationen über die Punktwolken zentral in einer JSON-Datei
//const pointCloudInfoFile = "info.json";
let pointCloudInfo = {};
const infoPanel = document.getElementById("info-panel");
const infoPanelTitle = document.getElementById("info-panel-title");
const infoPanelText = document.getElementById("info-panel-text");
@@ -565,6 +541,7 @@ const closeInfoPanel = document.getElementById("closeInfoPanel");
let currentImageIndex = 0;
function updateInfoPanel() {
const key = document.querySelector('select[name="pointcloud"]').value;
@@ -584,6 +561,7 @@ function updateInfoPanel() {
}
}
function updateImage(info) {
const img = document.getElementById("info-panel-image");
const nav = document.getElementById("info-image-nav");
@@ -600,6 +578,7 @@ function updateImage(info) {
}
}
document.getElementById("info-img-prev").addEventListener("click", () => {
const key = document.querySelector('select[name="pointcloud"]').value;
const info = pointCloudInfo[key];
@@ -608,6 +587,7 @@ document.getElementById("info-img-prev").addEventListener("click", () => {
updateImage(info);
});
document.getElementById("info-img-next").addEventListener("click", () => {
const key = document.querySelector('select[name="pointcloud"]').value;
const info = pointCloudInfo[key];
@@ -616,20 +596,25 @@ document.getElementById("info-img-next").addEventListener("click", () => {
updateImage(info);
});
openInfoPanel.addEventListener("click", () => {
infoPanel.classList.add("open");
//openInfoPanel.style.display = "none";
});
closeInfoPanel.addEventListener("click", () => {
infoPanel.classList.remove("open");
openInfoPanel.style.display = "flex";
});
// 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';
switchRenderer(next);
style.css
+10 -11
View File
@@ -3,8 +3,6 @@ html, body {
margin: 0;
}
body{
margin:0;
overflow:hidden;
@@ -201,7 +199,6 @@ select{
margin-bottom: 10px;
}
#disable.active-state {
background:
linear-gradient(
@@ -229,13 +226,11 @@ select:focus{
box-shadow:0 0 0 4px rgba(37,99,235,0.15), 0 8px 24px rgba(0,0,0,0.12);
}
#disable:hover{
transform:translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
*{
transition:
background 0.2s,
@@ -427,12 +422,20 @@ position: absolute;
}
#rendererToggle[data-active="deckgl"] {
background: linear-gradient(135deg, rgba(18,77,216,0.92) 10%, rgba(13,61,175,0.92) 60%, rgba(6,45,135,0.92) 100%);
background: linear-gradient(
135deg,
rgba(18,77,216,0.92) 10%,
rgba(13,61,175,0.92) 60%,
rgba(6,45,135,0.92) 100%);
color: #ffffff;
}
#rendererToggle[data-active="potree"] {
background: linear-gradient(135deg, rgba(22,163,74,0.92) 10%, rgba(15,118,54,0.92) 60%, rgba(6,78,32,0.92) 100%);
background: linear-gradient(
135deg,
rgba(22,163,74,0.92) 10%,
rgba(15,118,54,0.92) 60%,
rgba(6,78,32,0.92) 100%);
color: #ffffff;
}
@@ -552,14 +555,10 @@ position: absolute;
color: #555;
}
/* Blendet das Icon selbst aus */
.lidar-control-icon {
display: none !important;
}
/* Findet den MapLibre-Button, der das Lidar-Icon beinhaltet,
und versteckt den kompletten Button (inklusive Rahmen und Hintergrund) */
.maplibregl-ctrl:has(.lidar-control-icon),
.maplibregl-ctrl-group:has(.lidar-control-icon),
button:has(.lidar-control-icon) {