itowns
Version:
A JS/WebGL framework for 3D geospatial data visualization
123 lines (105 loc) • 5.81 kB
HTML
<html>
<head>
<title>Itowns - Globe</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
</head>
<body>
<div id="viewerDiv"></div>
<span id="divScaleWidget"> Scale </span>
<div id="miniDiv"></div>
<script src="js/GUI/GuiTools.js"></script>
<script src="../dist/itowns.js"></script>
<script src="js/GUI/LoadingScreen.js"></script>
<script src="../dist/debug.js"></script>
<script type="text/javascript">
// # Simple Globe viewer
// Define initial camera position
var positionOnGlobe = { longitude: 2.351323, latitude: 48.856712, altitude: 25000000 };
var miniView;
var minDistance = 10000000;
var maxDistance = 30000000;
// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
var viewerDiv = document.getElementById('viewerDiv');
var miniDiv = document.getElementById('miniDiv');
// Instanciate iTowns GlobeView*
var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
setupLoadingScreen(viewerDiv, view);
// Dont' instance mini viewer if it's Test env
miniView = new itowns.GlobeView(miniDiv, positionOnGlobe, {
// `limit globe' subdivision level:
// we're don't need a precise globe model
// since the mini globe will always be seen from a far point of view (see minDistance above)
maxSubdivisionLevel: 2,
// Don't instance default controls since miniview's camera will be synced
// on the main view's one (see view.addFrameRequester)
noControls: true,
});
// Set a 0 alpha clear value (instead of the default '1')
// because we want a transparent background for the miniglobe view to be able
// to see the main view "behind"
miniView.mainLoop.gfxEngine.renderer.setClearColor(0x000000, 0);
// update miniview's camera with the view's camera position
view.addFrameRequester(itowns.MAIN_LOOP_EVENTS.AFTER_RENDER, function updateMiniView() {
// clamp distance camera from globe
var distanceCamera = view.camera.camera3D.position.length();
var distance = Math.min(Math.max(distanceCamera * 1.5, minDistance), maxDistance);
var camera = miniView.camera.camera3D;
var cameraTargetPosition = view.controls.getCameraTargetPosition();
// Update target miniview's camera
camera.position.copy(cameraTargetPosition).setLength(distance);
camera.lookAt(cameraTargetPosition);
miniView.notifyChange(camera);
});
// Add one imagery layer to the scene and the miniView
// This layer is defined in a json file but it could be defined as a plain js
// object. See Layer* for more info.
itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
config.source = new itowns.WMTSSource(config.source);
var layer = new itowns.ColorLayer('Ortho', config);
view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
var miniLayer = new itowns.ColorLayer('OrthoMini', config);
miniView.addLayer(miniLayer);
});
// Add two elevation layers.
// These will deform iTowns globe geometry to represent terrain elevation.
function addElevationLayerFromConfig(config) {
config.source = new itowns.WMTSSource(config.source);
var layer = new itowns.ElevationLayer(config.id, config);
view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
}
itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
var menuGlobe = new GuiTools('menuDiv', view);
var divScaleWidget = document.getElementById('divScaleWidget');
function updateScaleWidget() {
var value = view.getPixelsToMeters(200);
value = Math.floor(value);
var digit = Math.pow(10, value.toString().length - 1);
value = Math.round(value / digit) * digit;
var pix = view.getMetersToPixels(value);
var unit = 'm';
if (value >= 1000) {
value /= 1000;
unit = 'km';
}
divScaleWidget.innerHTML = `${value} ${unit}`;
divScaleWidget.style.width = `${pix}px`;
}
// Listen for globe full initialisation event
view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
// eslint-disable-next-line no-console
console.info('Globe initialized');
updateScaleWidget();
});
view.controls.addEventListener(itowns.CONTROL_EVENTS.RANGE_CHANGED, () => {
updateScaleWidget();
});
window.addEventListener('resize', updateScaleWidget);
debug.createTileDebugUI(menuGlobe.gui, view);
</script>
</body>
</html>