3D BETA: VISUALIZATION OF LOD2 BUILDINGS

Description

The following applications are based on the 3D database "LoD2-DE" the ZSHH. For the visualization, the building data is used by CityGML 3D tiles transferred and displayed with MaplibreGL JS or CesiumJS. Both libraries use WebGL to accelerate the calculation of the 3D models using the hardware, which means that the visualization can be done directly in the browser. No installation or registration is necessary.
The example applications visualize the LoD2 buildings throughout Germany. By clicking on the buildings with the left mouse button, they can be selected and additional features can be accessed. Currently only the GML ID and the building function appear. However, any information can be linked to the buildings and displayed. However, this is not possible later, but must be taken into account when creating the 3D tiles.
MaplibreGL JS
Cesium JS
MaplibreGL JS
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. Based on this, the buildings are visualized using an external Javascript file ThreeJS.
 <html lang="en">
  <head>
   <meta charset="utf-8">
   <title> LoD2 Gebaeude </title>
   <!-- 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">
   <script src="https://web3d.basemap.de/maplibre/Mapbox3DTiles.js"></script>

   <style>
       body { margin:0; padding:0; }
       #map { position:absolute; top:0; bottom:0; width:100%; }
       .container {
          position: absolute;
          left: 5px;
          padding: 5px;
          border: 1px solid gray;
          border-radius: 2px;
          background-color: black;
          color: white;
          min-width: 200px;
       }
       #controls { position:absolute; top:0; left:0; }
       #info {
           top:120px;
           min-height: 75px;
       }
   </style>
 </head>

 <body>
    <div id="map"></div>
    <div id="info" class="container"></div>
    <script>
        <!-- Initialisiern des Viewer mit der definierten Hintergrundkarte --> 
        var map = new maplibregl.Map({
          container: 'map',
          style:'https://sgx.geodatenzentrum.de/gdz_basemapde_vektor/styles/bm_web_col.json',
          center: [6.959092,50.941485],
          zoom: 16.3,
          bearing: -20,
          pitch: 40,
          hash: true
        });

        map.addControl(new maplibregl.NavigationControl(),'top-left');

        <!-- Holen der Gebaeude und hinzufuegen als eigenen Layer--> 
        map.on('style.load', function() {
          let lod2_layer = new Mapbox3DTiles.Mapbox3DTilesLayer( {
              id: 'lod2_building',
              url: 'https://web3d.basemap.de/maplibre/buildings-floor/red_root.json',
              colorWall: '#c2c2c2',
              colorRoof: '#ff5c4d',
              colorBridge: '#999999'
          } );
          map.addLayer(lod2_layer, 'Gebaeude3D_nicht_oeffentlich');
          map.setLayoutProperty('Gebaeude3D_oeffentlich', 'visibility', 'none');
          map.setLayoutProperty('Gebaeude3D_nicht_oeffentlich', 'visibility', 'none');
          map.setLayoutProperty('Hauskoordinate', 'visibility', 'none');
        });

        <!-- Gebaeude erst ab Zoomstufe 16 darstellen, fuer eine schnellere Visualisierung--> 
        map.on('zoom', () => {
          var zoom=map.getZoom();
          if (zoom<15) {
              map.setLayoutProperty('lod2_building', 'visibility', 'none');
          }          
          else {
              map.setLayoutProperty('lod2_building', 'visibility', 'visible');
          }
        });

        <!-- Anzeigen der Gebaeude-Features in der Info-Box --> 
        map.on('click', (event)=>{
                let infoElement = document.querySelector('#info');
                let features = map.queryRenderedFeatures(event.point, {outline: true, outlineColor: 0xff0000});
                if (features.length ) {
                    console.log(features)
                    infoElement.innerHTML =
                        features.filter(feature=> feature.layer.id == 'lod2_building') .map(feature=&gt;`Layer: ${feature.layer.id}<br>
                                                          ${Object.entries(feature.properties) .map(entry=&gt;`<b>${entry[0]}:</b>${entry[1]}`)
                                                          .join('<br>\n&#039;)}
                        `).join('<hr>\n&#039;)
                } else {
                    infoElement.innerHTML = "Klicke auf ein Gebaeude";
                }
            })
    </script>
 </body>
</html>
Cesium JS
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> LoD2 Gebaeude </title>
     <!-- Laden der benötigen Javascript und CSS-Datei von Cesium -->
     <script script src="https://cesium.com/downloads/cesiumjs/releases/1.93/Build/Cesium/Cesium.js"></script>
     <link href="https://cesium.com/downloads/cesiumjs/releases/1.93/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
          });
  
          <!-- 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);
  
          <!-- 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-floor/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
  
          <!-- Kamera auf uebergebenen Punkt zentrieren in einer bestimmten Hoehe-->
          viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(6.958215,50.932767, 1500.0), 
                               orientation:{ 
                                    heading: Cesium.Math.toRadians(0.0), 
                                    pitch : Cesium.Math.toRadians(-50.0), 
                                    roll : 0.0}
                              });
      </script>
   </body>
  </html>

License and Terms of Use


The following license and usage conditions apply:
Copyright © 2024 basemap.de
@Webadmin
basemap.de
sort-amount-asc