Mapbox GL development tutorial (11): loading line layers

–mapbox-gl It's open source 、 be based on webgl Front end map class library of Technology –
In the development of map application , Load line data , Display information such as roads , stay mapbox-gl Corresponding to the line （line） Layers , Next, let's talk about how to mapbox-gl Load line layer data .
mapbox-gl Load vector data , Through two data sources , One is vector slicing （vector）, The other is geojson data , After the data source is loaded , Then set the layer .
With geojson Take the data ：
// Add data sources , The first parameter is zero 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]
]
}
}
});
// Add line layer , data source id Corresponding to the above 
map.addLayer({
    
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
    
// Styles at line connections 
'line-join': 'round',
// The style at the end of the line 
'line-cap': 'round'
},
'paint': {
    
// Line color 
'line-color': '#888',
// The width of the line 
'line-width': 8,
// The transparency of the line 
'line-opacity':1.0
}
});

Line layer attribute setting link ：
https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line
mapbox-gl Development is a tutorial about how to develop maps from foundation to practical application , Update continuously from time to time , If you have any questions , Leave a message on official account for discussion .
mapbox-gl Official website address ：
https://docs.mapbox.com/mapbox-gl-js/guides/