mapbox-gl开发教程（十三）：加载三维面图层（白模）

在地图应用的开发中，加载带高度信息的面数据，显示简单建筑（白模）等效果，在mapbox-gl对应的是填充挤压（fill-extrusion）图层，下边讲一下如何在mapbox-gl加载fill-extrusion图层。

mapbox-gl加载矢量数据，通过两种数据源，一种是矢量切片（vector），另一种是geojson数据，数据源加载完成后，再进行图层的设置。
以geojson数据为例：

//添加geojson数据源，数据中必须有高度的字符，并且是数字类型的
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 ] ] ] } }]}
});
//添加三维建筑图层，id对应以上

map.addLayer({
'id': 'room-extrusion',
'type': 'fill-extrusion',
'source': 'buildingdata',
'paint': {
// 设置填充颜色
'fill-extrusion-color': '#fff000',
//从属性中获得高度，这里用的是height字段
'fill-extrusion-height': ['get', 'height'],  
// 透明度设置
'fill-extrusion-opacity': 0.5
}
});

填充挤压（fill-extrusion）图层属性设置链接：
https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill-extrusion

mapbox-gl开发是讲述如何从基础到实际应用进行地图开发的教程，不定时进行持续进行更新，如有疑问，公众号留言进行讨论，公众号：地理信息技术杂谈。
mapbox-gl官网地址：https://docs.mapbox.com/mapbox-gl-js/guides/