<html lang="en">
<head>
<meta charset="utf-8">
<title> LoD2 Gebaeude </title>
<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=>`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>
