【高德地图进阶】--- 通过DistrictLayer绘制城市版块

高德地图 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属性可以是颜色值 ,也可以是个函数并接收一个回调参数,具体内容可自行打印
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸渔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值