3D-BETA: VISUALISIERUNG VON LOD2-GEBÄUDEN (INKL. 3D-GELÄNDE)

Beschreibung

Die Gebäude aus dem Datenbestand "LoD2-DE" der ZSHH beinhalten auch Information bezüglich ihrer Höhe auf der Erdoberfläche. Dadurch können sie zusammen mit einem Digitalen Geländemodell (hier mit einer Gitterweite von 5 Meter: DGM5) visualisiert werden. 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.

Cesium JS

Zur Kartenanwendung

Für die Visualisierung muss das Gelände als Quantized Mesh vorliegen. Dieses ist ein aus einzelnen Meshes bestehender Quadtree. Im Grunde sind es sehr viele Dreiecksmeshes, die in spezifischer Weise gekachelt und kodiert sind.
Die Gebäude liegen als CityGML-Dateien vor und werden in mehreren Prozessschritten zu 3D-Tiles überführt.

Hinweis: Aufgrund des Beta-Status der Anwendung fällt das Ladeverhalten unter Umständen noch etwas langsam aus.

<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)
              })
          });
  
          <!-- 3D-Tileset ergaenzen, welches die LoD2-Gebaeude von der Smart-Mapping Seite laedt -->
          var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({  
              url : 'https://web3d.basemap.de/cesium/buildings-fly/root.json'
          }));
  
          <!-- Die definierten Flächen können individuell eingefärbt werden.--> 
          var cityStyle = new Cesium.Cesium3DTileStyle({
            color : {
                conditions : [
                   ["${surface} === 'wall'", "color('#f2f2f2')"],
                   ["${surface} === 'roof'", "color('#ff5c4d')"],
                   ["${surface} === 'bridge'", "color('#999999')"]
                ]
            },
         });
         tileset.style = cityStyle
  
          <!-- 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