高德地图web绘制省、市、区边界线和面积图-蒲公英云

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

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

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

高德地图官方API

图例在这里插入图片描述

总结要点

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

初始化地图

let map = new AMap.Map(‘container’, {

    resizeEnable: true,
    center: [116.30946, 39.937629],
    zoom: 3//缩放级别
});

引用同步插件

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

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

//说明 district 参数对象是由第四步引用插件是创建

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

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

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

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

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