1

我成功地从我的 API 中检索了一组功能，当我将它们输出到例如控制台时，它会是这样的：

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

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

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

示例链接： https ://github.com/react-native-mapbox-gl/maps/blob/master/example/src/examples/EarthQuakes.js

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

我还尝试了在这篇 SO 帖子中找到的几种解决方案： 如何将来自服务器的普通地理 json 转换为 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 上都可以正常编译，控制台或模拟器中都没有错误。预期结果是使用添加到状态的特征在地图上渲染圆圈

4

1 回答 1

1

因此，在另一个需要我注意的项目之后，我昨天能够解决这个问题。在我上面的例子中，我做了类似下面的代码。

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

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

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

let data = [];

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

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

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

第二个参数表示几何的类型检查支持类型的文档。还要确保将“纬度”和“经度”变量更改为数据集中代表这些值的属性的名称，然后您应该能够解决问题。

this.setState({json: geojson})

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

<MapboxGL.ShapeSource id="routeSource" shape={this.state.json}>
    <MapboxGL.LineLayer
      id="routeFill"
      style={layerStyles.route}
    />
</MapboxGL.ShapeSource>
于 2019-07-14T13:13:55.427 回答