L.Routing.control 在带有钩子的 react-leaflet v3 上

Question

我只看到 L.Routing.control 在版本 3 下可以使用，v3 上是否有与之等效的版本？我正在尝试设置两点之间的航点路线和方向。

Answer 1

您可以使用 leaflet-routing-machine 创建自己的自定义组件以设置两点之间的路由：

安装库：

npm i leaflet-routing-machine

导入库的 css 文件：

import "leaflet-routing-machine/dist/leaflet-routing-machine.css";

导入库的js文件：

import "leaflet-routing-machine";

创建自定义排版：

function Routing() {
  const map = useMap();

  useEffect(() => {
    if (!map) return;

    const routingControl = L.Routing.control({
      waypoints: [L.latLng(57.74, 11.94), L.latLng(57.6792, 11.949)],
      routeWhileDragging: true
    }).addTo(map);

    return () => map.removeControl(routingControl);
  }, [map]);

  return null;
}

然后将其用作常规的 react-leaflet 组件：

<MapContainer ...>
  ...
  <Routing/>
</MapContainer>

Demo

L.Routing.control 在带有钩子的 react-leaflet v3 上

L.Routing.control on react-leaflet v3 with hooks

leaflet

reactjs

react-leaflet