简易行政区图 最后更新时间: 2021年01月22日
本章介绍 v1.4.10 版本正式发布的简易行政区图层。为了满足基于行政区块的数据可视化、行政区边界展示等开发需求,我们通过AMap.DistrictLayer
插件提供了一组简易行政区图层,包括:
- 世界简易行政区图层
AMap.DistrictLayer.World
- 国家简易行政区图层
AMap.DistrictLayer.Country
- 省市简易行政区图层
AMap.DistrictLayer.Province
这些图层各自的使用场景为:
名称 | 适用范围 |
---|---|
AMap.DistrictLayer.World |
|
AMap.DistrictLayer.Country |
中国支持全部地级市一级的展示,可配置国界颜色、省界线、市界限颜色和省、市区域的面填充色 |
AMap.DistrictLayer.Province | 单独展示一个或者组合展示多个 可配置各省、市、县的边界颜色和面填充色 |
世界简易行政区图层
在使用这组图层之前首先需要引入AMap.DistrictLayer
插件,有两种方式。
创建
世界简易行政区图的创建方法如下:
var disWorld = new AMap.DistrictLayer.World({
zIndex:10,
styles:{
'nation-stroke':function(props){
if(props.type=='Nation_Border_China'){
return 'red'
}else{
return 'white'
}
},
'coastline-stroke': [0.8, 0.63, 1, 1],
'fill':function(props){
return getColorBySOC(props.SOC)
}
}
})
样式颜色配置
通过在创建的时候传入styles
属性,可以为简易行政区图设定各面的填充颜色和描边颜色。styles
各字段的值可以是颜色值,也可以是一个返回颜色值的回调函数function
。支持的颜色格式有:
1. #RRGGBB
,如:'#FFFFFF'
2. rgba()
,如:'rgba(255,255,255,1)'
3. rgb()
,如:'rgb(255,255,255)'
4. [r,g,b,a]
,如:[1,1,1,1]
5. ''
,代表不赋予颜色
回调函数入参说明
回调函数的入参为 API 为方便开发者进行业务数据与行政区数据映射而提供的一组字段,映射之后由回调函数生成对应的颜色值。世界简易行政区图层的回调函数的入参为:
styles字段 | 样式类型 | 回调入参字段 | 字段值枚举 |
---|---|---|---|
| 线条 |
| Nation_Border_China 中国国境线 Nation_Border_Foreign 外国国境线 |
| 线条 |
| Coastline_China 中国海岸线 Coastline_Foreign 外国海岸线 |
| 填充 |
|
国家简易行政区图层
创建
初始化的时候可以通过SOC
字段设定显示的国家,通过depth
字段设定数据的层级深度,depth
为0
的时候只显示国家面,depth
为1
的时候显示省级,当国家为中国时设置depth
为2
的可以显示市一级。
var disCountry = new AMap.DistrictLayer.Country({
zIndex:10,
SOC:'CHN',
depth:2,
styles:{
'nation-stroke':'#22ffff',
'coastline-stroke':[0.8, 0.63, 0.94, 1],
'province-stroke':'white',
'city-stroke': 'rgba(255,255,255,0.5)',//中国特有字段
'fill':function(props){//中国特有字段
return getColorByDGP(props.adcode_pro)
}
}
})
回调函数入参说明
styles字段 | 样式类型 | 回调入参字段 | 字段值枚举/特殊说明 |
---|---|---|---|
| 线条 | type | Nation_Border_China 中国国境线 Nation_Border_Foreign 外国国境线 |
(国家为中国时有效) | 线条 | type | 仅有中国有海岸线数据 |
(depth > 1 时有效) | 线条 | type | Province_Border_China 中国国境线 Province_Border_Foreign 外国国境线 |
(国家为中国,且 depth = 2 时有效) | 线条 | NAME_CHN SOC adcode adcode_cit adcode_pro citycode level type x y | 市中文名 国家编码 行政编码,与 adcode_cit 相同 市级行政编码 省级行政编码 城市编码 行政级别 类别:City_Border_China 市级中心点经度 市级中心点维度 |
(depth为0、1、2时分别对应国、省、市) | 填充 | NAME_CHN NAME_ENG SOC adcode adcode_cit adcode_pro citycode level | 中文名 英文名,外国特有字段 国家编码 行政编码,中国特有字段 市级行政编码,中国特有字段 省级行政编码,中国特有字段 城市编码,中国特有字段 行政级别,中国特有字段 |
省市简易行政区图层
创建
创建时通过districts
设定需要显示的行政区的adcode,通过depth
字段设定数据的层级深度,depth
为0
的时候只显示省面,depth
为1
的时候显示市级,当depth
为2
的可以显示县一级。
var disProvince = new AMap.DistrictLayer.Province({
zIndex:12,
adcode:['130000'],
depth:2,
styles:{
'fill':function(properties){
var adcode = properties.adcode;
return getColorByAdcode(adcode);
},
'province-stroke':'cornflowerblue',
'city-stroke': 'white',//中国地级市边界
'county-stroke': 'rgba(255,255,255,0.5)'//中国区县边界
}
})
回调函数入参说明
styles字段 | 样式类型 | 回调入参字段 | 字段值说明 |
---|---|---|---|
| 线条 | NAME_CHN adcode_pro adcode x y | 省级中文名 省级行政编码 行政编码,与 adcode_pro 相同 省中心点经度 省中心点维度 |
( depth > 0 时有效) | 线条 | NAME_CHN adcode adcode_cit adcode_pro citycode level type x y | 市级中文名 行政编码,与 adcode_cit 相同 市级行政编码 省级行政编码 城市编码 行政级别 类别:City_Border_China 市级中心点经度 市级中心点维度 |
( depth = 2 时有效) | 线条 | NAME_CHN adcode adcode_cit adcode_pro citycode level type x y | 县级中文名 县行政编码 市级行政编码 省级行政编码 城市编码 行政级别 类别:County_Border_China 县级中心点经度 县级中心点维度 |
(depth为0、1、2时分别对应省、市、县) | 填充 | NAME_CHN adcode adcode_pro adcode_cit citycode level x y | 中文名,根据 depth 不同,分别为省名、市名、县名 行政编码 省级行政编码 市级行政编码,depth > 0 时有此字段 市级城市编码,depth > 0 时有此字段 行政级别 中心点经度 中心点维度 |