【高德地图入门】--- 解析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_第1张图片

多点 ,多面,多线 的解析

这里只拿多面举个例子
【高德地图入门】--- 解析geojson_第2张图片
打印结果
【高德地图入门】--- 解析geojson_第3张图片

几何集合的解析

【高德地图入门】--- 解析geojson_第4张图片
打印结果
【高德地图入门】--- 解析geojson_第5张图片

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


全部代码展示 (其中xxxx 高德的秘钥,cccc是高德的key,需要自己申请)

【高德地图入门】--- 解析geojson_第7张图片

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

你可能感兴趣的:(【地图开发】,几何学,javascript,前端)