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

最新推荐文章于 2025-03-16 07:29:37 发布

鲸渔

最新推荐文章于 2025-03-16 07:29:37 发布

阅读量4.4k

点赞数 2

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

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

版权

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

16 篇文章

订阅专栏

本文介绍如何使用GeoJSON数据和高德地图API绘制城市地图，包括面、线和点的绘制方法。以山东省为例，展示了从获取GeoJSON数据到实现地图绘制的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们已经学会了如何绘制点，线，面。今天我们就结合geoJson进行绘制点，线，面。
通常的业务场景是希望绘制一个城市的版块，我们可以先拿到一个城市的geoJson（通常是只包含面（MultiPolygon）），然后通过高德的api绘制城市版块

如何获取快速城市的GeoJson数据

我们可以使用阿里云的DataV

可以通过点击选择想要的城市版块，这里以山东省为例。
在这里插入图片描述
复制链接，我们可以直接在项目中使用

全部代码展示（其中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"
  ></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></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,
    }));

    //发送请求 获取GeoJson数据
    ajax(
      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
      function (err, geoJSON) {
        if (!err) {
          //将获取到的GeoJson数据进行解析
          var geojson = new AMap.GeoJSON({
            geoJSON: geoJSON,
            getPolygon: function (geojson, lnglats) {
              //将解析出来的面 进行绘制
              return new AMap.Polygon({
                path: lnglats,
                strokeColor: "#0dcdd1",
                fillColor: "#3D6BB1",
              });
            },
            getMarker: function (geojson, lnglats) {
              //用来绘制点
            },
            getPolyline: function (geojson, lnglats) {
              //用来绘制线;
            }
          });
          map.add(geojson);
        }
      }
    );


  </script>
</html>

在这里插入图片描述

对于点和线的绘制与面一致，只不过该GeoJson 不包含点和线的数据，就不在举例了

扩展：通过面的数据绘制线

    ajax(
      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
      function (err, geoJSON) {
        if (!err) {
          //将获取到的GeoJson数据进行解析
          var geojson = new AMap.GeoJSON({
            geoJSON: geoJSON,
            getPolygon: function (geojson, lnglats) {
              for (let i = 0; i < lnglats.length; i += 1) {
                // 绘制边界线
               return new AMap.Polyline({
                  path: lnglats[i],
                  strokeColor: "#0dcdd1",
                  strokeWeight: 3,
                });
              }
            },
            getMarker: function (geojson, lnglats) {
              //用来绘制点
            },
            getPolyline: function (geojson, lnglats) {
              //用来绘制线;
            },
          });
          map.add(geojson);
        }
      }
    );