高德地图JS API加载行政区边界AMap.Polygon

🤖 作者简介：水煮白菜王，一位资深前端劝退师 👻
👀 文章专栏：高德 AMap 专栏，记录一下平时在博客写作中，总结出的一些开发技巧✍。
感谢支持💕💕💕

关联文章：
高德地图 JS API DistrictExplore 区划浏览 r
高德地图 JS API AMap.MouseTool 绘制

目录

• 高德地图 API 加载行政区边界 AMap.Polygon
• • 前言
  • AMap.Polygon
  • AMap.DistrictSearch
  • 运行示例
  • 实现步骤
  • • 1. 调用 AMap.DistrictSearch 获取边界数据
    • 2. 调用 AMap.Polygon 加载行政区边界
  • 完整代码
  • 更多

高德地图 API 加载行政区边界 AMap.Polygon

前言

在使用高德地图 JS API 开发过程中，对其地图所呈现的地区加上边界及区域面，一般来讲采用 AMap.Polygon 进行渲染，对 API 可谓是即拿即用，快速开发。

AMap.Polygon

在 AMap 文档说明中，AMap.Polygon 属于矢量图形，用于在地图上 绘制线、面 等矢量地图要素的类型，AMap.Polygon 构造多边形对象，通过 PolygonOptions 指定多边形样式。AMap 的矢量图形相关的 API 可以呈现很多图形体的绘制和编辑。

new AMap.Polygon(opts: PolygonOptions)

参数说明

opts (PolygonOptions)

首先使用 AMap.Polygon 之前需要先获取其行政区划边界，调用 行政区查询 服务（AMap.DistrictSearch）的 API。

AMap.DistrictSearch

AMap.DistrictSearch 提供行政区信息的查询，使用该服务可以获取到行政区域的区号、城市编码、中心点、边界、下辖区域等详细信息，为基于行政区域的地图功能提供支持。在这里我们只实现区域边界，关于 AMap.DistrictSearch 的其他参数、成员函数先不过多阐述。可以先移步阅读 AMap.DistrictSearch 官方文档👀

官方示例

AMap.plugin('AMap.DistrictSearch', function () {
  var districtSearch = new AMap.DistrictSearch({
    
    level: 'country',
    
    subdistrict: 1
  })
  
  districtSearch.search('中国', function(status, result) {
    
  })
})

运行示例

实现步骤

1. 调用 AMap.DistrictSearch 获取边界数据

注意使用 AMap.DistrictSearch 前，检查是否已经引入AMap.DistrictSearch 插件 , 并且 AMap.DistrictSearch 必须配置高德密钥 securityJsCode 才能成功调用。

调用 AMap.DistrictSearch创建其实例，并查询其区划编码，查询接口支持区划名称（北京、南京），编码（110000、320100）。注意这里的区划编码是 6 位，如果要 加载市级 ，则在构建 DistrictSearch 实例配置 参数 level: "city"，对其进行查询传入区划信息（编码或名称），对查询结果 result 获取多边形数据boundaries。
所以在拿到边界数据之前，我们只需要关注传入查询的参数。即行政区级别的类型 和 所传区划主键

!-- Vue 2 Code -->

district = new window.AMap.DistrictSearch({
    subdistrict: 0, 
    extensions: "all", 
    level: "city", 
});

let code = "320100"; 

district.search(code, (status, result) => {
    console.log(result);
    var bounds = result.districtList[0].boundaries;
    if (bounds) {
        
    }
});

2. 调用 AMap.Polygon 加载行政区边界

拿到边界数据后，调用 AMap.Polygon，其调整指定的多边形样式。
对于 AMap.Polygon 更多指定多边形样式的配置其他成员函数，可以先移步阅读 AMap.Polygon 官方文档👀

这里注意要成功拿到多边形数据，再对其执行加载 AMap.Polygon

!-- Vue 2 Code -->

district.search(code, (status, result) => {
  console.log(result);
  if(result.info == 'OK') console.log('查询成功：'+result);
  var bounds = result.districtList[0].boundaries;
  if (bounds) {
    
    for (var i = 0; i  bounds.length; i += 1) {
      
      bounds[i] = [bounds[i]];
    }
    polygon = new window.AMap.Polygon({
      path: bounds, 
      strokeWeight: 2, 
      strokeColor: "#0091ea", 
      strokeOpacity: "1", 
      fillOpacity: 0.1, 
      fillColor: "#80d8ff", 
    });
    map.add(polygon);
    map.setFitView(polygon); 
  }
});

完整代码

!-- Vue 2 Code -->
!--
 * @Author: baicaiKing
 * @Date: 2024-09-10 18:04:31
 * @LastEditors: Do not edit
 * @LastEditTime: 2024-09-10 20:16:44
 * @FilePath: code2.0srcviewscomponentsdistrict.vue
 * @Description: Fill in the instructions here
-->
template>
  !-- 行政区边界-->
  div id="index" ref="appRef">
    !-- 地图 -->
    div id="container" ref="mapRef">/div>
  /div>
/template>
  script>
var map; 
var district = null;
var polygon;
export default {
  name: "componentsMap",
  data() {
    return {
      timing: null,
      adcode: 100000,
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => this.initMap());
  },
  beforeDestroy() {
    map?.destroy();
    map = null;
  },
  methods: {
    
    initMap() {
      map = new window.AMap.Map("container", {
        terrain: false, 
        showBuildingBlock: false, 
        
        scrollWheel: true, 
        dragEnable: true, 
        showIndoorMap: false,
        doubleClickZoom: false, 
        
      });
      this.setDistrict();
    },
    
    setDistrict() {
      
      district = new window.AMap.DistrictSearch({
        subdistrict: 0, 
        extensions: "all", 
        level: "city", 
      });
      
      let code = "320100"; 
      
      district.search(code, (status, result) => {
        console.log(result);
        if(result.info == 'OK') console.log('查询成功：'+result);
        var bounds = result.districtList[0].boundaries;
        if (bounds) {
          
          for (var i = 0; i  bounds.length; i += 1) {
            
            bounds[i] = [bounds[i]];
          }
          polygon = new window.AMap.Polygon({
            path: bounds, 
            strokeWeight: 2, 
            strokeColor: "#0091ea", 
            strokeOpacity: "1", 
            fillOpacity: 0.1, 
            fillColor: "#80d8ff", 
          });
          map.add(polygon);
          map.setFitView(polygon); 
        }
      });
    },
  },
};
/script>
  style lang="scss"  scoped>
#index {
  width: 1920px;
  height: 1080px;
  color: #ffffff;
  overflow: hidden;
  #container {
    width: 1920px;
    height: 1080px;
    z-index: 100;
  }
}
/style>
      
      

更多

在 AMap.Polygon 构造多边形对象的其他成员函数, 还有很多，比如移入移出等
如果想要深入层级实现关于 polygon 效果，AMap 的矢量图形相关的 API 可以呈现很多图形体的绘制和编辑👀，

polygon.on("mouseover", () => {
  polygon.setOptions({
    
    fillOpacity: 0.7, 
    fillColor: "#80d8ff",
  });
});

polygon.on("mouseout", () => {
  polygon.setOptions({
    fillOpacity: 0.1,
    fillColor: "#80d8ff",
  });
});

如果对加载其行政区边界包含其下子边界这种，可以考虑采用geojson 数据，使用 Map.GeoJSON 函数，最终也是通过 AMap.Polygon 进行呈现的，注意这里的 json 数据源要有丰富度存在子级边界数据。

new AMap.GeoJSON(opts: GeoJSONOptions)

如果你觉得这篇文章对你有帮助，请点赞 👍、收藏 👏 并关注我！👀