关于如何在 reactjs 和 react-leaflet 中使用 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",
      }
    ]
  };

然后遍历数据和 return 像这样的 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

Answer 2

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

有一个包含经纬度数组的位置数组。
如果 react-leaflet 版本 > 2.8.0 则使用 MapContainer 否则使用 Map.
在要素组内取标记和折线
需要 TileLayer 才能显示里面的地图 div
你可以为图标制作其他组件否则在同一个组件中定义它现在你可以开始了......

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]
});

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

Pointers on how to use leaflet's polyline in reactjs & react-leaflet

javascript

maps

leaflet

reactjs

react-leaflet