1、实现效果
请忽略马赛克
2、实现思路
绘制一个填充的多边形,再描个边框。
3、实现代码
绘制多边形函数
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
}
});
},
调用
map.on('load', () => {
this.drawPolygon();
})
备注:
这里的feature是一个json文件,已经上传服务器,根据url引入,内容格式如下
{"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],......经纬度组......]]]
}
}
]
}