關於如何在 reactjs 和 react-leaflet 中使用傳單的折線的指針

Question

我對 React 和傳單很陌生。 我正在嘗試使用傳單在 React 的地圖上繪制一組可用的緯度和經度。 關於如何做到這一點的任何指示都會有所幫助。

我已經閱讀了來自https://react-leaflet.js.org 的關於 React 傳單的教程。 但我無法繼續。 任何幫助是極大的贊賞。 提前致謝。

我擁有的對象數據數組的示例：

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>

演示

Answer 2

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

1. 有一個位置數組，其中包含 lat lng 數組。
2. 如果 react-leaflet 版本 > 2.8.0 則使用 MapContainer，否則使用 Map。
3. 在 FeatureGroup 中使用 Marker 和 Take Polyline
4. 需要 TileLayer 來顯示 div 內的地圖
5. 你可以為 Icon 制作其他組件，否則在同一個組件中定義它現在你很高興......

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/leaflet@1.5.1/dist/images/marker-icon.png",
  iconSize: [15, 20],
  iconAnchor: [5, 20],
  popupAnchor: [2, -40]
});