技术分享 Technology to share

前端也要会 geojson

参考链接 https://geojson.org/
geojson工具 http://datav.aliyun.com/tools/atlas/
在使用 echart amapbmap 的时候会碰到 图形状要求(map开发还会更细致,可能会到乡镇、街道),并且我现在也在 three.js 里面也碰到了 需要geojson的地方,既然 geojson 这么重要,那本文就来讲讲 geojson 格式、使用、以及规范。


GeoJSON是一种基于JavaScript 对象表示法(JSON)的地理空间数据交换格式。它定义了几种JSON对象及其组合方式,以表示有关地理特征,其属性和空间范围的数据。GeoJSON使用地理坐标参考系统,World Geodetic System 1984和十进制度。


GeoJSON常用的类型有 七种类型 “点”,“多点”,“线”,“多线 ”,“多边形”,“多多边形”和“几何集合”


一、点(点坐标按x,y顺序排列(投影坐标为东,北,地理坐标为经度和纬度))

{
     "type": "Point",
     "coordinates": [100.0, 0.0]
}


二、多点(type为 MultiPoint 的坐标位置数组)

{
  "type": "MultiPoint",
  "coordinates": [
    [100.0, 0.0],
    [101.0, 1.0]
  ]
}



三、线(type 为LineString的坐标位置数组)

{
  "type": "LineString",
  "coordinates": [
      [100.0, 0.0],
      [101.0, 1.0]
  ]
}



四、多线(type为 MultiLineString的坐标是 LineString 坐标数组的数组:)

{
  "type": "MultiLineString",
  "coordinates": [
      [
          [100.0, 0.0],
          [101.0, 1.0]
      ],
      [
          [102.0, 2.0],
          [103.0, 3.0]
      ]
  ]
}



五、多边形(type为Polygon 的坐标位置数组)

// No holes:


{
  "type": "Polygon",
  "coordinates": [
    [
      [100.0, 0.0],
      [101.0, 0.0],
      [101.0, 1.0],
      [100.0, 1.0],
      [100.0, 0.0]
    ]
  ]
}


// With holes:


{
  "type": "Polygon",
  "coordinates": [
    [
      [100.0, 0.0],
      [101.0, 0.0],
      [101.0, 1.0],
      [100.0, 1.0],
      [100.0, 0.0]
    ],
    [
      [100.8, 0.8],
      [100.8, 0.2],
      [100.2, 0.2],
      [100.2, 0.8],
      [100.8, 0.8]
    ]
  ]
}



六、多多边形(type 为 MultiPolygon的坐标是Polygon坐标数组的数组)

{
  "type": "MultiPolygon",
  "coordinates": [
      [
          [
              [102.0, 2.0],
              [103.0, 2.0],
              [103.0, 3.0],
              [102.0, 3.0],
              [102.0, 2.0]
          ]
      ],
      [
          [
              [100.0, 0.0],
              [101.0, 0.0],
              [101.0, 1.0],
              [100.0, 1.0],
              [100.0, 0.0]
          ],
          [
              [100.2, 0.2],
              [100.2, 0.8],
              [100.8, 0.8],
              [100.8, 0.2],
              [100.2, 0.2]
          ]
      ]
  ]
}



七、几何集合 (type 为  GeometryCollection的“geometries”数组中的每个元素都是上述的Geometry对象之一)


{
  "type": "GeometryCollection",
  "geometries": [{
      "type": "Point",
      "coordinates": [100.0, 0.0]
  }, {
      "type": "LineString",
      "coordinates": [
          [101.0, 0.0],
          [102.0, 1.0]
      ]
  }]
}


上一篇: 前端(ajax)也要用二进制

下一篇: three 局部辉光