3D Beta: Visualization of terrain

Description

3D visualization makes the height information much easier to interpret compared to 2D map applications. With regard to the terrain, this is achieved by creating a 3D mesh from the digital terrain model (here with a grid width of 5 meters: DGM5) is calculated.
The visualization can be done using MaplibreGL JS or CesiumJS, although the data must be prepared differently for each visualization approach. A more detailed explanation of the two approaches can be found later on the page. Basically, WebGL is used in the display to accelerate the calculation using the hardware. This means the visualization can be done directly in the browser without having to install or register anything.

MaplibreGL JS

Cesium JS

MaplibreGL JS

To the map application

MaplibreGL JS is an open source development of MapboxGL JS, as Mapbox switched to a proprietary license with the release of version 2.0.
In the smart mapping project, MaplibreGL JS is used for map display in the web browser and for other functions.

The terrain information must be encoded in RGB heights. The terrain service therefore delivers an image file (e.g. jpg) for each tile. For each pixel, each of the primary colors (red, green, blue) has a value between 0 and 255. These color values are inserted into the following formula and the corresponding height is calculated.
Height = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1)

The terrain is delivered via the style url. The definition of the sources and layers can be based on the official Example be understood. The link to the basemap.de terrain tiles is as follows: https://web3d.basemap.de/maplibre/terrain-tiles.json

<html>
    <head>
     <meta charset="utf-8"/>
     <title> 3D Gelaende </title>
     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
     <!-- Laden der benötigen Javascript und CSS-Datei von Maplibre -->
     <script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
     <link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet"/>
  
     <style>
         body { margin:0; padding:0; }
         #map { position:absolute; top:0; bottom:0; width:100%; }
     </style>
   </head>
  
   <body>
      <div id="map"></div> 
      <script>
          <!-- Initialisiern des Viewer mit der definierten Hintergrundkarte -->  
          var map = (window.map = new maplibregl.Map({
            container: 'map',
            zoom: 13.3,
            center: [10.8859,47.64851],
            pitch: 54,
            hash: true,
            style: 'https://web3d.basemap.de/maplibre/bm_web_col.json', 
            maxZoom: 18,
            maxPitch: 85
         }));
            
            map.addControl(
               new maplibregl.NavigationControl({
                  visualizePitch: true,
                  showZoom: true,
                  showCompass: true
               })
            );
            
            map.addControl(
               new maplibregl.TerrainControl({
                  source: 'terrainSource',
                  exaggeration: 1
               })
            );
      </script>
   </body>
  </html>

Cesium JS

To the map application

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in the browser, which can be used as Open source software is available. However, a paid service is also offered to use specific background maps, among other things. In the following example, only free services are used.

<html lang="en">
    <head>
     <meta charset="utf-8">
     <title> 3D Gelaende </title>
     <!-- Laden der benötigen Javascript und CSS-Datei von Cesium -->
     <script src="https://cesium.com/downloads/cesiumjs/releases/1.97/Build/Cesium/Cesium.js"></script>
     <link href="https://cesium.com/downloads/cesiumjs/releases/1.97/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
     <style>
         html, body, #cesiumContainer {
             width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
         }
     </style>
   </head>
  
   <body>
      <div id="cesiumContainer"></div>
      <script>
          <!-- optional: Cesium.Ion.defaultAccessToken = 'XXXX'; -->
  
          <!-- Hintergrundkarte für die Gebiete außerhalb von Deutschland--> 
          var osm= new Cesium.OpenStreetMapImageryProvider({
               url : '//a.tile.openstreetmap.org/',
               credit: new Cesium.Credit("\u003ca href=\"https://www.openstreetmap.org/copyright\""+
                                           "target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e", true)
           });
  
          <!-- Initialisiern des Cesium-Viewer--> 
          var viewer = new Cesium.Viewer('cesiumContainer',{ 
              imageryProvider : osm,
              shadows: false, 
              geocoder: false,       
              baseLayerPicker: false,
              terrainProvider : new Cesium.CesiumTerrainProvider({
                url : 'https://web3d.basemap.de/cesium/dgm5-mesh',
                credit: new Cesium.Credit("\u0026copy; 2023 basemap.de",true)
              })
          });
  
          <!-- Hintergrundkarte festlegen - WMS der SmartMapping Karte. Leider unterstützt Cesium keine Vector-Tiles.-->
          const provider = new Cesium.WebMapServiceImageryProvider({
          url : 'https://sgx.geodatenzentrum.de/wms_basemapde?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities',
          layers: "de_basemapde_web_raster_farbe",
              parameters: {
                transparent: true,
                format: "image/png",
              }
          });
          viewer.imageryLayers.addImageryProvider(provider);
  
          <!-- Kamera auf uebergebenen Punkt zentrieren in einer bestimmten Hoehe-->
          viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(10.277367,47.415311, 3500.0), 
                               orientation:{ 
                                    heading: Cesium.Math.toRadians(50.0), 
                                    pitch : Cesium.Math.toRadians(-40.0), 
                                    roll : 0.0}
                              });
      </script>
   </body>
  </html>

License and Terms of Use

The following license and usage conditions apply:

PDF file