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