🤖 作者简介：水煮白菜王 ，一位资深前端劝退师 👻

👀 文章专栏： 高德AMap专栏 ，记录一下平时在博客写作中，总结出的一些开发技巧✍。

感谢支持💕💕💕

关联文章：

高德地图JS API 开发——区划浏览DistrictExplorer

目录

高德地图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可以呈现很多图形体的绘制和编辑。

<code>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实例配置参数<code>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); //视口自适应

}

});

完整代码

<code><!-- 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">code>

<!-- 地图 -->

<div id="container" ref="mapRef"></div>code>

</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>code>

#index { -- -->

width: 1920px;

height: 1080px;

color: #ffffff;

overflow: hidden;

#container {

width: 1920px;

height: 1080px;

z-index: 100;

}

}

</style>

更多