网络知识 娱乐 【高德地图入门】--- 解析geojson

【高德地图入门】--- 解析geojson

发布: 2023年2月14日 10:17:50

简介

GeoJSON是一种用于编码各种地理数据结构的数据。GeoJSON对象可以表示几何、特征或特征集合。GeoJSON支持以下几何类型：点（Point）、线（LineString）、面（Polygon）、多点（MultiPoint）、多线（MultiLineString）、多面（MultiPolygon）和几何集合（GeometryCollection）。GeoJSON中的功能包含几何对象和其他属性，特征集合表示一系列特性。

举例

GeoJson 是有点,线,面组成. 因此高德地图也推出了对应的api,用来解析GeoJson

const geoJSON = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: { type: "Point", coordinates: [102.0, 0.5] }
          },
          {
            type: "Feature",
            geometry: {
              type: "LineString",
              coordinates: [
                [102.0, 0.0],
                [103.0, 1.0],
                [104.0, 0.0],
                [105.0, 1.0],
              ]
            }
          },
          {
            type: "Feature",
            geometry: {
              type: "Polygon",
              coordinates: [
                [
                  [100.0, 0.0],
                  [101.0, 0.0],
                  [101.0, 1.0],
                  [100.0, 1.0],
                  [100.0, 0.0],
                ]
              ]
            }
          },
        ],
      };

上面的GeoJson 包含了 点,线,面 。下面看看高德地图是如何解析的呢

      new AMap.GeoJSON({
        geoJSON: geoJSON,
        getPolygon: function (geojson, lnglats) {
          console.log('面',lnglats);
        },
        getMarker: function (geojson, lnglats) {
          console.log('点',lnglats)
        },
        getPolyline: function (geojson, lnglats) {
          console.log('线',lnglats);
        },
      });

打印结果：
在这里插入图片描述

多点 ，多面，多线 的解析

这里只拿多面举个例子
在这里插入图片描述
打印结果
在这里插入图片描述

几何集合的解析

在这里插入图片描述
打印结果
在这里插入图片描述

总结
由上面的例子可以看出， 依靠高德的 AMap.GeoJSON 可以对geoJson进行解析
AMap.GeoJSON中有四个属性
在这里插入图片描述
AMap.GeoJSON每解析到一个面对象就会触发一次getPolygon对应的函数，如果geoJson对象中有多个面，就会多次触发getPolygon。点，线也是如此。

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

  <script language="javascript">
    const geoJSON = {
      type: "FeatureCollection",
      features: [
        {
          type: "GeometryCollection",
          geometries: [
            {
              type: "Point",
              coordinates: [108.62, 31.02819],
            },
            {
              type: "LineString",
              coordinates: [
                [108.896484375, 30.107117887],
                [108.2184375, 30.9171787],
                [109.5184375, 31.217578],
              ],
            },
          ],
        },
      ],
    };
    new AMap.GeoJSON({
      geoJSON: geoJSON,
      getPolygon: function (geojson, lnglats) {
        console.log("面", lnglats);
      },
      getMarker: function (geojson, lnglats) {
        console.log("点", lnglats);
      },
      getPolyline: function (geojson, lnglats) {
        console.log("线", lnglats);
      },
    });
  </script>
</html>

相关文章