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

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

0 голосов
/ 05 октября 2018

Листовка и использование 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>
    );
  }
}

1 Ответ

0 голосов
/ 05 октября 2018

Причина, по которой компонент 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>
      ) :  ""}
...