【高德地图进阶】--- 使用DistrictSearch 绘制城市版块

最新推荐文章于 2024-04-23 11:58:50 发布

鲸渔

最新推荐文章于 2024-04-23 11:58:50 发布

阅读量4.6k

点赞数 3

分类专栏：【地图开发】文章标签： javascript 前端几何学

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

版权

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

16 篇文章 11 订阅

订阅专栏

在【高德地图入门】—通过geoJson绘制点，线，面一章中，我们学会了如何使用GeoJson绘制城市版块。今天我们使用高德自己的api来绘制城市版块

DistrictSearch

DistrictSearch插件可以通过城市名或城市码查询到城市的区号、城市编码、中心点、边界、下辖区域等详细信息

引入插件

  <script
    language="javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=cccc&plugin=AMap.DistrictSearch"
  ></script>

使用示例

DistrictSearch 有四个重要的属性

在这里插入图片描述

    let opts = {
      // 是否返回行政区边界坐标点
      extensions: "all",
      // 设置查询行政区级别为 区 
      level: "city",
    };
   // 创建DistrictSearch对象
    const district = new AMap.DistrictSearch(opts);
    district.search("山东省", function (status, result) {
      console.log("status", status);
      console.log("result", result);
    });

在这里插入图片描述

上图中的boundaries 就是所查询城市的边界坐标点数据，我们可以通过该数据绘制点，线，面

例1：绘制边界线

    let opts = {
      subdistrict: 1,
      // 是否返回行政区边界坐标点
      extensions: "all",
      // 设置查询行政区级别为 市
      level: "city",
    };

    // 创建DistrictSearch对象
    const district = new AMap.DistrictSearch(opts);
    district.search("山东省", function (status, result) {
      let bounds = result.districtList[0].boundaries;
      console.log(bounds.length);
      for (let i = 0; i < bounds.length; i += 1) {
        // 绘制边界线
        new AMap.Polyline({
          path: bounds[i],
          strokeColor: "#0dcdd1",
          strokeWeight: 3,
          map: map,
        });
      }
    });

在这里插入图片描述
例2：绘制版块

    let opts = {
      subdistrict: 1,
      // 是否返回行政区边界坐标点
      extensions: "all",
      // 设置查询行政区级别为 区
      level: "city",
    };

    // 创建DistrictSearch对象
    const district = new AMap.DistrictSearch(opts);
    district.search("山东省", function (status, result) {
      let bounds = result.districtList[0].boundaries;
      if (bounds) {
        console.log(bounds);
        for (let i = 0; i < bounds.length; i += 1) {
          // 绘制版块
          new AMap.Polygon({
            map: map,
            path: bounds[i],
            strokeColor: "#0dcdd1",
            fillColor: "#3D6BB1",
          });
        }
      }
    });

在这里插入图片描述

是不是也看出了和GeoJson的区别了呢，因为搜索出来的边界坐标是整个省的，无法直接绘制市的边界线

在这里插入图片描述

绘制市级边界线

result中还返回了当前搜索城市的下级行政区的信息，我们可以遍历这个数据进行多次查询

在这里插入图片描述
示例：根据省的边界线绘制面，然后通过遍历所有市的信息，对每个市进行搜索，获取每个市的边界坐标用于绘制市级边界线

    let opts = {
      // 是否返回行政区边界坐标点
      extensions: "all",
      // 设置查询行政区级别为 市
      level: "city",
    };

    // 创建DistrictSearch对象
    const district = new AMap.DistrictSearch(opts);
    DrawSection("山东省", district, true);
    // 使用递归的方式
    function DrawSection(cityName, district, isSearchNextLevel) {
      district.search(cityName, function (status, result) {
        let bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (let i = 0; i < bounds.length; i += 1) {
            if (isSearchNextLevel) {
              // 绘制省的版块
              new AMap.Polygon({
                map: map,
                path: bounds[i],
                strokeColor: "#0dcdd1",
                fillColor: "#3D6BB1",
              });
            } else {
              // 绘制市的边界线
              new AMap.Polyline({
                path: bounds[i],
                strokeColor: "#0dcdd1",
                map: map,
              });
            }
          }
          if (isSearchNextLevel) {
            let districtList = result.districtList[0].districtList;
            for (let i = 0; i < districtList.length; i += 1) {
              DrawSection(districtList[i].name, district, false);
            }
          }
        }
      });
    }

在这里插入图片描述

是不是和GeoJson相比变得很麻烦，而且搜索了很多次，也浪费了很多网络资源呢？

全部代码展示（其中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.DistrictSearch"
  ></script>

  <script language="javascript">
    const map = (window.map = new AMap.Map("container", {
      center: [118.035441, 36.323541],
      viewMode: "3D",
      zoom: 7,
      pitch: 50,
      showLabel: false,
    }));
    let opts = {
      // 是否返回行政区边界坐标点
      extensions: "all",
      // 设置查询行政区级别为 市
      level: "city",
    };

    // 创建DistrictSearch对象
    const district = new AMap.DistrictSearch(opts);
    DrawSection("山东省", district, true);
    // 使用递归的方式
    function DrawSection(cityName, district, isSearchNextLevel) {
      district.search(cityName, function (status, result) {
        let bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (let i = 0; i < bounds.length; i += 1) {
            if (isSearchNextLevel) {
              // 绘制省的版块
              new AMap.Polygon({
                map: map,
                path: bounds[i],
                strokeColor: "#0dcdd1",
                fillColor: "#3D6BB1",
              });
            } else {
              // 绘制市的边界线
              new AMap.Polyline({
                path: bounds[i],
                strokeColor: "#0dcdd1",
                map: map,
              });
            }
          }
          if (isSearchNextLevel) {
            let districtList = result.districtList[0].districtList;
            for (let i = 0; i < districtList.length; i += 1) {
              DrawSection(districtList[i].name, district, false);
            }
          }
        }
      });
    }

  </script>
</html>

鲸渔

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
1
评论
【高德地图进阶】--- 使用DistrictSearch 绘制城市版块

在【高德地图入门】—通过geoJson绘制点，线，面一章中，我们学会了如何使用GeoJson绘制城市版块。今天我们使用高德自己的api来绘制城市版块DistrictSearchDistrictSearch插件可以通过城市名或城市码查询到城市的区号、城市编码、中心点、边界、下辖区域等详细信息引入插件 <script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=cccc&a.
复制链接

扫一扫