Как показать динамически извлекаемый GeoJSON с использованием слоя ShapeSource и Circle для Mapbox с использованием React-Native

Question

Я успешно извлекаю набор функций из моего API, когда я выводю их, например, для консоли, это выглядит примерно так:

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

Множество этих функций извлекается из моего API ихранится в гос.В настоящее время максимальное количество найденных функций составляет от 0 до 50.Таким образом, я предполагаю, что это не проблема со слишком многими функциями, необходимыми для визуализации.

Найден пример на странице проекта GitHub, ссылка на которую приведена ниже, при выполнении чего-то похожего, но они используют URL вместо свойства shape, подобного тому, которое я использую.Который должен быть способен на то, что я пытаюсь согласно документации.

Ссылка на пример: 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>
    );

Весь код прекрасно компилируется на обоихна андроиде и iOS нет ошибок, присутствующих ни в консоли, ни на симуляторах.Ожидаемый результат состоит в том, что круги отображаются на карте с использованием объектов, которые были добавлены в состояние

Answer 1

Итак, после другого проекта, который потребовал моего внимания, я смог выяснить это вчера. В моем примере выше я сделал что-то вроде кода ниже.

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

Через некоторое время я смог выяснить, что объект формы на самом деле требует от вас предоставления полного и полного объекта геоджона. Это то, что я думал, что уже предоставлял, но, похоже, я не предоставлял. Сначала я установил пакет для Javascript, который позволяет мне что-то анализировать в geojson. Пакет NPM, который я использовал .

Затем я начал отображать свой объект данных в пустой массив, выполнив что-то вроде этого:

let data = [];

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

На самом деле, я не уверен, требуется ли вышеуказанный шаг, но это то, что мне подходит. Результирующий массив - это то, что я смог проанализировать на самом деле как геоджсон:

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

Второй аргумент обозначает тип геометрии, проверьте документацию для поддерживаемых типов. Также обязательно замените переменные «широта» и «долгота» на имена свойств в вашем наборе данных, которые представляют эти значения, и тогда вы сможете исправить проблему.

this.setState({json: geojson})

Таким образом, единственная часть, которую нужно показать сейчас, это источник формы в функции рендеринга. Это выглядит примерно так, как показано ниже.

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