Exemple serveis terrenys ICGC

Veure codi font


      
        <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://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.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.createOpenStreetMapImageryProvider({
          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>