1. To achieve the effect,
please ignore the mosaic
2. Implementation ideas
Draw a filled polygon, and then draw a border.
3. Realize code
drawing polygon function
drawPolygon() {
map.addSource('maine', {
'type': 'geojson',
'data': 'https://asc-test1.oss-cn-beijing.aliyuncs.com/2023/07/05/45f6bd80f2f34d79b3e457b31ec5df00tazhou1.json'
});
//新增图层
map.addLayer({
'id': 'maine',
'type': 'fill',
'source': 'maine',
'layout': {
},
'paint': {
'fill-color': '#31C2FF',
'fill-opacity': 0.1
}
});
// 添加轮廓
map.addLayer({
'id': 'outline',
'type': 'line',
'source': 'maine',
'layout': {
},
'paint': {
'line-color': '#31C2FF',
'line-width': 2,
'line-opacity':0.5
}
});
},
transfer
map.on('load', () => {
this.drawPolygon();
})
Remarks:
The feature here is a json file, which has been uploaded to the server and imported according to the url. The content format is as follows
{
"type":"FeatureCollection",
"features":[{
"type":"Feature",
"properties":{
"adcode":321200,
"name":"XXXX",
"center":[119.915176,32.484882],
"centroid":[120.060841,32.571433],"childrenNum":6,"level":"city","acroutes":[100000,320000],
"parent":{
"adcode":320000}},
"geometry":{
"type":"MultiPolygon",
"coordinates":[[[[120.356193,32.130746],......经纬度组......]]]
}
}
]
}