--mapbox-gl是一個(gè)開源、基于webgl技術(shù)的前端地圖類庫(kù)--

在地圖應(yīng)用的開發(fā)中，加載帶高度信息的面數(shù)據(jù)，顯示簡(jiǎn)單建筑（白模）等效果，在mapbox-gl對(duì)應(yīng)的是填充擠壓（fill-extrusion）圖層，下邊講一下如何在mapbox-gl加載fill-extrusion圖層。

mapbox-gl加載矢量數(shù)據(jù)，通過兩種數(shù)據(jù)源，一種是矢量切片（vector），另一種是geojson數(shù)據(jù)，數(shù)據(jù)源加載完成后，再進(jìn)行圖層的設(shè)置。

以geojson數(shù)據(jù)為例：
//添加geojson數(shù)據(jù)源，數(shù)據(jù)中必須有高度的字符，并且是數(shù)字類型的

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對(duì)應(yīng)以上

map.addLayer({'id': 'room-extrusion',

'type': 'fill-extrusion',

'source': 'buildingdata',

'paint':

{// 設(shè)置填充顏色'

fill-extrusion-color': '#fff000',//從屬性中獲得高度，這里用的是height字段'

fill-extrusion-height': ['get', 'height'],??// 透明度設(shè)置

'fill-extrusion-opacity': 0.5}});

填充擠壓（fill-extrusion）圖層屬性設(shè)置鏈接：

https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill-extrusion

mapbox-gl開發(fā)是講述如何從基礎(chǔ)到實(shí)際應(yīng)用進(jìn)行地圖開發(fā)的教程，不定時(shí)進(jìn)行持續(xù)進(jìn)行更新，如有疑問，公眾號(hào)留言進(jìn)行討論。