React Native地图 – react-native-mapbox-gl和GeoJSON数据格式总结

写在前面

在React Native 地图组件选择中我做了很多尝试，以下是我的一些建议和总结。

1.react-native-maps 对iOS十分友好，但是对android并不友好，需要google play支持。
2.react-native-amap3d 国内优秀开源库基于高德地图SDK，无条件支持，但是在遇到复杂需求时就会比较鸡肋，如自定义瓦片图层、大量数据渲染卡顿等
3.react-native-mapbox-gl 弥补了上面的缺点，而且拓展性非常高，也是这篇文章主要要写的。

GeoJSON

什么是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]]},
]
//组件

    {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}'}
        ]}
    />

GeoJSON文档

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

GeoJSON解构

type基础类型

• Point
• LineString
• Polygon
• MultiPoint
• MultiLineString
• MultiPolygon

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

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"
           }
       }
   ]
}

crs
坐标参考规则：地球坐标，火星坐标

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

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

GeoJSON在线生成工具

http://geojson.io