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個庫時，咱們渲染多個 座標點多是這樣的，使用相似 <Marker>的組件經過數組遍歷並渲染，一個點須要一個<Marker>

//數據
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":[]    //座標點
}

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
樣式集合

crs
座標參考規則：地球座標，火星座標

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

---

注意：要使用GeoJSON，就必須拋開以前的靠大量DOM渲染思想，這在理解上會成爲絆腳石，我以前就困擾了好久

GeoJSON在線生成工具

http://geojson.io

案例

https://github.com/1uokun/rea...