Projekt-Visualisierung/main.js

import maplibregl from "maplibre-gl";
import {Deck} from '@deck.gl/core';
import {PointCloudLayer} from '@deck.gl/layers';
import {LASLoader} from '@loaders.gl/las';
import {MapboxOverlay} from '@deck.gl/mapbox';
import {COORDINATE_SYSTEM} from '@deck.gl/core';


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
    })
);

//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
  coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
  
  // 2. Set the anchor point [longitude, latitude, elevation]
  coordinateOrigin: [9.209116842757239, 52.26520546238239], 
  pointSize: 1,
  getColor: [255,255,255]
});

overlay.setProps({layers: [layer]});
}



map.on('style.load', ()=>{
  if (!map._controls.includes(overlay)) {
    map.addControl(overlay);
  }
  updateLayer();
})


// 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);
}


// dargestellte Punktwolke verändern
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"]');
selectElement.addEventListener('change', (event) => {
  changeBaseMap(event.target.value);
});



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


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