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":[]    //坐标点
}

Geometry primitives
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...

阅读 10.3k

笔记

366 声望
18 粉丝
0 条评论

笔记

366 声望
18 粉丝
文章目录
宣传栏