mapbox draws polygons

1. To achieve the effect,
please ignore the mosaic
insert image description here

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

Guess you like

Origin blog.csdn.net/qq_43840793/article/details/131770354
Recommended