高德地图 js API v1.4.10 版本正式发布的简易行政区图层。为了满足基于行政区块的数据可视化、行政区边界展示等开发需求,可以通过AMap.DistrictLayer插件提供了一组简易行政区图层
包括:
世界简易行政区图层 AMap.DistrictLayer.World
国家简易行政区图层 AMap.DistrictLayer.Country
省市简易行政区图层 AMap.DistrictLayer.Province
本章只讲解Province的使用方式 ,其他两个api 用法大致相同,区别只在个别属性上
引入插件
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=cccc&plugin=AMap.DistrictLayer"></script>
全部代码展示 (其中xxxx 高德的秘钥,cccc是高德的key,需要自己申请)
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"
/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>map</title>
<style>
body,
html,
#container {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script>
window._AMapSecurityConfig = {
securityJsCode: "xxxx",
};
</script>
<script
language="javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=cccc&plugin=AMap.DistrictLayer"
></script>
<script language="javascript">
const map = (window.map = new AMap.Map("container", {
center: [118.035441, 36.323541],
viewMode: "3D",
zoom: 7,
pitch: 50,
}));
const disProvince = new AMap.DistrictLayer.Province({
adcode: [370000],
opacity :0.8,
depth: 1,
styles: {
fill: function (properties) {
// properties为可用于做样式映射的字段,包含
// NAME_CHN:中文名称
// adcode_pro
// adcode_cit
// adcode
var adcode = properties.adcode;
return getColorByAdcode(adcode);
},
"province-stroke": "cornflowerblue",
"city-stroke": "white", // 中国地级市边界
"county-stroke": "rgba(255,255,255,0.5)", // 中国区县边界
},
});
// 设置图层对应的map对象
disProvince.setMap(map);
// 颜色辅助方法 为了是改变各个版块的颜色 方便区分
var colors = {};
var getColorByAdcode = function (adcode) {
if (!colors[adcode]) {
var gb = Math.random() * 155 + 50;
colors[adcode] = "rgb(" + gb + "," + gb + ",255)";
}
return colors[adcode];
};
</script>
</html>
AMap.DistrictLayer属性讲解
- adcode:行政区的编码(数组类型,可以是多个城市) 城市编码可点击下载 adcode与省市行政区对照表
- SOC :设定显示的国家 SOC 国家代码(该属性用于AMap.DistrictLayer.Country)指定国家的版块 国家代码可点击下载SOC 国家代码、名称、Bounds对照表下载
- depth :设定数据的层级深度,、
- AMap.DistrictLayer.Country时,depth为0的时候只显示国家面,depth为1的时候显示省级,当国家为中国时设置depth为2的可以显示市一级。
- AMap.DistrictLayer.Province时,depth为0的时候只显示省面,depth为1的时候显示市级,当depth为2的可以显示县一级。
- opacity :图层透明度,默认为 1
- styles :为简易行政区图设定各面的填充颜色和描边颜色。 styles各字段的值可以是颜色值,也可以是一个返回颜色值* 的回调函数function。支持的颜色格式有:
- #RRGGBB,如:’#FFFFFF’
- rgba(),如:‘rgba(255,255,255,1)’
- rgb(),如:‘rgb(255,255,255)’
- [r,g,b,a] ,如: [1,1,1,1]
- ‘’,代表不赋予颜色
- styles.coastline-stroke :海岸线颜色
- styles.nation-stroke:国境线颜色
- styles.province-stroke :省界颜色
- styles.city-stroke:城市界颜色
- styles.county-stroke:区/县界颜色
- styles.fill:填充色
以上styles属性可以是颜色值 ,也可以是个函数并接收一个回调参数,具体内容可自行打印