Punktwolken Dateien auf Server, Pfade geändert und Slider eingebunden
This commit is contained in:
+10
-6
@@ -56,9 +56,9 @@
|
||||
<button id="disable">Punktwolke ausblenden</button>
|
||||
<p class="sideBarText">Qualität der Punktwolke</p>
|
||||
<div class="buttonRow">
|
||||
<button class="qualityButtons">niedrig</button>
|
||||
<button class="qualityButtons active">mittel</button>
|
||||
<button class="qualityButtons">hoch</button>
|
||||
<button class="qualityButtons" id="low">niedrigste</button>
|
||||
<button class="qualityButtons active" id="medium">mittel</button>
|
||||
<button class="qualityButtons" id="high">höchste</button>
|
||||
</div>
|
||||
<p class="sideBarText">Farbdarstellung</p>
|
||||
<div class="buttonRow">
|
||||
@@ -66,9 +66,13 @@
|
||||
<button class="colorButtons">höhencodiert</button>
|
||||
</div>
|
||||
<p class="sideBarText" id="pointSliderValue"></p>
|
||||
<input id="pointSlider" type="range" min="1000000" max="9000000" value="3000000">
|
||||
<p class="sideBarText" id="pointSizeSliderValue"></p>
|
||||
<input id="pointSizeSlider" type="range" min="0.1" max="5" value="1" step="0.1">
|
||||
<input id="pointSlider" type="range" min="500000" max="10000000" value="3000000">
|
||||
<p class="sideBarText" id="pointSizeSliderValue">Punktgröße</p>
|
||||
<div class="slider-labels">
|
||||
<span>Klein</span>
|
||||
<span>Groß</span>
|
||||
</div>
|
||||
<input id="pointSizeSlider" type="range" min="0" max="1000" value="0" step="1">
|
||||
<div class="logos">
|
||||
<a href="http://www.jade-hs.de">
|
||||
<img id="logoJadeHs" src="logoJadeHs.png" />
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
|
||||
@@ -43,7 +43,7 @@ body{
|
||||
}
|
||||
|
||||
.logos{
|
||||
margin-top:25px;
|
||||
margin-top:20px;
|
||||
margin-left: 12px;
|
||||
opacity:0.8;
|
||||
}
|
||||
@@ -97,8 +97,10 @@ body{
|
||||
top: 48%;
|
||||
transform:translateY(-50%);
|
||||
left: 20px;
|
||||
width: 200px;
|
||||
width: 210px;
|
||||
padding: 22px;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(18px);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
@@ -228,6 +230,7 @@ footer{
|
||||
.sideBarText{
|
||||
font-size:80%;
|
||||
margin:0;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
#pointSlider, #pointSizeSlider{
|
||||
@@ -235,6 +238,7 @@ margin:0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
input[type="range"]{
|
||||
@@ -247,7 +251,6 @@ input[type="range"]{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb{
|
||||
@@ -266,6 +269,15 @@ input[type="range"]::-webkit-slider-thumb{
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.slider-labels{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
font-size:0.5rem;
|
||||
color:#868686;
|
||||
margin-bottom:0px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
#title{
|
||||
z-index: 30;
|
||||
position: absolute;
|
||||
|
||||
Reference in New Issue
Block a user