Mapbox GL development tutorial (13): loading 3D surface layers (white mold)

In the development of map application , Load face data with height information , Show simple buildings （ White mold ） Equal effect , stay mapbox-gl The corresponding is filling extrusion （fill-extrusion） Layers , Next, let's talk about how to mapbox-gl load fill-extrusion Layers .

mapbox-gl Load vector data , Through two data sources , One is vector slicing （vector）, The other is geojson data , After the data source is loaded , Then set the layer .
With geojson Take the data ：

// add to geojson data source , There must be high characters in the data , And it's numeric 
map.addSource('buildingdata', {
    
'type': 'geojson',
'data':
{
     
features: [
{
     "type": "Feature", "properties": {
     "height": 54}, "geometry": {
     "type": "Polygon", "coordinates": [ [ [ 116.348081212490996, 39.883840939490099 ], [ 116.34796343001851, 39.883841134653565 ], [ 116.34802774164497, 39.883314167283331 ], [ 116.349162742239557, 39.883394622206509 ], [ 116.349173458383987, 39.883328746904887 ], [ 116.349591060991287, 39.883360995629666 ], [ 116.349526739496355, 39.883945585669011 ], [ 116.348980645360754, 39.883905315828763 ], [ 116.348959214223726, 39.884028833222999 ], [ 116.348070488308053, 39.883972671819372 ], [ 116.348081212490996, 39.883840939490099 ] ] ] } }]}
});
// Add a 3D building layer ,id Corresponding to the above 

map.addLayer({
    
'id': 'room-extrusion',
'type': 'fill-extrusion',
'source': 'buildingdata',
'paint': {
    
//  Set fill color 
'fill-extrusion-color': '#fff000',
// Get height from attributes , It's used here height Field 
'fill-extrusion-height': ['get', 'height'],  
//  Transparency settings 
'fill-extrusion-opacity': 0.5
}
});

Filling extrusion （fill-extrusion） Layer attribute setting link ：
https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill-extrusion

mapbox-gl Development is a tutorial about how to develop maps from foundation to practical application , Update continuously from time to time , If you have any questions , Leave a message on official account for discussion , official account ： Discussion on Geographic Information Technology .
mapbox-gl Official website address ：https://docs.mapbox.com/mapbox-gl-js/guides/