Указатели о том, как использовать полилинию листовки в реактиве и реактиве - PullRequest
Новая
       20

Указатели о том, как использовать полилинию листовки в реактиве и реактиве

0 голосов
/ 27 мая 2019

Я очень новичок в React и листовке.Я пытаюсь построить набор широт и долгот, который доступен в объекте на карте в React с использованием листовки.Любые указатели на то, как это можно сделать, будут полезны.

Я прошел учебные курсы по листовке реакции от https://react -leaflet.js.org .Но я не могу продолжить.Любая помощь очень ценится.Заранее спасибо.

Пример массива данных объекта, который у меня есть: 

data=[
  {
    from_lat: "12.92415",
    from_long: "77.67229",
    id: "132512",
    to_lat: "12.92732",
    to_long: "77.63575",
  },
  {
    from_lat: "12.96691",
    from_long: "77.74935",
    id: "132513",
    to_lat: "12.92768",
    to_long: "77.62664",
  }
]

1 Ответ

0 голосов
/ 27 мая 2019

Вы можете сохранить данные в таком состоянии: 

state = {
    ...
    data: [
      {
        from_lat: "12.92415",
        from_long: "77.67229",
        id: "132512",
        to_lat: "12.92732",
        to_long: "77.63575",
      },
      {
        from_lat: "12.96691",
        from_long: "77.74935",
        id: "132513",
        to_lat: "12.92768",
        to_long: "77.62664",
      }
    ]
  };

, а затем выполнить итерацию по данным и вернуть экземпляр Polyline следующим образом: 

<Map
      style={{ height: "100vh" }}
      center={position}
      zoom={this.state.zoom}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      {this.state.data.map(({id, from_lat, from_long, to_lat, to_long}) => {
        return <Polyline key={id} positions={[
          [from_lat, from_long], [to_lat, to_long],
        ]} color={'red'} />
      })}
    </Map>

Demo

...