什么是GeoJSON？

最新推荐文章于 2025-06-25 11:50:19 发布

hsg77

最新推荐文章于 2025-06-25 11:50:19 发布

阅读量6.5k

点赞数 6

分类专栏： mapbox-gl 开发语言 Javascript

开发语言 Javascript 同时被 2 个专栏收录

54 篇文章

订阅专栏

mapbox-gl

3 篇文章

订阅专栏

GeoJSON
来源地址：https://segmentfault.com/a/1190000015104965
什么是GeoJSON？
使用mapbox不得不先了解以下GeoJSON格式规范，首先po个对比，
使用第1，2个库时，我们渲染多个坐标点可能是这样的，使用类似的组件通过数组遍历并渲染，一个点需要一个
//数据

const data = [
    {coordinate:[100.0, 0.0]]},
    {coordinate:[101.0, 1.0]]},
    {coordinate:[100.1, 1.0]]},
    {coordinate:[101.1, 0.0]]},
]

//组件

<MapView>
    {data.map(marker=>{
        return (
            <Marker
              ...props
              coordinate={marker.coordinate}
            />
        )
    })}
</MapView>

使用mapbox-gl时思想完全变了，
这里先不急介绍组件的用法，可以轻易看出没有了数组的循环遍历
//数据

const geoJSON = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": "id0",
            "geometry": {
                "type": "MultiPoint",
                "coordinates":[
                    [100.0, 0.0], [101.0, 1.0],
                    [100.0, 1.0], [101.0, 0.0],
                    ...
                ]
            }
        }
    ]
}

//组件

<MapboxGL.ShapeSource shape={geoJSON}>
    <MapboxGL.SymbolLayer 
        style={[styles.mark, 
            {textField: '{text}',iconImage : '{icon}'}
        ]}
    />
</MapboxGL.ShapeSource>

GeoJSON文档
GeoJSON是基于JavaScript 对象表示法的地理空间信息数据交换格式
GeoJSON文档地址

GeoJSON解构
type基础类型

Point
LineString
Polygon
MultiPoint
MultiLineString
MultiPolygon

{
    "type":'几何形状的类型',
    "coordinates":[]    //坐标点
}

在这里插入图片描述

Multipart geometries

type高级类型
GeometryCollection
点、线、面的集合

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

Feature
GeometryCollection基础上可添加最标点的属性properties

{
   "type": "Feature",
   "geometry": {
       "type": "LineString",
       "coordinates": [
           [100.0, 0.0], [101.0, 1.0]
       ]
   },
   "properties": {
       "prop0": "value0",
       "prop1": "value1"
   }
}

geometry内可以使用"GeometryCollection"

{
   "type": "Feature",
   "geometry": {
      "type": "GeometryCollection",
      "geometries": [
          {
            "type": "Point",
            "coordinates": [100.0, 0.0]
          },
          {
            "type": "LineString",
            "coordinates": [
                [101.0, 0.0], [102.0, 1.0]
            ]
          }
      ]
   },
   "properties": {
       "prop0": "value0",
       "prop1": "value1"
   }
}

FeatureCollection
Feature集合

{
   "type": "FeatureCollection",
   "features": [
       {
           "type": "Feature",
           "id": "id0",
           "geometry": {
               "type": "LineString",
               "coordinates": [
                   [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
               ]
           },
           "properties": {
               "prop0": "value0",
               "prop1": "value1"
           }
       },
       {
           "type": "Feature",
           "id": "id1",
           "geometry": {
               "type": "Polygon",
               "coordinates": [
                   [
                       [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]
                   ]
               ]
           },
           "properties": {
               "prop0": "value0",
               "prop1": "value1"
           }
       }
   ]
}

properties
样式集合
geojson.io
在这里插入图片描述
crs
坐标参考规则：地球坐标，火星坐标

"crs": {
  "type": "EPSG",
  "properties": { 
     "code": 4326,
     "coordinate_order": [1, 0]
  }
}

注意：要使用GeoJSON，就必须抛开之前的靠大量DOM渲染思想，这在理解上会成为绊脚石，我之前就困扰了很久

GeoJSON在线生成工具
http://geojson.io

案例
https://github.com/1uokun/rea…