3D-Beta: Visualisierung von Gelände

Beschreibung

Durch eine 3D-Visualisierung sind die Höheninformationen im Vergleich zu 2D-Kartenanwednungen wesentlich besser interpretierbar. In Bezug auf das Gelände wird dieses erreicht, indem ein 3D-Mesh aus dem Digitalen Geländemodell (hier mit einer Gitterweite von 5 Meter: DGM5) berechnet wird.
Die Visualisierung kann über MaplibreGL JS oder CesiumJS erfolgen, wobei für jeden Visualisierungsansatz die Daten anders aufbereitet werden müssen. Eine genauere Erklärung der beiden Ansätze gibt es im weiteren Verlauf der Seite. Grundsätzlich wird bei der Darstellung WebGL genutzt, um die Berechnung mithilfe der Hardware zu beschleunigen. So kann die Visualisierung direkt im Browser erfolgen, ohne dass etwas installiert oder registriert werden muss.
MapLibre GL JS
Cesium JS
MaplibreGL JS ist eine Open-Source Weiterentwicklung von MapboxGL JS, da Mapbox mit der Veröffentlichung der Version 2.0 zu einer proprietären Lizenz gewechselt ist.
Im Smart-Mapping Projekt wird MaplibreGL JS für die Kartendarstellung im Web-Browser und für weitere Funktionen genutzt.

Die Geländeinformationen müssen in RGB-Höhen kodiert werden. Somit liefert der Geländedienst pro Kachel eine Bilddatei (z.B. jpg) aus. Für jeden Pixel hat jede der Grundfarben (Rot, Grün, Blau) einen Wert zwischen 0 und 255. In die folgende Formel werden diese Farbwerte eingesetzt und so die entsprechende Höhe berechnet.
Höhe = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1)

Das Gelände wird über die Style-Url ausgeliefert. Die Definition der Sources und Layer kann anhand des offiziellen Beispiel nachvollzogen werden. Der Link zu den basemap.de Geländekacheln lautet folgendermaßen: 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>
CesiumJS ist eine JavaScript Bibliothek zum Erstellen von 3D-Globen und 2D-Karten im Browser, welche als Open-Source Software zur Verfügung steht. Es wird aber auch ein kostenpflichtiger Dienst angeboten, um u.a. spezifische Hintergrundkarten zu nutzen. In dem folgenden Beispiel werden nur kostenfreie Dienste verwendet.
<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>

Lizenz- und Nutzungsbedingungen

Es gelten folgende Lizenz- und Nutzungsbedingungen:
PDF Datei