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/