Как передать данные JSON в реакцию-натив-карты-супер-кластер - PullRequest
Новая
       6

Как передать данные JSON в реакцию-натив-карты-супер-кластер

0 голосов
/ 26 ноября 2018

Я использую эту библиотеку под названием React Native Super Cluster для визуализации кластерных маркеров на карте.Как я могу передать данные JSON, извлеченные из API и сохраненные в избыточном состоянии, в библиотеку data prop?

Объекты data props должны иметь атрибут location.Данные, которые я пытаюсь скормить, имеют этот атрибут, но карта не может отображать маркеры.Я попытался поэкспериментировать с простым локальным массивом, он работал без проблем.И когда я отрисовываю все маркеры местоположений API с помощью act-native-maps , они также отображаются на карте.

Вот пример ответа от API: 

[
  {
    "id": "string",
    "name": "string",
    "location": {
      "type": "Point",
      "coordinates": [
        -122,
        37
      ]
    },
]

То, как я это делаю, возможно неправильно: 

<ClusteredMapView
  style={{ flex: 1 }}
  data={this.props.stations}
  renderMarker={this.renderMarker.bind(this)}
  renderCluster={this.renderCluster.bind(this)}
  initialRegion={INIT_REGION}
/>

renderMarker и renderCluster функции выиграныне вызывается, потому что данные реквизиты получили недопустимый тип данных.

1 Ответ

0 голосов
/ 26 ноября 2018

Отвечая на мой собственный вопрос.

После небольшого исследования и поиска исходного кода библиотеки я обнаружил, что атрибут location должен быть предоставлен в форме location: {lat, long}.Другими словами, к нему должен иметь прямой доступ библиотека.Поэтому я извлек каждое значение из объекта JSON и присвоил его location.

Я не уверен, насколько это эффективно, пожалуйста, добавьте свой собственный ответ, если он более элегантный и простой, чем этот: 

  _convertPoints(data) {
    const results = {
      type: 'MapCollection',
      features: []
    };
    data.map(value => {
      array = {
        value,
        location: {
          latitude: value.location.coordinates[1],
          longitude: value.location.coordinates[0]
        }
      };
      results.features.push(array);
    });
    return results.features;
  }

Визуализация : 

  render() {
    const data = this._convertPoints(this.props.stations);
    return (
      <View style={styles.container} style={{ flex: 1 }}>
        <ClusteredMapView
          style={{ flex: 1 }}
          data={data}
          renderMarker={this.renderMarker.bind(this)}
          renderCluster={this.renderCluster.bind(this)}
          initialRegion={INIT_REGION}
        />
      </View>
    );
  }

После этих манипуляций, похоже, работает.Надеюсь, когда я настрою карту, все будет хорошо :)

...