Deckgl version fertiggestellt. Switch zwischen deckgl und Potree möglich. Pointbudget entfernt
This commit is contained in:
@@ -29,9 +29,17 @@ map.addControl(new maplibregl.NavigationControl({
|
||||
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';
|
||||
|
||||
//-------------------------LOGIK DECK.GL - aktuell beim Laden der Karte - hier rausnehmen------------------------------------------------------
|
||||
let lidarControl;
|
||||
|
||||
// WICHTIG: Layer/Controls immer erst im 'load'-Event der Karte hinzufügen
|
||||
map.on('load', () => {
|
||||
lidarControl = new LidarControl({
|
||||
@@ -42,30 +50,51 @@ map.on('load', () => {
|
||||
pickable: false
|
||||
});
|
||||
|
||||
//map.addControl(lidarControl, 'top-right');
|
||||
lidarControl.onAdd(map);
|
||||
map.addControl(lidarControl, 'top-right');
|
||||
//lidarControl.onAdd(map);
|
||||
|
||||
// COPC-Datei laden
|
||||
lidarControl.loadPointCloudStreaming('http://ar2350.web-01.fbbgg.hs-woe.de/copc%20Daten/sp3_low.copc.laz')
|
||||
const selectBox=document.querySelector('select[name="pointcloud"]');
|
||||
if (selectBox && selectBox.value){
|
||||
currentPointcloudKey=selectBox.value;
|
||||
loadCurrentPointCloud();
|
||||
}
|
||||
loadInfoJSON();
|
||||
//lidarControl.loadPointCloudStreaming('http://ar2350.web-01.fbbgg.hs-woe.de/copc%20Daten/sp3_low.copc.laz')
|
||||
});
|
||||
|
||||
|
||||
//---------------Potree Eigenschaften--------------------------
|
||||
var pointBudget = document.getElementById("pointSlider").value; // wahrscheinlich noch rausschmeißen
|
||||
var pointSize = document.getElementById("pointSizeSlider").value;
|
||||
const elRenderArea = document.getElementById("potree_render_area");
|
||||
const viewer = new Potree.Viewer(elRenderArea, {noDragAndDrop: true});
|
||||
viewer.setEDLEnabled(false);
|
||||
viewer.setFOV(60);
|
||||
viewer.setPointBudget(pointBudget);
|
||||
viewer.setMinNodeSize(pointSize);
|
||||
viewer.setBackground("none");
|
||||
viewer.orbitControls.enabled = false;
|
||||
viewer.fpControls.enabled = false;
|
||||
viewer.deviceControls.enabled = false;
|
||||
|
||||
// Standardwert der Punktwolkenqualität
|
||||
var quality = 'medium';
|
||||
elRenderArea.style.display='none';
|
||||
|
||||
function resetLidarControl() {
|
||||
if (!lidarControl) return;
|
||||
try {
|
||||
map.removeControl(lidarControl);
|
||||
} catch(e) {}
|
||||
lidarControl = null;
|
||||
|
||||
lidarControl = new LidarControl({
|
||||
title: 'Mein LiDAR-Viewer',
|
||||
collapsed: false,
|
||||
pointSize: currentPointSize > 0 ? currentPointSize : 2,
|
||||
colorScheme: currentColorMode === 'rgb' ? 'rgb' : 'elevation',
|
||||
pickable: false
|
||||
});
|
||||
map.addControl(lidarControl, 'top-right');
|
||||
}
|
||||
|
||||
|
||||
// Punktwolkendaten im Potree-Format
|
||||
function getPointCloudFilesPOTREE() {
|
||||
@@ -80,14 +109,85 @@ function getPointCloudFilesPOTREE() {
|
||||
function getPointCloudFilesCOPC() {
|
||||
return {
|
||||
first: `http://ar2350.web-01.fbbgg.hs-woe.de/copc%20Daten/sp1_${quality}.copc.laz`,
|
||||
second: `http://ar2350.web-01.fbbgg.hs-woe.de/copc%20Daten/sp1_${quality}.copc.laz`,
|
||||
third: `http://ar2350.web-01.fbbgg.hs-woe.de/copc%20Daten/sp1_${quality}.copc.laz`,
|
||||
second: `http://ar2350.web-01.fbbgg.hs-woe.de/copc%20Daten/sp2_${quality}.copc.laz`,
|
||||
third: `http://ar2350.web-01.fbbgg.hs-woe.de/copc%20Daten/sp3_${quality}.copc.laz`,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
function loadCurrentPointCloud() {
|
||||
if (!currentPointcloudKey) return;
|
||||
if (currentRenderer === 'deckgl') {
|
||||
loadDeckGL(getPointCloudFilesCOPC()[currentPointcloudKey]);
|
||||
} else {
|
||||
loadPointCloud(getPointCloudFilesPOTREE()[currentPointcloudKey]);
|
||||
}
|
||||
}
|
||||
|
||||
function loadDeckGL(path) {
|
||||
if (!lidarControl || !path) return;
|
||||
resetLidarControl();
|
||||
lidarControl.loadPointCloudStreaming(path);
|
||||
setTimeout(() => applyDeckGLSettings(), 500);
|
||||
}
|
||||
|
||||
function applyDeckGLSettings() {
|
||||
if (!lidarControl) return;
|
||||
try {
|
||||
lidarControl.setPointSize(currentPointSize > 0 ? currentPointSize : 2);
|
||||
lidarControl.setColorScheme(currentColorMode === 'rgb' ? 'rgb' : 'elevation');
|
||||
} catch(e) { console.warn("LidarControl API:", e); }
|
||||
}
|
||||
|
||||
function switchRenderer(renderer) {
|
||||
currentRenderer = renderer;
|
||||
if (renderer === 'deckgl') {
|
||||
elRenderArea.style.display = 'none';
|
||||
if (currentPointCloud) currentPointCloud.visible = false;
|
||||
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';
|
||||
if (currentPointcloudKey) loadPointCloud(getPointCloudFilesPOTREE()[currentPointcloudKey]);
|
||||
document.getElementById('rendererToggle').dataset.active = 'potree';
|
||||
document.getElementById('rendererLabel').textContent = 'Renderer: Potree';
|
||||
}
|
||||
applyVisibility();
|
||||
}
|
||||
|
||||
function applyVisibility() {
|
||||
if (currentRenderer === 'potree' && currentPointCloud) {
|
||||
currentPointCloud.visible = isVisible;
|
||||
}
|
||||
if (currentRenderer === 'deckgl' && lidarControl) {
|
||||
try { lidarControl.setVisible(isVisible); } catch(e) { console.warn("setVisible:", e); }
|
||||
}
|
||||
}
|
||||
|
||||
function applyColorModePotree() {
|
||||
if (!currentPointCloud) return;
|
||||
let mat = currentPointCloud.material;
|
||||
mat.activeAttributeName = currentColorMode === 'rgb' ? "rgba" : "elevation";
|
||||
viewer.renderer.resetState();
|
||||
viewer.render();
|
||||
map.triggerRepaint();
|
||||
}
|
||||
|
||||
function applyColorMode() {
|
||||
if (currentRenderer === 'potree') { applyColorModePotree(); }
|
||||
else { applyDeckGLSettings(); }
|
||||
}
|
||||
|
||||
function loadInfoJSON() {
|
||||
fetch("info.json")
|
||||
.then(r => r.json())
|
||||
.then(data => { pointCloudInfo = data; })
|
||||
.catch(e => console.error("Fehler beim Laden der JSON:", e));
|
||||
}
|
||||
// aktuell dargestellte Punktwolke
|
||||
let currentPointCloud = null;
|
||||
let isVisible = true;
|
||||
|
||||
|
||||
|
||||
//------------------------lädt Punktwolke im Potree Format @hauke: entweder hier copc einbauen mit if else oder eigene Funktion dafür machen-----------------------------
|
||||
@@ -138,7 +238,7 @@ let isSyncing = false;
|
||||
*/
|
||||
function syncCamera() {
|
||||
|
||||
if (!currentPointCloud || isSyncing) return;
|
||||
if (!currentPointCloud || isSyncing || currentRenderer!== 'potree') return;
|
||||
isSyncing = true;
|
||||
|
||||
const transform = map.transform;
|
||||
@@ -341,8 +441,9 @@ function changeBaseMap(newMap) {
|
||||
document.querySelector('#disable').addEventListener('click', function() {
|
||||
isVisible = !isVisible;
|
||||
|
||||
if (currentPointCloud)
|
||||
currentPointCloud.visible = isVisible;
|
||||
//if (currentPointCloud)
|
||||
// currentPointCloud.visible = isVisible;
|
||||
applyVisibility();
|
||||
|
||||
if(isVisible) {
|
||||
this.textContent = "Punktwolke ausblenden";
|
||||
@@ -369,24 +470,23 @@ document.querySelector('select[name="basemap"]').addEventListener('change', (e)
|
||||
|
||||
// Punktwolke austauschen, wenn anderes Element im DropDown gewählt wird
|
||||
document.querySelector('select[name="pointcloud"]').addEventListener('change', (e) => {
|
||||
loadPointCloud(getPointCloudFilesPOTREE()[e.target.value]);
|
||||
//loadPointCloud(getPointCloudFilesPOTREE()[e.target.value]);
|
||||
currentPointcloudKey = e.target.value;
|
||||
loadCurrentPointCloud();
|
||||
});
|
||||
|
||||
|
||||
// Kartenausschnitt auf Ursprung zurücksetzen
|
||||
document.getElementById("location").addEventListener("click", () => map.flyTo({center, zoom: 17}));
|
||||
|
||||
|
||||
var pointCountSlider = document.getElementById("pointSlider");
|
||||
var pointCountOutput = document.getElementById("pointSliderValue");
|
||||
pointCountOutput.innerHTML = "Dargestellte Punkte: " + Number(pointCountSlider.value).toLocaleString();
|
||||
pointCountSlider.oninput = function() {
|
||||
pointCountOutput.innerHTML = "Dargestellte Punkte: " + Number(this.value).toLocaleString('de-DE');
|
||||
viewer.setPointBudget(this.value);
|
||||
};
|
||||
|
||||
document.getElementById("pointSizeSlider").oninput = function() {
|
||||
viewer.setMinNodeSize(this.value);
|
||||
//viewer.setMinNodeSize(this.value);
|
||||
currentPointSize = Number(this.value);
|
||||
if (currentRenderer === 'potree') {
|
||||
viewer.setMinNodeSize(currentPointSize);
|
||||
} else if (lidarControl) {
|
||||
try { lidarControl.setPointSize(currentPointSize); } catch(e) {}
|
||||
}
|
||||
};
|
||||
|
||||
const closeButton = document.getElementById("closeSideBarButton");
|
||||
@@ -409,7 +509,8 @@ if (closeButton) {
|
||||
document.querySelectorAll('.qualityButtons').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
quality = btn.id;
|
||||
if (currentPointCloud) loadPointCloud(getPointCloudFiles()[document.getElementById("pointcloud").value]);
|
||||
//if (currentPointCloud) loadPointCloud(getPointCloudFiles()[document.getElementById("pointcloud").value]);
|
||||
if (currentPointcloudKey) loadCurrentPointCloud();
|
||||
document.querySelectorAll('.qualityButtons').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
});
|
||||
@@ -418,32 +519,12 @@ document.querySelectorAll('.qualityButtons').forEach(btn => {
|
||||
|
||||
document.querySelectorAll('.colorButtons').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
if (!currentPointCloud) return; // Abbrechen, falls noch keine Wolke geladen ist
|
||||
|
||||
//if (!currentPointCloud) return; // Abbrechen, falls noch keine Wolke geladen ist
|
||||
|
||||
document.querySelectorAll('.colorButtons').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
let value = btn.id;
|
||||
console.log("WERT: " + value);
|
||||
|
||||
// Greife immer das aktuelle Material ab
|
||||
let currentMaterial = currentPointCloud.material;
|
||||
|
||||
if (value === "rgb") {
|
||||
// "rgba" stellt die echten RGB-Farben der Punkte dar
|
||||
currentMaterial.activeAttributeName = "rgba";
|
||||
} else if (value === "height") {
|
||||
// "elevation" wechselt auf die Einfärbung nach Höhe (Z-Wert)
|
||||
currentMaterial.activeAttributeName = "elevation";
|
||||
}
|
||||
|
||||
// POTREE RE-RENDER TRICK:
|
||||
// Potree muss wissen, dass sich das Material verändert hat, damit die Shader neu geladen werden.
|
||||
viewer.renderer.resetState();
|
||||
viewer.render();
|
||||
|
||||
// MapLibre ebenfalls Bescheid geben, dass sich die Overlays geändert haben
|
||||
map.triggerRepaint();
|
||||
currentColorMode = btn.id;
|
||||
applyColorMode();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -456,25 +537,17 @@ 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', () => {
|
||||
/*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";
|
||||
//const pointCloudInfoFile = "info.json";
|
||||
let pointCloudInfo = {};
|
||||
|
||||
// die JSON-Datei laden
|
||||
fetch(pointCloudInfoFile)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
pointCloudInfo = data;
|
||||
})
|
||||
.catch(error => console.error("Fehler beim Laden der JSON:", error));
|
||||
|
||||
|
||||
const infoPanel = document.getElementById("info-panel");
|
||||
const infoPanelTitle = document.getElementById("info-panel-title");
|
||||
@@ -549,5 +622,8 @@ closeInfoPanel.addEventListener("click", () => {
|
||||
document.querySelector('select[name="pointcloud"]').addEventListener("change", () => {
|
||||
updateInfoPanel();
|
||||
});
|
||||
document.getElementById('rendererToggle').addEventListener('click', function() {
|
||||
const next = currentRenderer === 'deckgl' ? 'potree' : 'deckgl';
|
||||
switchRenderer(next);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user