mapbox-gl开发教程（十二）：加载面图层数据

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

在地图应用的开发中，加载面数据，显示区域、范围等信息，在mapbox-gl对应的是面（fill）图层，下边讲一下如何在mapbox-gl加载线图层数据。

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

以geojson数据为例：

//添加geojson数据源，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的数据源map.addLayer({'id': 'maine','type': 'fill','source': 'maine', 'layout': {},'paint': {//填充颜色
'fill-color': '#0080ff', //透明度设置
'fill-opacity': 0.5}});

面图层颜色设置，对应参数可以使用rgba形式：
"fill-color": "rgba(32, 62, 122, 1)"最后的参数1同样是设置透明度，优先级要比fill-opacity低。

面图层属性设置链接：https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill

mapbox-gl开发是讲述如何从基础到实际应用进行地图开发的教程，不定时进行持续进行更新，如有疑问，公众号留言进行讨论。