Загрузка маркеров geoJSON из API - React Leaflet

Листовка и использование GeoJSON. Я пытаюсь получить маркеры из полученного API GeoJSON для отображения на карте после того, как данные будут сохранены в состоянии. Я попытался использовать компонент маркера для отображения маркеров из API, но на странице ничего не отображается. Я открыт для использования компонента маркера или любого другого способа отображения маркеров. Спасибо!

import React, { Component } from "react";
import "./App.css";
import { Map, TileLayer, Marker, Popup, GeoJSON } from "react-leaflet";
import L from "leaflet";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      location: {
        lat: 51.505,
        lng: -0.09
      },
      zoom: 2,
      bikes: null,
      haveUsersLocation: false,
    };

 componentWillMount() {
    fetch(
      "https://bikewise.org:443/api/v2/locations/markers?proximity_square=10"
    )
      .then(response => response.json())
      .then(data => this.setState({ bikes: data }));
  }

 render() {
    const position = [this.state.location.lat, this.state.location.lng];

    return (
      <div className="App">
        <Menu />
        <Map className="map" center={position} zoom={this.state.zoom}>
          <TileLayer
            attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />

          <GeoJSON addData={this.state.bikes} /> 

          {this.state.haveUsersLocation ? (
            <Marker position={position} icon={myIcon}>
              <Popup>Your current location</Popup>
            </Marker>
          ) : (
            ""
          )}
        </Map>
      </div>
    );
  }
}

reactjs javascript leaflet geojson react-leaflet
person Shawn    schedule 05.10.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Причина, по которой компонент Marker никогда не вызывается, потому что this.state.haveUsersLocation всегда ложно, и вы не устанавливаете для него значение true нигде в компоненте. Если вы хотите отображать компонент Marker только тогда, когда haveUsersLocation имеет значение true, вам необходимо изменить haveUsersLocation на true, чтобы отобразить Marker, в противном случае удалите условие

Вам нужно сделать для hasUsersLocation значение true в componentWillMount, и Marker будет успешно отображаться.

componentWillMount() {
    fetch(
      "https://bikewise.org:443/api/v2/locations/markers?proximity_square=10"
    )
      .then(response => response.json())
      .then(response => this.setState({ haveUsersLocation: true, bikes: response.data.features }));
  }

Чтобы принудительно отреагировать на повторную визуализацию данных GeoJSON, вам необходимо передать компоненту ключ data-uniq. Проверьте ниже проблему github для получения более подробной информации.

   <GeoJSON key={`geojson-01`} addData={this.state.bikes} />

https://github.com/PaulLeCam/react-leaflet/issues/332#issuecomment-304228071

Также необходимо добавить уникальный ключ для маркера.

   {this.state.haveUsersLocation ? (
        <Marker key={`marker-01`} position={position} icon={myIcon}>
          <Popup>Your current location</Popup>
        </Marker>
      ) :  ""}
person Hemadri Dasari    schedule 05.10.2018
comment
Тернарный оператор обновляет состояние haveUsersLocation, и созданный мной начальный маркер отображается нормально, но я не могу отображать маркеры из API. - person Shawn; 05.10.2018
comment
@Shawn Я обновил свой ответ, попробуйте сейчас - person Hemadri Dasari; 05.10.2018
comment
Вам нужно установить response.data.features для велосипедов - person Hemadri Dasari; 05.10.2018
comment
@ Think-Twice Или, как вариант, вместо изменения ответа просто измените тег GeoJSON? <GeoJSON addData={this.state.bikes.features} /> - person AussieJoe; 05.10.2018
comment
@AussieJoe, да, согласен, это тоже верно - person Hemadri Dasari; 05.10.2018
comment
@AussieJoe, спасибо! Я получаю массив объектов из ‹GeoJSON addData .. /›, но ничего не отображается. - person Shawn; 06.10.2018
comment
@Shawn вам нужно добавить уникальный ключ в GeoJSON, только тогда он отобразит данные. Проверить мой обновленный ответ - person Hemadri Dasari; 06.10.2018