<html lang="ca">
<head>
<title>Terreny 5M</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="geostarters" />
<meta name="description" content="Terreny 5M ICGC">
<meta name="robots" content="index,follow">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.90.0/Cesium.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.90.0/Widgets/widgets.min.css" rel="stylesheet">
<style>
#map {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
padding: 0;
font-family: sans-serif;
}
#menu {
position: absolute;
z-index: 1000;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
top: 5px;
left: 5px;
border-radius: 7px;
-webkit-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
font-size: 80%;
}
html {
height: 100%;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
height: 100%;
}
</style>
<script>
function initApp() {
const terrain30M = new Cesium.CesiumTerrainProvider({
url: 'https://api.maptiler.com/tiles/terrain-quantized-mesh/?key=QLOqi8gs14T1s1yjnRMO'
});
const terrain5M = new Cesium.CesiumTerrainProvider({
url: 'https://tilemaps.icgc.cat/terrenys/demextes/'
});
map = new Cesium.Viewer('map', {
imageryProvider: new Cesium.OpenStreetMapImageryProvider({
url: 'https://geoserveis.icgc.cat/icc_mapesmultibase/noutm/wmts/orto/GRID3857/',
fileExtension: 'jpeg',
maximumLevel: 19,
credit: 'Institut Cartogrà fic i Geològic de Catalunya'
}),
timeline: false,
navigationHelpButton: true,
scene3DOnly: true,
fullscreenButton: true,
baseLayerPicker: false,
homeButton: false,
vrButton: true,
navigationHelpButton: false,
infoBox: true,
sceneModePicker: false,
animation: false,
geocoder: false,
sceneMode: Cesium.SceneMode.SCENE3D,
terrainProvider: terrain5M
});
map.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(1.70632, 42.20390, 16000),
duration: 0,
complete: function () {
setTimeout(function () {
map.camera.flyTo({
destination: new Cesium.Cartesian3(4729244.983163969, 143571.72049952167, 4266387.882877819),
orientation: {
direction: new Cesium.Cartesian3(-0.1689927316633657, -0.9849949286281356,
0.03502066849458571),
up: new Cesium.Cartesian3(0.7269595744661987, -0.10057128172725824, 0.6792754922589654)
},
easingFunction: Cesium.EasingFunction.LINEAR_NONE
});
}, 1000);
}
});
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
function switchLayer(layer) {
const layerId = layer.target.id;
try {
if (layerId == 'icgc') {
map.terrainProvider = terrain5M;
} else {
map.terrainProvider = terrain30M;
}
} catch (err) {
console.log(err);
}
}
for (let i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
}
</script>
</head>
<body onLoad="initApp()">
<div id='menu'>
<input id='icgc' type='radio' name='rtoggle' value='icgc' checked='checked'>
<label for='icgc'>Terreny ICGC 5M</label>
<input id='nasa' type='radio' name='rtoggle' value='nasa'>
<label for='nasa'>Terreny NASA 30M</label>
</div>
<div id="map"></div>
</body>
</html>