Указания о том, как использовать ломаную линию листовки в reactjs и react-leaflet

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

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>

Демо

https://codesandbox.io/s/react-leaflet-polyline-hedzz

1. Существует массив позиций, в котором содержится массив lat lng.
2. Возьмите MapContainer, если версия реактивной листовки> 2.8.0, в противном случае Map.
3. Возьмите маркер и возьмите полилинию внутри FeatureGroup
4. TileLayer нужен для отображения карты внутри div
5. Вы можете сделать другой компонент для значка. В противном случае определите его в том же компоненте. Теперь тебе хорошо идти...

import {
  FeatureGroup,
  MapContainer,
  Marker,
  Polyline,
  TileLayer
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";

const CustomPoliLine = () => {
  const mapRef = useRef();
  const [center, setCenter] = useState({ lat: 36.460353, lng: 126.440674 });
  const [map, setMap] = useState(null);

  const pos = [
    [36.460353, 126.440674],
    [34.789594, 135.438084], //to jpn
    [36.460353, 126.440674],
    [55.410343, 37.902312], //to rus
    [36.460353, 126.440674],
    [40.085148, 116.552407] //to chi
  ];

  return (
    <div>
      <MapContainer
        style = {{ height: "480px", width: "100%" }}
        zoom = {6}
        center = {center}
        ref = {mapRef}
        whenReady = {setMap}
        scrollWheelZoom = {true}
      >
        <FeatureGroup>
          {pos?.map((mark, i) => (
            <Marker key = {i} position = {mark} icon = {customMarkerUserPos} />
          ))}

          <Polyline positions = {pos} color = "red" />
        </FeatureGroup>

        <TileLayer url = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      </MapContainer>
    </div>
  );
};

export default CustomPoliLine;



export const customMarkerUserPos = new L.Icon({
  iconUrl: "https://unpkg.com/[email protected]/dist/images/marker-icon.png",
  iconSize: [15, 20],
  iconAnchor: [5, 20],
  popupAnchor: [2, -40]
});