mapbox绘制多边形

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],......经纬度组......]]]
              }
     }
    ]
}