mapbox绘制多边形

1、实现效果
请忽略马赛克
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],......经纬度组......]]]
              }
     }
    ]
}

你可能感兴趣的:(mapbox,mapbox)