如何使用 React-Native 为 Mapbox 使用 ShapeSource 和 Circle 层显示动态检索的 GeoJSON

Question

当我将它们输出到例如对于控制台，它会是这样的：

    {type: "feature" geometry: {type: point, coordinates: array(2)} 
    properties: {extra properties}}

从我的 API 中检索了多个这些功能并存储在状态中。目前，检索到的最大特征量介于 0 到 50 个特征之间。所以我猜这不是需要渲染太多功能的问题。

在下面链接的项目 GitHub 页面上找到了一个示例，它做了类似的事情，但他们使用的是 url 而不是像我正在使用的形状属性 .根据文档，哪个应该能够执行我正在尝试的操作。

Link 举个例子： https://github.com/react-native-mapbox-gl/maps/blob/master/example/src/examples/EarthQuakes.js

Link 到文档： https://github.com/react-native-mapbox-gl/maps/blob/master/docs/ShapeSource.md

我还尝试了在此 SO post 上找到的几种解决方案： How do you convert normal geographic json coming from server into geoJson?

目前我的渲染方法如下所示：

        render() {
    return (
        <View style={styles.container}>
          <MapboxGL.MapView
              showUserLocation={true}
              rotateEnabled={false}
              style={styles.map}
              ref={map => { this.map = map; }}
              styleURL={MapboxGL.StyleURL.Street}
              onRegionDidChange={this.onRegionDidChange}
              onDidFinishLoadingMap={this.onDidFinishLoadingMap}>

            <MapboxGL.UserLocation
                visible={true}/>

            <MapboxGL.ShapeSource
                id='routeSource'
                shape={{type: "FeatureCollection", features: 
                this.state.routes}}
                type='geojson'>

                <MapboxGL.CircleLayer
                    id="singlePoint"
                    style={layerStyle.singlePoint}
                />
            </MapboxGL.ShapeSource>


            <MapboxGL.Camera
                ref={camera => {this.camera = camera;}}
                zoomLevel={8}/>

          </MapboxGL.MapView>
      </View>
    );

所有代码在 android 和 iOS 上都可以正常编译，控制台或模拟器上都没有错误。预期结果是使用添加到状态的特征在地图上呈现圆圈

Answer 1

所以在另一个需要我注意的项目之后，我昨天才弄清楚了这个。在我上面的例子中，我做了类似下面的代码。

<MapboxGL.ShapeSource shape={{type: "FeatureCollection", features: this.state.routes}}/>

过了一会儿我发现shape对象实际上需要你提供一个完整的geojson对象。这是我认为我已经提供的东西，但看起来我没有。首先，我为 Javascript 安装了一个包，使我能够将某些内容解析为 geojson。 NPM Package I used.

然后我开始通过执行以下操作将我的数据对象映射到一个空数组：

let data = [];

outsideMarkerlist.map((element) => {
    data.push(element);
})

实际上我不确定是否需要执行上述步骤，但这似乎对我有用。结果数组是我能够像这样解析为实际的 geojson 的东西：

const geojson = GeoJSON.parse(data, {Point: ['latitude', 'longitude']});

第二个参数表示几何体的类型，请查看支持类型的文档。还要确保将 'latitude' 和 'longitude' 变量更改为数据集中表示这些值的属性的名称，然后您应该能够解决问题。

this.setState({json: geojson})

所以现在唯一要显示的部分是渲染函数中的形状源。这看起来像下面的代码。

<MapboxGL.ShapeSource id="routeSource" shape={this.state.json}>
    <MapboxGL.LineLayer
      id="routeFill"
      style={layerStyles.route}
    />
</MapboxGL.ShapeSource>

如何使用 React-Native 为 Mapbox 使用 ShapeSource 和 Circle 层显示动态检索的 GeoJSON

How to show dynamically retrieved GeoJSON using a ShapeSource and Circle layer for Mapbox using React-Native

javascript

react-native

react-native-mapbox-gl