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

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

关联文章：
高德地图JS API 普通点标记Marker
高德地图JS API 海量点标记LabelMarker
高德地图JS API 区划浏览DistrictExplorer
高德地图JS API 加载行政区边界AMap.Polygon
高德地图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)

属性	类型	描述
opts.path	Array<LngLat> I Array<Array<LngLat>> I Array<Array<Array<LngLat>>>	多多边形轮廓线的节点坐标数组。 支持 单个普通多边形({Array })，单个带孔多边形({Array})，多个带孔多边形({Array<Array>})
opts.zIndex	number	多边形覆盖物的叠加顺序。地图上存在多个多边形覆盖物叠加时，通过该属性使级别较高的多边形覆盖物在上层显示。默认值为 10
opts.bubble	boolean	是否将覆盖物的鼠标或 touch 事件冒泡到地图上（自v1.3 新增）。默认值为 false。
opts.cursor	string?	指定鼠标悬停时的鼠标样式， 自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor
opts.strokeColor	string	线条颜色，使用 16 进制颜色代码赋值。默认值为 #00D3FC。
opts.strokeOpacity	number	轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.9
opts.strokeWeight	number	轮廓线宽度。默认值为 2。
opts.fillColor	string	多边形填充颜色，使用 16 进制颜色代码赋值。默认值为 #00B2D5。
opts.fillOpacity	number	多边形填充透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.5
opts.draggable	boolean	设置多边形是否可拖拽移动，默认为 false。
opts.height	number	设置 polygon 是否离地绘制，默认值为0 。大于0时离地绘制，此时平面高度等于 height 属性值加 polygon 质心点绝对海拔高度值，可以通过getPlaneHeight() 方法获取当前平面高度值（此属性适用于 JSAPI v2.1Beta及以上的版本）。，默认值为 0。
opts.extrusionHeight	number	设置多边形是否拉伸为的立面体高度值，默认值为 0。
opts.wallColor	(Array<String> I String)	polygon 立面体侧面颜色，支持 rgba、rgb、十六进制等。默认值为 #00D3FC。
opts.roofColor	(Array<String> I String)	polygon 立面体侧面颜色，支持 rgba、rgb、十六进制等。默认值为 #00B2D5。
opts.extData	object?	用户自定义属性，支持JavaScript API任意数据类型，如Polygon的id等。
opts.strokeStyle	("solid" I "dashed")	轮廓线样式，实线:solid，虚线:dashed
opts.strokeDasharray	Array<number>?	勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在ie9+浏览器有效 取值： 实线： [0,0,0] 虚线： [10,10] ， [10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线 点画线： [10,2,10] ， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实线和10个像素的空白 （如此反复）组成的虚线

首先使用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 -->// 加载DistrictSearchdistrict = new window.AMap.DistrictSearch({    subdistrict: 0, //获取边界不需要返回下级行政区    extensions: "all", //返回行政区边界坐标组等具体信息    level: "city", //查询行政级别为 国country 市city 区县district 商圈biz_area});// district.setLevel("district"); //  设置级别 即同上levellet 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)

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