deck.gl Lösung
This commit is contained in:
@@ -1,11 +1,19 @@
|
||||
import maplibregl from "maplibre-gl";
|
||||
import proj4 from "proj4";
|
||||
import * as THREE from "three";
|
||||
// !!! NPM import
|
||||
import { LidarControl } from "maplibre-gl-lidar";
|
||||
// CSS Styles importieren!
|
||||
import "maplibre-gl/dist/maplibre-gl.css";
|
||||
import "maplibre-gl-lidar/style.css";
|
||||
|
||||
proj4.defs("EPSG:25832", "+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs");
|
||||
|
||||
const center = [9.209116842757239, 52.26520546238239]
|
||||
|
||||
// Koordinaten des Obernkirchener Sandstein
|
||||
const center = [9.209116842757239, 52.26520546238239];
|
||||
|
||||
// die Grundkarte
|
||||
const map = new maplibregl.Map({
|
||||
container: 'map',
|
||||
style: "https://tiles.openfreemap.org/styles/bright",
|
||||
@@ -14,35 +22,53 @@ const map = new maplibregl.Map({
|
||||
maxZoom: 24,
|
||||
});
|
||||
|
||||
// Karten-Bedienelemente
|
||||
map.addControl(new maplibregl.NavigationControl({
|
||||
visualizePitch: true,
|
||||
showZoom: true,
|
||||
showCompass: true
|
||||
}));
|
||||
|
||||
const coordinatesDiv = document.getElementById('coordinates');
|
||||
map.on('mousemove', (e) => {
|
||||
coordinatesDiv.innerHTML = `Lon: ${e.lngLat.lng.toFixed(5)}° | Lat: ${e.lngLat.lat.toFixed(5)}°`;
|
||||
|
||||
//-------------------------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({
|
||||
title: 'Mein LiDAR-Viewer',
|
||||
collapsed: false,
|
||||
pointSize: 2,
|
||||
colorScheme: 'rgb', // 'elevation' oder 'rgb'
|
||||
pickable: false
|
||||
});
|
||||
|
||||
//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')
|
||||
});
|
||||
|
||||
var pointBudget = document.getElementById("pointSlider").value;
|
||||
|
||||
//---------------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';
|
||||
|
||||
function getPointCloudFiles() {
|
||||
// Punktwolkendaten im Potree-Format
|
||||
function getPointCloudFilesPOTREE() {
|
||||
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`,
|
||||
@@ -50,12 +76,24 @@ function getPointCloudFiles() {
|
||||
};
|
||||
}
|
||||
|
||||
// Punktwolkendaten im COPC (Cloud Optimised Point Cloud)-Format für deck.gl
|
||||
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`,
|
||||
};
|
||||
}
|
||||
|
||||
// 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-----------------------------
|
||||
function loadPointCloud(path) {
|
||||
viewer.scene.view.yaw = 0;
|
||||
viewer.scene.view.pitch = 0;
|
||||
viewer.scene.view.pitch = 0;
|
||||
|
||||
if (currentPointCloud) {
|
||||
const index = viewer.scene.pointclouds.indexOf(currentPointCloud);
|
||||
@@ -75,7 +113,6 @@ viewer.scene.view.pitch = 0;
|
||||
material.size = 1;
|
||||
material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
|
||||
|
||||
|
||||
// 1. Three.js zwingen, die Wolke sofort in der 3D-Welt zu platzieren
|
||||
currentPointCloud.updateMatrixWorld(true);
|
||||
|
||||
@@ -96,9 +133,11 @@ viewer.scene.view.pitch = 0;
|
||||
// Variable, um Endlosschleifen zu verhindern
|
||||
let isSyncing = false;
|
||||
|
||||
/*
|
||||
Kamera von Potree und MapLibre syncronisieren
|
||||
*/
|
||||
function syncCamera() {
|
||||
|
||||
|
||||
if (!currentPointCloud || isSyncing) return;
|
||||
isSyncing = true;
|
||||
|
||||
@@ -161,7 +200,7 @@ map.on('movestart', () => {
|
||||
map.getCanvasContainer().style.cursor = 'grabbing';
|
||||
});
|
||||
|
||||
// Anstatt des trägen 'render'-Events, nutzen wir eine Kombination aus 'draw' und 'precombine'
|
||||
// bei jeder Kartenbwegeung die Kameras synchronisieren
|
||||
map.on('zoom', syncCamera);
|
||||
map.on('move', syncCamera);
|
||||
map.on('rotate', syncCamera);
|
||||
@@ -177,48 +216,167 @@ map.on('draw', syncCamera);
|
||||
elRenderArea.style.pointerEvents = "none";
|
||||
map.getCanvas().style.pointerEvents = "auto";
|
||||
|
||||
|
||||
/*
|
||||
Hintergrundkarte ändern, Optionen: hell, dunkel, 3D-Gebäudemodelle, Satellit, Terrain, Satellit+Terrain
|
||||
*/
|
||||
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://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=6mG881AthmTTWyLvFyjH"], tileSize: 256, attribution: "© MapTiler" } }, layers: [{ id: "satellite-layer", type: "raster", source: "raster-tiles" }] };
|
||||
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 "satellite":
|
||||
basemapStyle = {
|
||||
version: 8,
|
||||
sources: {
|
||||
"raster-tiles": {
|
||||
type: "raster",
|
||||
tiles: ["https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=6mG881AthmTTWyLvFyjH"],
|
||||
tileSize: 256,
|
||||
attribution: "© MapTiler"
|
||||
}
|
||||
},
|
||||
layers: [{
|
||||
id: "satellite-layer",
|
||||
type: "raster",
|
||||
source: "raster-tiles"
|
||||
}]
|
||||
};
|
||||
break;
|
||||
case "terrain":
|
||||
basemapStyle = { version: 8, sources: { topo: { type: 'raster', url: 'https://api.maptiler.com/maps/topo-v4/tiles.json?key=6mG881AthmTTWyLvFyjH', tileSize: 256 }, terrainSource: { type: 'raster-dem', url: 'https://tiles.mapterhorn.com/tilejson.json' }, hillshadeSource: { type: 'raster-dem', url: 'https://tiles.mapterhorn.com/tilejson.json' } }, layers: [{ id: 'topo', type: 'raster', source: 'topo' }, { id: 'hills', type: 'hillshade', source: 'hillshadeSource', layout: { visibility: 'visible' }, paint: { 'hillshade-shadow-color': '#473B24' } }], terrain: { source: 'terrainSource', exaggeration: 1 }, sky: {} };
|
||||
basemapStyle = {
|
||||
version: 8,
|
||||
sources: {
|
||||
topo: {
|
||||
type: 'raster',
|
||||
url: 'https://api.maptiler.com/maps/topo-v4/tiles.json?key=6mG881AthmTTWyLvFyjH',
|
||||
tileSize: 256
|
||||
},
|
||||
terrainSource: {
|
||||
type: 'raster-dem',
|
||||
url: 'https://tiles.mapterhorn.com/tilejson.json'
|
||||
},
|
||||
hillshadeSource: {
|
||||
type: 'raster-dem',
|
||||
url: 'https://tiles.mapterhorn.com/tilejson.json'
|
||||
}
|
||||
},
|
||||
layers: [{
|
||||
id: 'topo',
|
||||
type: 'raster',
|
||||
source: 'topo'
|
||||
}, {
|
||||
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: { "raster-tiles": { type: "raster", tiles: ["https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=6mG881AthmTTWyLvFyjH"], tileSize: 256, attribution: "© MapTiler" }, terrainSource: { type: 'raster-dem', url: 'https://tiles.mapterhorn.com/tilejson.json' }, hillshadeSource: { type: 'raster-dem', url: 'https://tiles.mapterhorn.com/tilejson.json' } }, layers: [{ id: 'raster-tiles', type: 'raster', source: 'raster-tiles' }, { id: 'hills', type: 'hillshade', source: 'hillshadeSource', layout: { visibility: 'visible' }, paint: { 'hillshade-shadow-color': '#473B24' } }], terrain: { source: 'terrainSource', exaggeration: 1 }, sky: {} };
|
||||
basemapStyle = {
|
||||
version: 8,
|
||||
sources: {
|
||||
"raster-tiles": {
|
||||
type: "raster",
|
||||
tiles: ["https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=6mG881AthmTTWyLvFyjH"],
|
||||
tileSize: 256,
|
||||
attribution: "© MapTiler"
|
||||
},
|
||||
terrainSource: {
|
||||
type: 'raster-dem',
|
||||
url: 'https://tiles.mapterhorn.com/tilejson.json'
|
||||
},
|
||||
hillshadeSource: {
|
||||
type: 'raster-dem',
|
||||
url: 'https://tiles.mapterhorn.com/tilejson.json'
|
||||
}
|
||||
},
|
||||
layers: [{
|
||||
id: 'raster-tiles',
|
||||
type: 'raster',
|
||||
source: 'raster-tiles'
|
||||
}, {
|
||||
id: 'hills',
|
||||
type: 'hillshade',
|
||||
source: 'hillshadeSource',
|
||||
layout: {
|
||||
visibility: 'visible'
|
||||
},
|
||||
paint: {
|
||||
'hillshade-shadow-color': '#473B24'
|
||||
}
|
||||
}],
|
||||
terrain: {
|
||||
source: 'terrainSource',
|
||||
exaggeration: 1
|
||||
},
|
||||
sky: {}
|
||||
};
|
||||
break;
|
||||
}
|
||||
map.setStyle(basemapStyle);
|
||||
}
|
||||
|
||||
//------------------------------------------------------Action-Listener und Event-Handler---------------------------------------------------------------------------------
|
||||
|
||||
// Punktwolke aus/einblenden
|
||||
document.querySelector('#disable').addEventListener('click', function() {
|
||||
isVisible = !isVisible;
|
||||
if (currentPointCloud) currentPointCloud.visible = isVisible;
|
||||
if(isVisible){
|
||||
|
||||
if (currentPointCloud)
|
||||
currentPointCloud.visible = isVisible;
|
||||
|
||||
if(isVisible) {
|
||||
this.textContent = "Punktwolke ausblenden";
|
||||
this.classList.add("active-state");
|
||||
this.classList.remove("inactive-state");
|
||||
} else{
|
||||
} else {
|
||||
this.textContent = "Punktwolke anzeigen";
|
||||
this.classList.add("inactive-state");
|
||||
this.classList.remove("active-state");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Koordinaten an der Mausposition darstellen (auf 5 Nachkommastellen begrenzt)
|
||||
const coordinatesDiv = document.getElementById('coordinates');
|
||||
map.on('mousemove', (e) => {
|
||||
coordinatesDiv.innerHTML = `Lon: ${e.lngLat.lng.toFixed(5)}° | Lat: ${e.lngLat.lat.toFixed(5)}°`;
|
||||
});
|
||||
|
||||
|
||||
// Hintergrundkarte ändern, wenn anderes Element im DropDown gewählt wird
|
||||
document.querySelector('select[name="basemap"]').addEventListener('change', (e) => changeBaseMap(e.target.value));
|
||||
|
||||
|
||||
// Punktwolke austauschen, wenn anderes Element im DropDown gewählt wird
|
||||
document.querySelector('select[name="pointcloud"]').addEventListener('change', (e) => {
|
||||
loadPointCloud(getPointCloudFiles()[e.target.value]);
|
||||
loadPointCloud(getPointCloudFilesPOTREE()[e.target.value]);
|
||||
});
|
||||
|
||||
|
||||
// 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();
|
||||
@@ -257,6 +415,7 @@ document.querySelectorAll('.qualityButtons').forEach(btn => {
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
document.querySelectorAll('.colorButtons').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
if (!currentPointCloud) return; // Abbrechen, falls noch keine Wolke geladen ist
|
||||
@@ -288,11 +447,13 @@ document.querySelectorAll('.colorButtons').forEach(btn => {
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Sobald die Karte das allererste Mal stabil steht, Kamera abgleichen
|
||||
map.once('idle', () => {
|
||||
syncCamera();
|
||||
});
|
||||
|
||||
|
||||
// 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', () => {
|
||||
@@ -391,431 +552,3 @@ document.querySelector('select[name="pointcloud"]').addEventListener("change", (
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
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,
|
||||
maxZoom: 24,
|
||||
});
|
||||
window.map=map;
|
||||
|
||||
map.addControl(
|
||||
new maplibregl.NavigationControl({
|
||||
visualizePitch: true,
|
||||
showZoom: true,
|
||||
showCompass: true
|
||||
})
|
||||
);
|
||||
|
||||
// 2. Create an HTML element to display coordinates (e.g., <pre id="coordinates"></pre>)
|
||||
const coordinatesDiv = document.getElementById('coordinates');
|
||||
|
||||
// 3. Listen for mouse movement
|
||||
map.on('mousemove', (e) => {
|
||||
// e.lngLat contains the longitude and latitude
|
||||
const lng = e.lngLat.lng.toFixed(5);
|
||||
const lat = e.lngLat.lat.toFixed(5);
|
||||
|
||||
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.renderer.domElement.style.zIndex="1";
|
||||
map.getCanvas().style.zIndex="0";
|
||||
window.viewer=viewer;
|
||||
viewer.setEDLEnabled(false); // sieht realistischer aus
|
||||
viewer.setFOV(60);
|
||||
viewer.setPointBudget(pointBudget);
|
||||
viewer.setMinNodeSize(pointSize);
|
||||
viewer.setBackground("none");
|
||||
|
||||
console.log(viewer.orbitControls);
|
||||
console.log(viewer.fpControls);
|
||||
console.log(viewer.deviceControls);
|
||||
|
||||
viewer.orbitControls.enabled=false;
|
||||
viewer.fpControls.enabled=false;
|
||||
viewer.deviceControls.enabled=false;
|
||||
|
||||
|
||||
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;
|
||||
let isVisible=true;
|
||||
|
||||
function loadPointCloud(path){
|
||||
console.log("Laden aufgerufen")
|
||||
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;
|
||||
|
||||
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;
|
||||
material.activeAttributeName="rgba";
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
const originMercator = maplibregl.MercatorCoordinate.fromLngLat(
|
||||
{ lng: center[0], lat: center[1] }, 0
|
||||
);
|
||||
const metersToMercator = originMercator.meterInMercatorCoordinateUnits();
|
||||
|
||||
const potreeLayer = {
|
||||
id: "potree-pointcloud",
|
||||
type: "custom",
|
||||
renderingMode: "3d",
|
||||
|
||||
onAdd(map, gl) {
|
||||
this.map = map;
|
||||
this.camera = new THREE.Camera();
|
||||
},
|
||||
|
||||
onRemove(){
|
||||
this.renderer.dispose();
|
||||
this.renderer=null;
|
||||
},
|
||||
|
||||
render(gl, args) {
|
||||
if (!currentPointCloud) return;
|
||||
|
||||
const [originX, originY] = proj4("EPSG:4326", "EPSG:25832", [center[0], center[1]]);
|
||||
|
||||
const m = new THREE.Matrix4().fromArray(args.defaultProjectionData.mainMatrix);
|
||||
const scale = new THREE.Matrix4().makeScale(
|
||||
metersToMercator, -metersToMercator, metersToMercator
|
||||
);
|
||||
const translate = new THREE.Matrix4().makeTranslation(
|
||||
originMercator.x - originX * metersToMercator,
|
||||
originMercator.y + originY * metersToMercator,
|
||||
0
|
||||
);
|
||||
const l = translate.multiply(scale);
|
||||
|
||||
this.camera.projectionMatrix = m.multiply(l);
|
||||
|
||||
viewer.renderer.resetState();
|
||||
viewer.renderer.render(viewer.scene.scenePointCloud, this.camera);
|
||||
this.map.triggerRepaint();
|
||||
},
|
||||
};
|
||||
|
||||
map.on("style.load", () => {
|
||||
map.addLayer(potreeLayer);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 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://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=6mG881AthmTTWyLvFyjH"
|
||||
],
|
||||
tileSize: 256,
|
||||
attribution: "© MapTiler",
|
||||
}
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: "satellite-layer",
|
||||
type: "raster",
|
||||
source: "raster-tiles"
|
||||
}
|
||||
]
|
||||
}
|
||||
break;
|
||||
case "terrain":
|
||||
basemapStyle = {
|
||||
version: 8,
|
||||
sources: {
|
||||
topo: {
|
||||
type: 'raster',
|
||||
url: 'https://api.maptiler.com/maps/topo-v4/tiles.json?key=6mG881AthmTTWyLvFyjH',
|
||||
tileSize: 256,
|
||||
},
|
||||
// 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: 'topo',
|
||||
type: 'raster',
|
||||
source: 'topo'
|
||||
},
|
||||
{
|
||||
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: {
|
||||
"raster-tiles": {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
"https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=6mG881AthmTTWyLvFyjH"
|
||||
],
|
||||
tileSize: 256,
|
||||
attribution: "© MapTiler",
|
||||
},
|
||||
// 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: 'raster-tiles',
|
||||
type: 'raster',
|
||||
source: 'raster-tiles'
|
||||
},
|
||||
{
|
||||
id: 'hills',
|
||||
type: 'hillshade',
|
||||
source: 'hillshadeSource',
|
||||
layout: {visibility: 'visible'},
|
||||
paint: {'hillshade-shadow-color': '#473B24'}
|
||||
}
|
||||
],
|
||||
terrain: {
|
||||
source: 'terrainSource',
|
||||
exaggeration: 1
|
||||
},
|
||||
sky: {}
|
||||
}
|
||||
|
||||
}
|
||||
map.setStyle(basemapStyle);
|
||||
map.once("style.load", ()=> {
|
||||
map.addLayer(potreeLayer);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const button = document.querySelector('#disable')
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
|
||||
isVisible = !isVisible;
|
||||
|
||||
if(currentPointCloud){
|
||||
currentPointCloud.visible = isVisible;
|
||||
}
|
||||
|
||||
button.textContent = isVisible
|
||||
? "Punktwolke ausblenden"
|
||||
: "Punktwolke anzeigen";
|
||||
|
||||
});
|
||||
|
||||
|
||||
// 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) => {
|
||||
const pointCloudFiles = getPointCloudFiles();
|
||||
var pointcloud = pointCloudFiles[event.target.value];
|
||||
loadPointCloud(pointcloud);
|
||||
console.log(pointCloudFiles[event.target.value]);
|
||||
});
|
||||
|
||||
|
||||
// Auf Zentrum zurück zoomen
|
||||
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');;
|
||||
pointBudget = document.getElementById("pointSlider").value;
|
||||
viewer.setPointBudget(pointBudget);
|
||||
}
|
||||
|
||||
|
||||
|
||||
var pointSizeSlider = document.getElementById("pointSizeSlider");
|
||||
|
||||
pointSizeSlider.oninput = function() {
|
||||
pointSize = document.getElementById("pointSizeSlider").value;
|
||||
viewer.setMinNodeSize(pointSize);
|
||||
console.log(pointSize);
|
||||
}
|
||||
|
||||
const closeButton = document.getElementById("closeSideBarButton");
|
||||
const sidebar = document.getElementById("sidebar");
|
||||
const openOuter = document.getElementById("openButtonOuter");
|
||||
|
||||
if (closeButton) {
|
||||
closeButton.addEventListener("click", () => {
|
||||
const rect = closeButton.getBoundingClientRect();
|
||||
sidebar.style.display = "none";
|
||||
|
||||
openOuter.innerHTML = "<button class='sideBarButtons' id='openSideBarButton' title='Menü ausklappen'>>></button>";
|
||||
const openButton = document.getElementById("openSideBarButton");
|
||||
openButton.style.top = `${rect.top + window.scrollY -2}px`;
|
||||
if (openButton) {
|
||||
openButton.addEventListener("click", () => {
|
||||
sidebar.style.display = "flex";
|
||||
|
||||
openOuter.innerHTML = "";
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Qualitätsbuttons aktivieren/deaktivieren
|
||||
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');
|
||||
});
|
||||
|
||||
button.classList.add('active');
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Farbbuttons aktivieren/deaktivieren
|
||||
const colorButtons = document.querySelectorAll('.colorButtons');
|
||||
|
||||
colorButtons.forEach(button => {
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
|
||||
colorButtons.forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
|
||||
button.classList.add('active');
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
*/
|
||||
Reference in New Issue
Block a user