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

在地圖應(yīng)用的開發(fā)中，加載面數(shù)據(jù)，顯示區(qū)域、范圍等信息，在mapbox-gl對(duì)應(yīng)的是面（fill）圖層，下邊講一下如何在mapbox-gl加載線圖層數(shù)據(jù)。

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

以geojson數(shù)據(jù)為例：

//添加geojson數(shù)據(jù)源，id為maine
map.addSource('maine', {'type': 'geojson','data': {'type': 'Feature','geometry': {'type': 'Polygon','coordinates': [[[137.13734, 45.13745],[136.96466, 44.8097],[138.03252, 44.3252],[139.06, 43.98],[130.11617, 43.68405],[130.64573, 43.09008],[130.75102, 43.08003],[130.79761, 43.21973],[130.98176, 43.36789],[130.94416, 43.46633],[131.08482, 45.30524],[130.66002, 45.46022],[130.30495, 45.91479],[130.00014, 46.69317],[139.23708, 47.44777],[138.90478, 47.18479],[138.2343, 47.35462],[137.79035, 47.06624],[137.79141, 45.70258],[137.13734, 45.13745]]]}}});

// 添加面圖層，使用maine的數(shù)據(jù)源map.addLayer({'id': 'maine','type': 'fill','source': 'maine',?'layout': {},'paint': {//填充顏色
'fill-color': '#0080ff',?//透明度設(shè)置
'fill-opacity': 0.5}});

面圖層顏色設(shè)置，對(duì)應(yīng)參數(shù)可以使用rgba形式：
"fill-color": "rgba(32, 62, 122, 1)"最后的參數(shù)1同樣是設(shè)置透明度，優(yōu)先級(jí)要比f(wàn)ill-opacity低。

面圖層屬性設(shè)置鏈接：https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill

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