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

最新推荐文章于 2024-05-31 15:58:16 发布

鲸渔

最新推荐文章于 2024-05-31 15:58:16 发布

阅读量3.1k

点赞数 2

分类专栏：【地图开发】文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_39078783/article/details/122123863

版权

【地图开发】专栏收录该内容

16 篇文章 11 订阅

订阅专栏

高德地图 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
评论
【高德地图进阶】--- 通过DistrictLayer绘制城市版块

高德地图 js API v1.4.10 版本正式发布的简易行政区图层。为了满足基于行政区块的数据可视化、行政区边界展示等开发需求，可以通过AMap.DistrictLayer插件提供了一组简易行政区图层包括：世界简易行政区图层 AMap.DistrictLayer.World国家简易行政区图层 AMap.DistrictLayer.Country省市简易行政区图层 AMap.DistrictLayer.Province本章只讲解Province的使用方式，其他两个api 用法大致相同，区别只在.
复制链接

扫一扫