关于如何在reactjs和react-leaflet中使用leaflet的折线的指针

Question

我对 React 和传单非常陌生。我正在尝试使用传单绘制 React 地图上的对象中可用的一组纬度和经度。任何有关如何完成此操作的指示都会有所帮助。

我已经浏览了https://react-leaflet.js.org上的 React leaflet 教程。但我无法继续。任何帮助是极大的赞赏。提前致谢。

我拥有的对象数据数组的示例：

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",
  }
]

Answer 1

您可以将数据存储在这样的状态中：

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>

演示