126 lines
4.8 KiB
HTML
126 lines
4.8 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>LiDAR App</title>
|
|
<link
|
|
href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" type="text/css" href="./libs/potree/potree.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="./libs/jquery-ui/jquery-ui.min.css"
|
|
/>
|
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<header id="header">
|
|
<span>3D-LiDAR Visualisierung</span>
|
|
</header>
|
|
<h1 id="title">- Obernkirchener Sandstein -</h1>
|
|
<div id="coordinates" title="Koordinaten an Mausposition"></div>
|
|
<div id="openButtonOuter">
|
|
|
|
</div>
|
|
<div id="sideBarOuter">
|
|
<aside id="sidebar">
|
|
<button class="sideBarButtons" id="closeSideBarButton" title="Menü einklappen"><<</button>
|
|
<div class="selectWrapper">
|
|
<select name="basemap" id="basemap">
|
|
<option value="" disabled selected>Hintergrundkarte </option>
|
|
<option value="openfree_bright">Hell</option>
|
|
<option value="openfree_dark">Dunkel</option>
|
|
<option value="openfree_liberty">Klassisch + Gebäude</option>
|
|
<option value="google_satellite">Satellit</option>
|
|
<option value="terrain">Terrain</option>
|
|
<option value="satellite_terrain">Terrain + Satellit</option>
|
|
</select>
|
|
<span class="selectArrow">⏷</span>
|
|
</div>
|
|
<div class="selectWrapper">
|
|
<select name="pointcloud" id="pointcloud">
|
|
<option value="" disabled selected>Punktwolke auswählen</option>
|
|
<option value="first">1. Fläche unten</option>
|
|
<option value="second">2. Felswand</option>
|
|
<option value="third">3. Fläche oben mit Spuren</option>
|
|
</select>
|
|
<span class="selectArrow">⏷</span>
|
|
</div>
|
|
<button id="disable">Punktwolke ausblenden</button>
|
|
<p class="sideBarText">Qualität der Punktwolke</p>
|
|
<div class="buttonRow">
|
|
<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">
|
|
<button class="colorButtons active" id="rgb">RGB</button>
|
|
<button class="colorButtons" id="height">höhencodiert</button>
|
|
</div>
|
|
<p class="sideBarText" id="pointSliderValue"></p>
|
|
<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">
|
|
<button id="openInfoPanel" title="Informationen zur Punktwolke"><img id="location" title="Standort zurücksetzen" src="info.png" />Informationen</button>
|
|
<div class="logos">
|
|
<a href="http://www.jade-hs.de">
|
|
<img id="logoJadeHs" src="logoJadeHs.png" />
|
|
</a>
|
|
<a href="https://www.lbeg.niedersachsen.de/startseite/">
|
|
<img id="logoLbeg" src="logoLbeg.svg" />
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
<main id="main">
|
|
<div id="location-button">
|
|
<img id="location" title="Standort zurücksetzen" src="standort.png" />
|
|
</div>
|
|
<div id="map"></div>
|
|
<div id="potree_render_area"></div>
|
|
<footer>
|
|
© Arne Zitting u. Hauke Kahrs
|
|
</footer>
|
|
|
|
<div id="info-panel">
|
|
<div id="info-panel-inner">
|
|
<button class="sideBarButtons" id="closeInfoPanel" title="Info einklappen">>></button>
|
|
<h3 id="info-panel-title">Info</h3>
|
|
<img id="info-panel-image" src="" alt="Standortbild" style="display:none;" />
|
|
<div id="info-image-nav" style="display:none;">
|
|
<button id="info-img-prev">←</button>
|
|
<span id="info-image-counter"></span>
|
|
<button id="info-img-next">→</button>
|
|
</div>
|
|
<p id="info-panel-text">Bitte wählen Sie eine Punktwolke aus.</p>
|
|
</div>
|
|
</div>
|
|
<div id="info-button-outer">
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<script src="./libs/jquery/jquery-3.1.1.min.js"></script>
|
|
<script src="./libs/other/BinaryHeap.js"></script>
|
|
<script src="./libs/tween/tween.min.js"></script>
|
|
<script src="./libs/d3/d3.js"></script>
|
|
<script src="./libs/proj4/proj4.js"></script>
|
|
<script src="./libs/potree/potree.js"></script>
|
|
<script src="./libs/plasio/js/laslaz.js"></script>
|
|
|
|
<script type="module" src="/main.js"></script>
|
|
</body>
|
|
</html>
|