【高德地图入门】--- 解析geojson-Toy模板网

这篇具有很好参考价值的文章主要介绍了【高德地图入门】--- 解析geojson。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简介

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);
        },
      });

打印结果：
【高德地图入门】--- 解析geojson

多点，多面，多线的解析

这里只拿多面举个例子
【高德地图入门】--- 解析geojson
打印结果

几何集合的解析

【高德地图入门】--- 解析geojson
打印结果

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

全部代码展示（其中xxxx 高德的秘钥，cccc是高德的key，需要自己申请）

【高德地图入门】--- 解析geojson 文章来源地址https://www.toymoban.com/news/detail-408029.html

<!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>