Deutsch DE English EN

BETA LoD2

Visualisierung LOD2-Gebäude

Durch 3D-Gebäude wird eine normale 2D-Karte um eine weitere Perspektive erweitert. So können zusätzliche Informationen in einer anschaulichen Art und Weise dargestellt werden.
Im weiteren Verlauf dieser Seite finden Sie Codebeispiele, die es ermöglichen vorprozessierte LoD2-Gebäude ohne weiteren Aufwand darzustellen. Als Datengrundlage dient der Datenbestand "LoD2-DE" der ZSHH. In diesem sind deutschlandweit alle Gebäude aus dem Amtlichen Liegenschaftskatasterinformationssystem (ALKIS) enthalten. Die Gebäude sind im LoD2 modelliert, sodass vereinfachte Dachformen vorliegen. Während der Prozessierung findet eine Färbung von Dächern, Wänden und Brücken statt.

Für die Visualisierung stehen zwei Bibliotheken zur Verfügung. Zum einen CesiumJS und zum anderen MaplibreGL JS. In beiden wird WebGL genutzt um die Berechnung mithilfe der Hardware zu beschleunigen. So kann die Visualisierung direkt im Browser erfolgen ohne dass etwas installiert werden muss und es ist auch keine Registrierung nötig.
In dem Viewer können die Gebäude per Linksklick ausgewählt werden und so angehängte Features abgerufen werden. Aktuell erscheinen nur die GML_ID und Gebäudefunktion, es können aber beliebige Informationen mit den Gebäuden verknüpft und dargestellt werden.

MaplibreGL JS

MaplibreGL JS ist eine Open-Source Weiterentwicklung von MapboxGL JS, da Mapbox mit der Veröffentlichung der Version 2.0 zu einer proprietär Lizenz gewechselt ist.
Im Smart-Mapping Projekt wird MaplibreGL JS für die Kartendarstellung im Web-Browser und zusätzliche Funktionen genutzt. Darauf aufbauend erfolgt die Visualisierung der Gebäude über eine externe Javascript-Datei mittels ThreeJS.

Zum Beispiel-Viewer

HTML-Code (Maplibre-Dokumentation):

<html lang="en">

<head>

<meta charset="utf-8">

<!-- Laden der benötigen Javascript uns CSS-Datei von Maplibre -->

<script 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://adv-smart.de/test-vt/lod2/deutschland/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://dev.adv-smart.de/styles/dev/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://adv-smart.de/test-vt/lod2/deutschland/out/red_root.json',

colorWall: '#f2f2f2',

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

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=>`Layer: ${feature.layer.id}<br>${Object.entries(feature.properties).map(entry=>`<b>${entry[0]}:</b>${entry[1]}`).join('<br>\n')}

`).join('<hr>\n')

} else {

infoElement.innerHTML = "Klicke auf ein Gebaeude";

}

})

</script>

</body>

</html>

Cesium

CesiumJS ist eine JavaScript Bibliothek zum Erstellen von 3D-Globen und 2D-Karten im Browser. Generell steht der Viewer als Open-Source Software zur Verfügung und kann über eine eigene Instanz bereitgestellt werden. Es wird aber auch ein kommerzieller Dienst angeboten, welcher kostenpflichtig zusätzliche Ressourcen wie Hintergrundkarten u.a. bereitstellt.

Zum Beispiel-Viewer

HTML-Code (Cesium-Dokumentation):

<html lang="en">

<head>

<meta charset="utf-8">

<!-- Laden der benötigen Javascript uns 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'; Der Token wird nur benötigt, wenn Cesium-Resourcen genutzt werden sollen -->

<!-- Hintergrundkarte für au�erhalb von Deutschland-->

var osm= new Cesium.OpenStreetMapImageryProvider({

url : '//a.tile.openstreetmap.org/'

});

<!-- Initialisiern des Cesium-Viewer-->

var viewer = new Cesium.Viewer('cesiumContainer',{

imageryProvider : osm

});

<!-- 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://adv-smart.de/test-vt/lod2/cesium/out/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>

Copyright © 2023 basemap.de
basemap.de
menu