第一篇，如何用高德地图API获取县乡镇3D可视化！

原创已于 2025-08-19 06:00:55 修改 · 412 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#3d

于 2025-07-15 11:07:15 首次发布

高德地图专栏收录该内容

7 篇文章

订阅专栏

导语：
政务地图、乡村振兴、旅游规划…经常需要展示乡镇边界？本文手把手教你用高德地图API获取灵川县各乡镇边界数据，并实现酷炫的3D可视化效果！

在这里插入图片描述

一、为什么要获取乡镇3D乡镇边界？

政务应用：国土规划、疫情防控区域划分
商业分析：连锁店选址、物流配送范围优化
旅游开发：景区资源整合、乡村旅游路线设计

二、步获取灵川县

第一步：获取原始数据

// 初始化地图
    function initMap() {
      const opts = {
        subdistrict: 2,  // 获取乡镇级数据
        extensions: 'all',
        level: 'city'
      };
      
      // 查询灵川县及下属乡镇数据
      const district = new AMap.DistrictSearch(opts);
      district.search('灵川县', function (status, result) {
        if (status !== 'complete' || !result.districtList[0]) {
          console.error('行政区查询失败');
          return;
        }

        const countyData = result.districtList[0];
        const townships = countyData.districts || [];
        const countyBounds = countyData.boundaries || [];

        // 1. 创建3D地图（带灵川县边界遮罩）
        create3DMap(countyBounds);

        // 2. 绘制灵川县整体边界（蓝色高亮）
        //drawCountyBoundary(countyBounds);

        // 3. 绘制所有乡镇边界+标注
        //drawTownships(townships);
      });
    }

第二步：创建3D地图并设置遮罩

    // 创建3D地图并设置遮罩
    function create3DMap(boundaries) {
      MapInfo = new AMap.Map('AllmapContainer', {
        mask: boundaries.map(boundary => [boundary]), // 设置遮罩区域
        viewMode: '3D',
        center: [110.4049, 25.28092],
        zoom: 10.5,
        pitch: 40, // 3D倾斜角度
        layers: [
          new AMap.TileLayer.RoadNet(),
          new AMap.TileLayer.Satellite() // 卫星图层
        ],
        mapStyle: "amap://styles/1231231231321231234234234234"//自定义地图样式
      });

      // 添加3D地形厚度效果（可选）
      const object3Dlayer = new AMap.Object3DLayer();
      MapInfo.add(object3Dlayer);
      const wall = new AMap.Object3D.Wall({
        path: boundaries[0], // 取第一条边界
        height: -8000,
        color: '#0478d7',
        transparent: true
      });
      object3Dlayer.add(wall);
    }

三、常见问题解答

❓ Q1：如何免费获取数据？
✅ 高德开发者每天有3,000次免费API调用额度（申请Key）

四、完整资源包

高德API文档

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>灵川县3D地图边界标注</title>
  <style>
    #AllmapContainer { width: 100%; height: 100vh; }
  </style>
 <script type="text/javascript">window._AMapSecurityConfig = { securityJsCode: '111111111111111111111111111', }</script>
 <script src="https://webapi.amap.com/maps?v=1.4.15&key=高德KEY&plugin=Map3D,AMap.DistrictSearch"></script>
  <!-- 引入Turf.js计算几何中心 -->
  <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
</head>
<body>
  <div id="AllmapContainer"></div>
  <script>
    let MapInfo; // 全局地图实例

    // 初始化地图
    function initMap() {
      const opts = {
        subdistrict: 2,  // 获取乡镇级数据
        extensions: 'all',
        level: 'city'
      };
      
      // 查询灵川县及下属乡镇数据
      const district = new AMap.DistrictSearch(opts);
      district.search('灵川县', function (status, result) {
        if (status !== 'complete' || !result.districtList[0]) {
          console.error('行政区查询失败');
          return;
        }

        const countyData = result.districtList[0];
        const townships = countyData.districts || [];
        const countyBounds = countyData.boundaries || [];

        // 1. 创建3D地图（带灵川县边界遮罩）
        create3DMap(countyBounds);

      });
    }

    // 创建3D地图并设置遮罩
    function create3DMap(boundaries) {
      MapInfo = new AMap.Map('AllmapContainer', {
        mask: boundaries.map(boundary => [boundary]), // 设置遮罩区域
        viewMode: '3D',
        center: [110.4049, 25.28092],
        zoom: 10.5,
        pitch: 40, // 3D倾斜角度
        layers: [
          new AMap.TileLayer.RoadNet(),
          new AMap.TileLayer.Satellite() // 卫星图层
        ],
        mapStyle: "amap://styles/111111111111111111111"
      });

      // 添加3D地形厚度效果（可选）
      const object3Dlayer = new AMap.Object3DLayer();
      MapInfo.add(object3Dlayer);
      const wall = new AMap.Object3D.Wall({
        path: boundaries[0], // 取第一条边界
        height: -8000,
        color: '#0478d7',
        transparent: true
      });
      object3Dlayer.add(wall);
    }

  
    // 页面加载后初始化
    window.onload = initMap;
  </script>
</body>
</html>