高德地图web绘制省、市、区边界线和面积图

灰太狼 2023-06-15 07:26 48阅读 0赞

## 高德地图web绘制省、市、区 边界线和面积图 ##

[高德地图官方API][API]

图例 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbGUwOQ_size_16_color_FFFFFF_t_70]

**总结要点**

1.  申请高德地图的key 用于后边web调用 [高德地图key申请][key]
2.  引用 `<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.DistrictSearch"></script>`
3.  初始化地图

let map = new AMap.Map('container', { 
            resizeEnable: true,
            center: [116.30946, 39.937629],
            zoom: 3//缩放级别
        });

1.  引用同步插件

//行政区划查询
        var opts = { 
            subdistrict: 1,   //返回下一级行政区
            showbiz:false  //最后一级返回街道信息
        };
       let district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用

1.  获取当前需要绘制的区域数据

//说明 district 参数对象是由 第四步引用插件是创建
    		district.setLevel("province"); //行政区级别
    		district.setExtensions('all');
    		//行政区查询
    		//按照adcode进行查询可以保证数据返回的唯一性
    		let cityCode = "610400";//注意这个参数必须是字符串,要不然显示不出来的
    		district.search(cityCode, function (status, result) { 
    			if (status === 'complete') { 
    				// 绘制区域
    				getData(result.districtList[0]);
    			}
    		});

1.  绘制所需要的区域位置 **\[很重要\]**

/** * 参数说明 * data- 数据要由官方同步获取,以免后边绘制地图参数发生变化,实例中由步奏 5中获取到的result参数中传来 */
    	 let polygons = [];//绘制区域面积图的数组
    	function getData(data) { 
    		var bounds = data.boundaries;
    		if (bounds) { 
    			for (var i = 0, l = bounds.length; i < l; i++) { 
    				var polygon = new AMap.Polygon({ 
    					map: map,
    					strokeWeight: 1,
    					strokeColor: '#0091ea',
    					fillColor: '#80d8ff',
    					fillOpacity: 0.2,
    					path: bounds[i]
    				});
    				polygons.push(polygon);
    			}
    			map.setFitView();//地图自适应
    		}
    	}

1.  擦除已经绘制的区域面积图

/** * 步奏6中的polygons[] 就是我们绘制的区域数据,去过不需要的话,可以用for循环设置为空,就清除可 */
    		for (var i = 0, l = polygons.length; i < l; i++) { 
    			polygons[i].setMap(null);
    		}

[API]: https://lbs.amap.com/api/javascript-api/guide/services/district-search
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbGUwOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191121145000920.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbGUwOQ==,size_16,color_FFFFFF,t_70
[key]: https://lbs.amap.com/dev/key/app