Mapbox GL development tutorial (12): loading surface layer data

–mapbox-gl It's open source 、 be based on webgl Front end map class library of Technology –
In the development of map application , Loading face data , Display area 、 Scope and other information , stay mapbox-gl Corresponding to face （fill） 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 to geojson data source ,id by 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]
]
]
}
}
});
//  Add face layer , Use maine Data source 
map.addLayer({
    
'id': 'maine',
'type': 'fill',
'source': 'maine', 
'layout': {
    },
'paint': {
    
// Fill color 
'fill-color': '#0080ff', 
// Transparency settings 
'fill-opacity': 0.5
}
});

Face layer color settings , The corresponding parameters can use rgba form ：
“fill-color”: “rgba(32, 62, 122, 1)”
Last parameter 1 Also set the transparency , Priority is higher than fill-opacity low .

Face layer attribute setting link ：
https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#fill

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/