Here: https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/
It's possible to draw 3D buildings by taking advantage of extrusions, however the 3D vector layer source is the Mapbox's underlying extract of the OSM:
The 'building' layer in the mapbox-streets vector source contains building-height. data from OpenStreetMap.
What I'm looking for is to add my custom vector layer (Geojson, WFS) which contains Polygons with Z values (3D)/feature property called height. Thus (in case of GL JS, same exists for Android) to extend this example:
https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/
To support extrusions or whatever it takes to draw 3D buildings in Mapbox GL JS.
I tried 2 approaches:
- Simply add to the draw polygon from GeoJson example features with Z values - this is not working. Probably because from graphical perspective there is no automatic conversion from 2D polygon on the surface to 3D Box (like this is why there is a term called extrusions).
- So then I tried to add vector source layer to the extrusion example. It seems that the requirements are: (a)
'type': 'fill-extrusion', (b) Feature property'height', (c) Addpaintattribute with the'fill-extrusion-X'sub attributes. This is the complete code - and this also not works. Where is my mistake?
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add a GeoJSON polygon</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'my_token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [10.858185165380299, 48.364322957423497],
zoom: 18
});
map.on('load', function () {
map.addLayer({
'id': 'maine',
'type': 'fill-extrusion',
'minzoom': 15,
'source': {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {
'id': 1,
'height': 100
},
'geometry': {
'type': 'Polygon',
'coordinates': [[
[ 10.857372608433057, 48.364322957423497],
[ 10.858185165380299, 48.364322957423497],
[ 10.858171844774606, 48.363982227426746],
[ 10.857409240098711, 48.363991077585354],
[ 10.857372608433057, 48.364322957423497]]]
}
}
},
'paint': {
'fill-extrusion-color': '#aaa',
'fill-extrusion-height': [
"interpolate",
["linear"],
["zoom"],
15, 0,
15.05,
["get", "height"]
],
'fill-extrusion-opacity': .6,
'fill-color': '#088',
'fill-opacity': 0.8
}
});
});
</script>
</body>
</html>
