3D BETA: VISUALIZATION OF LOD2 BUILDINGS (INCLUDING 3D TERRAIN)

Description

The buildings from the database "LoD2-DE" the ZSHH also contain information regarding their height on the earth's surface. This means that together with a digital terrain model (here with a grid width of 5 meters: DGM5) can be visualized. 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.

Cesium JS

To the map application

For the visualization, the terrain must be as Quantized Mesh present. This is a quadtree consisting of individual meshes. Basically it's a lot of triangle meshes that are tiled and coded in a specific way.
The buildings are available as CityGML files and are converted into 3D tiles in several process steps.

Note: Due to the beta status of the application, the loading behavior may still be a little slow.

<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>

License and Terms of Use

The following license and usage conditions apply:

PDF file