高德地图绘制区域边界线

在地图开发中，经常需要对某个区域进行边界线的绘制，以起到区分和突出强调的作用。通过高德JS API中的行政区查询服务（AMap.DistrictSearch）可便捷的拿到目标区域的边界坐标点进行渲染。

以广东省为目标区域，绘制边界的效果图如下

高亮广东省区域.png

一、获取目标区域的边界坐标点

通过高德AMap.DistrictSearch这个插件获取边界坐标点，可选参数见下表

AMap.DistrictSearch.png

    //创建地图对象
    this.map = new AMap.Map('map', {
        center: [113.280637, 23.125178],
        resizeEnable: true,
        zoom: 7,
    })
   //获取边界坐标点
    AMap.plugin('AMap.DistrictSearch', () => {
        var districtSearch = new AMap.DistrictSearch({
        // 关键字对应的行政区级别，共有5种级别
        level: 'province',
        //  是否显示下级行政区级数，1表示返回下一级行政区
        subdistrict: 0,
       // 返回行政区边界坐标点
        extensions: 'all',
      })

        // 搜索所有省/直辖市信息
        districtSearch.search('广东', (status, result) => {
          // 查询成功时，result即为对应的行政区信息
          this.handlePolygon(result)
        })
    })

二、绘制边界

通过AMap.Polygon对象在地图上绘制多边形，可以设置填充颜色、描边颜色、轮廓线样式等属性。

      handlePolygon(result) {
          let bounds = result.districtList[0].boundaries
          if (bounds) {
            for (let i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            let polygon = new AMap.Polygon({
              map: this.map,    // 指定地图对象
              strokeWeight: 1,    // 轮廓线宽度
              path: bounds[i],     //轮廓线的节点坐标数组
              fillOpacity: 0.15,     //透明度
              fillColor: '#256edc',     //填充颜色
              strokeColor: '#256edc',    //线条颜色
            })
            polygon.on('click', (e) => {
            // 点击绘制的区域时执行其他交互
                ......
            })
          }
          // 地图自适应
          this.map.setFitView()
      }