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

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

高德地图官方API

图例

总结要点

1. 申请高德地图的key 用于后边web调用 高德地图key申请
2. 引用
3. 初始化地图

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

4. 引用同步插件

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

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

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

6. 绘制所需要的区域位置 [很重要]

	/**
	 * 参数说明
	 * 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();//地图自适应
		}
	}

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

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