高德地图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({
    // 关键字对应的行政区级别，country表示国家
    level: 'country',
    //  显示下级行政区级数，1表示返回下一级行政区
    subdistrict: 1
  })
  // 搜索所有省/直辖市信息
  districtSearch.search('中国', function(status, result) {
    // 查询成功时，result即为对应的行政区信息
  })
})
// 除了获取所有省份/直辖市信息外，您可以通过修改level和subdistrict并配合search传入对应keyword查询对应信息。

运行示例

实现步骤

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

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

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

<!-- Vue 2 Code -->
// 加载DistrictSearch
district = new window.AMap.DistrictSearch({
    subdistrict: 0, //获取边界不需要返回下级行政区
    extensions: "all", //返回行政区边界坐标组等具体信息
    level: "city", //查询行政级别为 国country 市city 区县district 商圈biz_area
});
// district.setLevel("district"); //  设置级别 即同上level
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) {
    //生成行政区划polygon
    for (var i = 0; i < bounds.length; i += 1) {
      //构造MultiPolygon的path
      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.0\src\views\components\district.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, // 不显示3D楼块
        // showLabel: false, // 取消地图层标注
        scrollWheel: true, // 开启缩放
        dragEnable: true, // 开启鼠标拖动
        showIndoorMap: false,
        doubleClickZoom: false, // 禁止双击
        // resizeEnable: true, //是否监控地图容器尺寸变化
      });
      this.setDistrict();
    },
    // 加载行政区边界
    setDistrict() {
      // 加载DistrictSearch
      district = new window.AMap.DistrictSearch({
        subdistrict: 0, //获取边界不需要返回下级行政区
        extensions: "all", //返回行政区边界坐标组等具体信息
        level: "city", //查询行政级别为 国country 市city 区县district 商圈biz_area
      });
      // district.setLevel("district"); //  设置级别 即同上level
      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) {
          //生成行政区划polygon
          for (var i = 0; i < bounds.length; i += 1) {
            //构造MultiPolygon的path
            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)

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