Projekt-Visualisierung/main.js

import maplibregl from "maplibre-gl";
import proj4 from "proj4";
import * as THREE from "three";
console.log(THREE);
proj4.defs(
  "EPSG:25832",
  "+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs"
);


const center = [9.209116842757239, 52.26520546238239]

const map = new maplibregl.Map({
    container: 'map',
    style: "https://tiles.openfreemap.org/styles/bright",
    center: center,
    zoom: 17
});

map.addControl(
    new maplibregl.NavigationControl({
        visualizePitch: true,
        showZoom: true,
        showCompass: true
    })
);


const elRenderArea=document.getElementById("potree_render_area");

const viewer=new Potree.Viewer(elRenderArea, {noDragAndDrop:true});
viewer.setEDLEnabled(true);
viewer.setFOV(60);
viewer.setPointBudget(3*1000*1000);
viewer.setMinNodeSize(0);
viewer.setBackground("none"); 


//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',
}


//Aktuelle Datei und Sichtbarkeit
let currentPointCloud=null;
let isVisible=true;

function loadPointCloud(path){
  console.log("Laden aufgerufen")
  if(currentPointCloud){
    viewer.scene.removePointCloud(currentPointCloud);
    currentPointCloud=null;
  }

  if(!path ||!isVisible) return;

  Potree.loadPointCloud(path, "punktwolke", function(e) {
    currentPointCloud=e.pointcloud;
    viewer.scene.addPointCloud(currentPointCloud);

   // View-Objekt inspizieren
    console.log("view:", viewer.scene.view);
    console.log("view.lookAt:", viewer.scene.view.lookAt);
    console.log("view.position:", viewer.scene.view.position);
    console.log("view keys:", Object.keys(viewer.scene.view));
    

    let material =currentPointCloud.material;
    material.size =1;
    material.pointSizeType=Potree.PointSizeType.ADAPTIVE;
    
    viewer.fitToScreen();
    syncCamera();
  });
}


function syncCamera() {

    if (!currentPointCloud) return;

    const center = map.getCenter();

    // -----------------------------------------
    // WGS84 -> ETRS89 / UTM32
    // -----------------------------------------

    const [x, y] = proj4(
        "EPSG:4326",
        "EPSG:25832",
        [center.lng, center.lat]
    );

    // -----------------------------------------
    // Map Parameter
    // -----------------------------------------

    const pitch = map.getPitch() * Math.PI / 180;
    const bearing = map.getBearing() * Math.PI / 180;
    const zoom = map.getZoom();

    // -----------------------------------------
    // Abstand abhängig vom Zoom
    // -----------------------------------------

    const earthCircumference = 40075016.686;

    const metersPerPixel =
        earthCircumference *
        Math.cos(center.lat * Math.PI / 180) /
        Math.pow(2, zoom + 8);

    const distance =
        metersPerPixel * map.getCanvas().height;

    // -----------------------------------------
    // Zielpunkt = Kartenzentrum
    // -----------------------------------------

    const target = new THREE.Vector3(
        x,
        y,
        0
    );

    // -----------------------------------------
    // Kameraoffset
    // -----------------------------------------

    const offset = new THREE.Vector3(
        0,
        -distance * Math.cos(pitch),
        distance * Math.sin(pitch)
    );

    // Bearing rotieren
    offset.applyAxisAngle(
        new THREE.Vector3(0, 0, 1),
        -bearing
    );

    // -----------------------------------------
    // Kameraposition
    // -----------------------------------------

    const cameraPosition =
        target.clone().add(offset);

    // -----------------------------------------
    // Potree Kamera setzen
    // -----------------------------------------

    const camera =
        viewer.scene.getActiveCamera();

    camera.position.copy(cameraPosition);

    camera.lookAt(target);

    viewer.scene.view.position.copy(cameraPosition);

    viewer.scene.view.lookAt(target);

    camera.updateMatrixWorld();

    viewer.renderer.render(
        viewer.scene.scene,
        camera
    );
}

  map.on('move', ()=>{
    console.log(viewer.scene.view)
    syncCamera();
  });
  map.on('zoom', syncCamera);
  map.on('pitch', syncCamera);
  map.on('rotate', syncCamera);




// Hintergrundkarte ändern
function changeBaseMap(newMap){
  var basemapStyle;
  switch(newMap){
    case "openfree_dark":
      basemapStyle = "https://tiles.openfreemap.org/styles/dark"
      break;
    case "openfree_bright":
      basemapStyle = "https://tiles.openfreemap.org/styles/bright"
      break;
    case "openfree_liberty":
      basemapStyle = "https://tiles.openfreemap.org/styles/liberty"
      break;
    case "google_satellite":
      basemapStyle = {
    version: 8,
    sources: {
      "raster-tiles": {
        type: "raster",
        tiles: [
          "https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
          "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
          "https://mt2.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
          "https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
        ],
        tileSize: 256,
      },
    },
    layers: [{ id: "raster-layer", type: "raster", source: "raster-tiles" }],
  }
    break;
  case "terrain":
    basemapStyle = {
        version: 8,
        sources: {
            osm: {
                type: 'raster',
                tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
                tileSize: 256,
                attribution: '© OpenStreetMap Contributors',
                maxzoom: 19
            },
            // Use a different source for terrain and hillshade layers, to improve render quality
            terrainSource: {
                type: 'raster-dem',
                url: 'https://tiles.mapterhorn.com/tilejson.json',
            },
            hillshadeSource: {
                type: 'raster-dem',
                url: 'https://tiles.mapterhorn.com/tilejson.json'
            }
        },
        layers: [
            {
                id: 'osm',
                type: 'raster',
                source: 'osm'
            },
            {
                id: 'hills',
                type: 'hillshade',
                source: 'hillshadeSource',
                layout: {visibility: 'visible'},
                paint: {'hillshade-shadow-color': '#473B24'}
            }
        ],
        terrain: {
            source: 'terrainSource',
            exaggeration: 1
        },
        sky: {}
    }
    break;
    case "satellite_terrain": 
      basemapStyle =  {
        version: 8,
        sources: {
            osm: {
                type: 'raster',
                 tiles: [
                  "https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
                  "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
                  "https://mt2.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
                  "https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
        ],
                tileSize: 256,
                attribution: '© OpenStreetMap Contributors',
                maxzoom: 19
            },
            // Use a different source for terrain and hillshade layers, to improve render quality
            terrainSource: {
                type: 'raster-dem',
                url: 'https://tiles.mapterhorn.com/tilejson.json',
            },
            hillshadeSource: {
                type: 'raster-dem',
                url: 'https://tiles.mapterhorn.com/tilejson.json'
            }
        },
        layers: [
            {
                id: 'osm',
                type: 'raster',
                source: 'osm'
            },
            {
                id: 'hills',
                type: 'hillshade',
                source: 'hillshadeSource',
                layout: {visibility: 'visible'},
                paint: {'hillshade-shadow-color': '#473B24'}
            }
        ],
        terrain: {
            source: 'terrainSource',
            exaggeration: 1
        },
        sky: {}
    }
	
  }
  map.setStyle(basemapStyle);
}


document.querySelector('input[type="checkbox"]').addEventListener('change', (event)=>
{
  isVisible=!event.target.checked;
  if (currentPointCloud){
    currentPointCloud.visible=isVisible;
  };
})


// ausgewähltes Element im BaseMap DropDown Feld
const selectElement = document.querySelector('select[name="basemap"]');
selectElement.addEventListener('change', (event) => {
  changeBaseMap(event.target.value);
});



// ausgewähltes Element im Punktwolken DropDown Feld
document.querySelector('select[name="pointcloud"]').addEventListener('change', (event) => {
  loadPointCloud(pointCloudFiles[event.target.value]);
});


// Auf Zentrum zurück zoomen
document.getElementById("location").addEventListener("click", () => {
 map.flyTo({center, zoom: 17 })
});