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

--mapbox-gl是一个开源、基于webgl技术的前端地图类库--

在地图应用的开发中，加载带高度信息的面数据，显示简单建筑（白模）等效果，在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开发是讲述如何从基础到实际应用进行地图开发的教程，不定时进行持续进行更新，如有疑问，公众号留言进行讨论。