mapbox-gl开发教程（十一）：加载线图层

–mapbox-gl是一个开源、基于webgl技术的前端地图类库–
在地图应用的开发中，加载线数据，显示道路等信息，在mapbox-gl对应的是线（line）图层，下边讲一下如何在mapbox-gl加载线图层数据。
mapbox-gl加载矢量数据，通过两种数据源，一种是矢量切片（vector），另一种是geojson数据，数据源加载完成后，再进行图层的设置。
以geojson数据为例：
//添加数据源，第一个参数为id

map.addSource('route', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[122.483696, 37.833818],
[122.483482, 37.833174],
[122.483396, 37.8327],
[122.483568, 37.832056],
[122.48404, 37.831141],
[122.48404, 37.830497],
[122.483482, 37.82992],
[122.483568, 37.829548],
[122.48507, 37.829446],
[122.4861, 37.828802]
]
}
}
});
//添加线图层，数据源id对应以上
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
//线连接处的样式
'line-join': 'round',
//线结束处的样式
'line-cap': 'round'
},
'paint': {
//线的颜色
'line-color': '#888',
//线的宽度
'line-width': 8,
//线的透明度
'line-opacity':1.0
}
});

线图层属性设置链接：
https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line
mapbox-gl开发是讲述如何从基础到实际应用进行地图开发的教程，不定时进行持续进行更新，如有疑问，公众号留言进行讨论。
mapbox-gl官网地址：
https://docs.mapbox.com/mapbox-gl-js/guides/