itowns
Version:
A JS/WebGL framework for 3D geospatial data visualization
163 lines (132 loc) • 6.27 kB
HTML
<html>
<head>
<title>Itowns - Entwine simple loader</title>
<script type="importmap">
{
"imports": {
"itowns": "../dist/itowns.js",
"debug": "../dist/debug.js",
"LoadingScreen": "./jsm/GUI/LoadingScreen.js",
"itowns_widgets": "../dist/itowns_widgets.js",
"three": "https://unpkg.com/three@0.170.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.170.0/examples/jsm/",
"lil": "https://unpkg.com/lil-gui@0.20.0/dist/lil-gui.esm.js"
}
}
</script>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
<style type="text/css">
#description {
z-index: 2;
left: 10px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/lil-gui@0.19"></script>
</head>
<body>
<div id="description">Specify the URL of a Entwine Point Tree to load:
<input type="text" id="ept_url" />
<button id="readUrlButton">Load</button>
<button id="loadLyonButton">Load the Grand Lyon dataset</button>
<div id="share"></div>
</div>
<div id="viewerDiv">
</div>
<script type="module">
import lil from 'lil';
import setupLoadingScreen from 'LoadingScreen';
import * as THREE from 'three';
import * as itowns from 'itowns';
import * as debug from 'debug';
import * as itowns_widgets from 'itowns_widgets';
itowns.CRS.defs('EPSG:3946', '+proj=lcc +lat_0=46 +lon_0=3 +lat_1=45.25 +lat_2=46.75 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs');
var debugGui = new lil();
var viewerDiv = document.getElementById('viewerDiv');
viewerDiv.style.display = 'block';
var view = new itowns.View('EPSG:3946', viewerDiv);
view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);
const controls = new itowns.PlanarControls(view);
var eptLayer, eptSource;
function onLayerReady() {
var lookAt = new THREE.Vector3();
var size = new THREE.Vector3();
eptLayer.root.bbox.getSize(size);
eptLayer.root.bbox.getCenter(lookAt);
view.camera3D.far = 2.0 * size.length();
controls.groundLevel = eptLayer.root.bbox.min.z;
var position = eptLayer.root.bbox.min.clone().add(
size.multiply({ x: 0, y: 0, z: size.x / size.z })
);
view.camera3D.position.copy(position);
view.camera3D.lookAt(lookAt);
view.camera3D.updateProjectionMatrix();
view.notifyChange(view.camera3D);
}
function readEPTURL() {
const urlParams = new URL(location.href).searchParams
var url = document.getElementById('ept_url').value || urlParams.get('ept');
if (url) {
const options = {};
urlParams.keys().forEach(key => {
if (key !== 'ept') {
options[key] = parseInt(urlParams.get(key), 10);
}
});
loadEPT(url, options);
document.getElementById('share').innerHTML = '<a href="' +
location.href.replace(location.search, '') +
'?ept=' + url
+ '" target="_blank">Link to share this view</a>';
document.getElementById('ept_url').value = url;
}
}
let eptName;
function loadEPT(url, options) {
eptSource = new itowns.EntwinePointTileSource({ url });
if (eptLayer) {
eptLayer.debugUI.destroy();
view.removeLayer(eptName);
view.notifyChange();
eptLayer.delete();
}
const config = {
source: eptSource,
crs: view.referenceCrs,
...options,
}
eptName = url.split('/').pop()
eptName = eptName[0].toUpperCase() + eptName.slice(1);
eptLayer = new itowns.EntwinePointTileLayer(eptName, config);
view.addLayer(eptLayer).then(onLayerReady);
eptLayer.whenReady
.then(() => debug.PointCloudDebug.initTools(view, eptLayer, debugGui));
function dblClickHandler(event) {
var pick = view.pickObjectsAt(event, 5, eptLayer);
for (const p of pick) {
console.info('Selected point #' + p.index + ' in position (' +
p.object.position.x + ', ' +
p.object.position.y + ', ' +
p.object.position.z +
') - node ' + p.object.userData.node.id);
}
}
view.domElement.addEventListener('dblclick', dblClickHandler);
}
function onloadGrandLyon() {
document.getElementById('ept_url').value = 'https://download.data.grandlyon.com/files/grandlyon/imagerie/mnt2018/lidar/ept';
readEPTURL();
}
const loadLyonButton = document.getElementById('loadLyonButton');
const readUrlButton = document.getElementById('readUrlButton');
loadLyonButton.addEventListener('click', onloadGrandLyon);
readUrlButton.addEventListener('click', readEPTURL);
readEPTURL();
window.view = view;
window.itowns = itowns;
window.THREE = THREE;
</script>
</body>
</html>