Punktwolken Dateien auf Server, Pfade geändert und Slider eingebunden

main.js

@@ -14,7 +14,8 @@ const map = new maplibregl.Map({
     container: 'map',
     style: "https://tiles.openfreemap.org/styles/bright",
     center: center,
-    zoom: 17
+    zoom: 17,
+    maxZoom: 24,
 });
 
 map.addControl(
@@ -37,14 +38,15 @@ map.on('mousemove', (e) => {
     coordinatesDiv.innerHTML = `Lon: ${lng}° | Lat: ${lat}°`;
 });
 
-
+var pointBudget = document.getElementById("pointSlider").value;
+var pointSize = document.getElementById("pointSizeSlider").value;
 const elRenderArea=document.getElementById("potree_render_area");
 
 const viewer=new Potree.Viewer(elRenderArea, {noDragAndDrop:true});
-viewer.setEDLEnabled(true);
+viewer.setEDLEnabled(false); // sieht realistischer aus
 viewer.setFOV(60);
-viewer.setPointBudget(3*1000*1000);
-viewer.setMinNodeSize(0);
+viewer.setPointBudget(pointBudget);
+viewer.setMinNodeSize(pointSize);
 viewer.setBackground("none"); 
 
 console.log(viewer.orbitControls);
@@ -56,14 +58,17 @@ viewer.fpControls.enabled=false;
 viewer.deviceControls.enabled=false;
 
 
-//Dateipfade der Punktwolken
-const pointCloudFiles={
-  //Namen sind gerade nur Platzhalter. Richtige namen müssen rein
-  first: 'output/metadata.json',
-  second: 'standpunkt2/metadata.json',
-  third: 'punktwolke_3_converted/metadata.json',
-}
+var quality = 'medium';
 
+// Dateipfade der Punktwolke
+// Funktion für aktuelle Pfade
+function getPointCloudFiles() {
+    return {
+      first: `http://ar2350.web-01.fbbgg.hs-woe.de/Punktwolken%20konvertiert%20potree%20Format/sp1_${quality}/metadata.json`,
+      second: `http://ar2350.web-01.fbbgg.hs-woe.de/Punktwolken%20konvertiert%20potree%20Format/sp2_${quality}/metadata.json`,
+      third: `http://ar2350.web-01.fbbgg.hs-woe.de/Punktwolken%20konvertiert%20potree%20Format/sp3_${quality}/metadata.json`,
+    };
+}
 
 //Aktuelle Datei und Sichtbarkeit
 let currentPointCloud=null;
@@ -71,10 +76,24 @@ let isVisible=true;
 
 function loadPointCloud(path){
   console.log("Laden aufgerufen")
-  if(currentPointCloud){
-    viewer.scene.removePointCloud(currentPointCloud);
-    currentPointCloud=null;
-  }
+  console.log("Pfad "+ path);
+    // Vorherige Punktwolke entfernen
+    if (currentPointCloud) {
+      // Aus Potree-Liste entfernen
+      const index = viewer.scene.pointclouds.indexOf(currentPointCloud);
+
+      if (index !== -1) {
+        viewer.scene.pointclouds.splice(index, 1);
+      }
+
+      // Aus Three.js Szene entfernen
+      if (currentPointCloud.parent) {
+        currentPointCloud.parent.remove(currentPointCloud);
+      }
+
+      currentPointCloud = null;
+      viewer.render();
+    }
 
   if(!path ||!isVisible) return;
 
@@ -191,7 +210,6 @@ function changeBaseMap(newMap){
         ],
         tileSize: 256,
         attribution: "© MapTiler",
-        maxzoom: 20
       }
     },
     layers: [
@@ -211,7 +229,6 @@ function changeBaseMap(newMap){
         type: 'raster',
         url: 'https://api.maptiler.com/maps/topo-v4/tiles.json?key=6mG881AthmTTWyLvFyjH',
         tileSize: 256,
-        maxzoom: 20
       },
             // Use a different source for terrain and hillshade layers, to improve render quality
             terrainSource: {
@@ -255,7 +272,6 @@ function changeBaseMap(newMap){
         ],
         tileSize: 256,
         attribution: "© MapTiler",
-        maxzoom: 20
       },
             // Use a different source for terrain and hillshade layers, to improve render quality
             terrainSource: {
@@ -319,8 +335,12 @@ selectElement.addEventListener('change', (event) => {
 
 
 // ausgewähltes Element im Punktwolken DropDown Feld
+
 document.querySelector('select[name="pointcloud"]').addEventListener('change', (event) => {
-  loadPointCloud(pointCloudFiles[event.target.value]);
+  const pointCloudFiles = getPointCloudFiles();
+  var pointcloud = pointCloudFiles[event.target.value];
+  loadPointCloud(pointcloud);
+  console.log(pointCloudFiles[event.target.value]);
 });
 
 
@@ -336,15 +356,18 @@ pointCountOutput.innerHTML = "Dargestellte Punkte: " + Number(pointCountSlider.v
 
 pointCountSlider.oninput = function() {
   pointCountOutput.innerHTML = "Dargestellte Punkte: " + Number(this.value).toLocaleString('de-DE');;
+  pointBudget = document.getElementById("pointSlider").value;
+  viewer.setPointBudget(pointBudget);
 }
 
 
+
 var pointSizeSlider = document.getElementById("pointSizeSlider");
-var pointSizeOutput = document.getElementById("pointSizeSliderValue");
-pointSizeOutput.innerHTML = "Punktgröße (mm): " + Number(pointSizeSlider.value).toLocaleString();
 
 pointSizeSlider.oninput = function() {
-  pointSizeOutput.innerHTML = "Punktgröße (mm): " + Number(this.value).toLocaleString('de-DE');;
+  pointSize = document.getElementById("pointSizeSlider").value;
+  viewer.setMinNodeSize(pointSize);
+  console.log(pointSize);
 }
 
 const closeButton = document.getElementById("closeSideBarButton");
@@ -375,7 +398,15 @@ const qualityButtons = document.querySelectorAll('.qualityButtons');
 qualityButtons.forEach(button => {
 
     button.addEventListener('click', () => {
+        console.log(button.id);
+        quality=button.id;
 
+        if (currentPointCloud) {
+          const pointCloudFiles = getPointCloudFiles();
+          var pointCloudValue = document.getElementById("pointcloud").value
+          var pointcloud = pointCloudFiles[pointCloudValue];
+          loadPointCloud(pointcloud);
+        }
         qualityButtons.forEach(btn => {
             btn.classList.remove('active');
         });