From 2eac970e7f6b435abf107cfd370b2c339843127b Mon Sep 17 00:00:00 2001
From: ha2622 <hauke.kahrs@student.jade-hs.de>
Date: Mon, 11 May 2026 16:28:15 +0000
Subject: [PATCH] main.js aktualisiert

Renderer in Map Libre Code und Kameras synchronisiert
---
 main.js | 46 ++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 38 insertions(+), 8 deletions(-)

diff --git a/main.js b/main.js
index 8885c3c..2131338 100644
--- a/main.js
+++ b/main.js
@@ -23,8 +23,26 @@ map.addControl(
     })
 );
 
-const layer = new PointCloudLayer({
-  data: 'punktwolke subsample test.laz',
+//Dateipfade der Punktwolken
+const pointCloudFiles={
+  first: 'punktwolke_1.laz',
+  second: 'punktwolke_2.laz',
+  third: 'punktwolke_3.laz'
+}
+//Aktuelle Datei und Sichtbarkeit
+let currentData=null;
+let isVisible=true;
+
+const overlay= new MapboxOverlay({layers: []});
+
+function updateLayer(){
+  if (!currentData || !isVisible){
+    overlay.setProps({layers:[]});
+    return;
+  }
+  const layer = new PointCloudLayer({
+  id: 'pointcloud-layer',
+  data: currentData,
   loaders: [LASLoader],
 
     // 1. Set the coordinate system to meter offsets
@@ -36,12 +54,17 @@ const layer = new PointCloudLayer({
   getColor: [255,255,255]
 });
 
+overlay.setProps({layers: [layer]});
+}
 
-const overlay = new MapboxOverlay({
-  layers: [layer]
-});
 
-//map.addControl(overlay);
+
+map.on('style.load', ()=>{
+  if (!map._controls.includes(overlay)) {
+    map.addControl(overlay);
+  }
+  updateLayer();
+})
 
 
 // Hintergrundkarte ändern
@@ -170,10 +193,17 @@ function changeBaseMap(newMap){
 
 
 // dargestellte Punktwolke verändern
-function changePointCloud(data){
-  layer.data = data;
+function changePointCloud(value){
+  currentData = pointCloudFiles[value];
+  updateLayer();
 }
 
+document.querySelector('input[type="checkbox"]').addEventListener('change', (event)=>
+{
+  isVisible=!event.target.checked;
+  updateLayer();
+})
+
 
 // ausgewähltes Element im BaseMap DropDown Feld
 const selectElement = document.querySelector('select[name="basemap"]');