mapbox-gl開發(fā)教程（十一）：加載線圖層
--mapbox-gl是一個開源、基于webgl技術(shù)的前端地圖類庫--
在地圖應(yīng)用的開發(fā)中，加載線數(shù)據(jù)，顯示道路等信息，在mapbox-gl對應(yīng)的是線（line）圖層，下邊講一下如何在mapbox-gl加載線圖層數(shù)據(jù)。mapbox-gl加載矢量數(shù)據(jù)，通過兩種數(shù)據(jù)源，一種是矢量切片（vector），另一種是geojson數(shù)據(jù)，數(shù)據(jù)源加載完成后，再進行圖層的設(shè)置。
以geojson數(shù)據(jù)為例：//添加數(shù)據(jù)源，第一個參數(shù)為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]
]
}
}
});
//添加線圖層，數(shù)據(jù)源id對應(yīng)以上
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
//線連接處的樣式
'line-join': 'round',
//線結(jié)束處的樣式
'line-cap': 'round'
},
'paint': {
//線的顏色
'line-color': '#888',
//線的寬度
'line-width': 8,
//線的透明度
'line-opacity':1.0
}
});
線圖層屬性設(shè)置鏈接：https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line
mapbox-gl開發(fā)是講述如何從基礎(chǔ)到實際應(yīng)用進行地圖開發(fā)的教程，不定時進行持續(xù)進行更新，如有疑問，公眾號留言進行討論。
mapbox-gl官網(wǎng)地址：https://docs.mapbox.com/mapbox-gl-js/guides/
