开发 地图 JS API 2.0 进阶教程 图层 简易行政区图

简易行政区图 最后更新时间: 2024年02月04日

为了满足基于行政区块的数据可视化、行政区边界展示等开发需求,我们通过AMap.DistrictLayer插件提供了一组简易行政区图层接口,包括:

  1. 世界简易行政区图层 AMap.DistrictLayer.World
  2. 国家简易行政区图层 AMap.DistrictLayer.Country
  3. 省市简易行政区图层 AMap.DistrictLayer.Province

1、世界简易行政区图层

世界简易行政区图层可用来展示全球所有国家和地区的分界线及区块,支持边界及区域面样式设置。

世界简易行政区图层创建及设置方法如下:

//1、初始化地图
var map = new AMap.Map("container", {
  zoom: 3, //设置地图初始化级别
});

//2、创建世界简易行政区图层
var distWorld = new AMap.DistrictLayer.World({
  zIndex: 10, //设置图层层级
  zooms: [2, 15], //设置图层显示范围
});

//3、设置行政区图层样式
distWorld.setStyles({
  "stroke-width": 2, //描边线宽
  fill: function (data) {
    //设置区域填充颜色,可根据回调信息返回区域信息设置不同填充色
    //回调返回区域信息数据,字段包括 SOC(国家代码)、NAME_ENG(英文名称)、NAME_CHN(中文名称)等
    //国家代码名称说明参考 https://a.amap.com/jsapi_demos/static/demo-center/js/soc-list.json
    return "#ffffffe7";
  },
});

//4、将简易行政区图层添加到地图
map.add(distWorld);

2、国家简易行政区图层

国家简易行政区图层可单独展示某个国家或地区的所有省级行政区域,支持边界及区域面样式设置。

国家简易行政区图层创建及设置方法如下:

//1、初始化地图
var map = new AMap.Map("container", {
  zoom: 3, //设置地图初始化级别
});

//2、创建国家简易行政区图层
var distCountry = new AMap.DistrictLayer.Country({
  zIndex: 10, //设置图层层级
  zooms: [2, 15], //设置图层显示范围
  SOC: "CHN", //设置显示国家
  depth: 2, //设置数据显示层级,0:显示国家面,1:显示省级,当国家为中国时设置depth为2的可以显示市一级
});

//3、设置行政区图层样式
distCountry.setStyles({
  "stroke-width": 2, //描边线宽
  fill: function (data) {
    //设置区域填充颜色,可根据回调信息返回区域信息设置不同填充色
    //回调返回区域信息数据,字段包括 SOC(国家代码)、NAME_ENG(英文名称)、NAME_CHN(中文名称)等
    //国家代码名称说明参考 https://a.amap.com/jsapi_demos/static/demo-center/js/soc-list.json
    return "#ffffffe7";
  },
});

//4、将简易行政区图层添加到地图
map.add(distCountry);

3、省市简易行政区图层

省市简易行政区图层可展示一个或多个中国行政区区域(支持展示省、市、县级别)。支持边界及区域面样式设置。

省市简易行政区图层创建及设置方法如下:

//1、初始化地图
var map = new AMap.Map("container", {
  zoom: 3, //设置地图初始化级别
});

//2、创建省市简易行政区图层
var distProvince = new AMap.DistrictLayer.Province({
  zIndex: 10, //设置图层层级
  zooms: [2, 15], //设置图层显示范围
  adcode: "130000", //设置行政区 adcode
  depth: 2, //设置数据显示层级,0:显示国家面,1:显示省级,当国家为中国时设置depth为2的可以显示市一级
});

// 3、设置行政区图层样式
distProvince.setStyles({
  "stroke-width": 2, //描边线宽
  fill: function (data) {
    //设置区域填充颜色,可根据回调信息返回区域信息设置不同填充色
    //回调返回区域信息数据,字段包括 SOC(国家代码)、NAME_ENG(英文名称)、NAME_CHN(中文名称)等
    //国家代码名称说明参考 https://a.amap.com/jsapi_demos/static/demo-center/js/soc-list.json
    return "#ffffffe7";
  },
});

//4、将简易行政区图层添加到地图
map.add(distProvince);
返回顶部 示例中心 常见问题 智能客服 公众号
二维码