如何更新 leaflet 路线？

Question

赏金将在 6 小时后到期。 此问题的答案有资格获得+50声望赏金。 Carl正在寻找一个规范的答案。

所以我有一个带有 leaflet 路由的组件，它看起来像这样：

function LeafletRoutingMachine() {
  const map = useMap();
  const route = useSelector((state) => state.route.route);

  const control = L.Routing.control({
    waypoints: [
      L.latLng(route.coord_from_lat, route.coord_from_lng),
      L.latLng(route.coord_to_lat, route.coord_to_lng),
    ],
  });

  const changeRoute = () => {
    control.remove();
    control.addTo(map);
  };

  useEffect(() => {
    changeRoute();
  }, [route]);

  return null;
}

export default LeafletRoutingMachine;

我单击带有坐标的不同行的表格，它应该更改 map 上的路线。虽然它起作用了，但我只需要在屏幕上显示一条路线，但现在它绘制了新路线，而以前的路线仍然存在. 我怎样才能从 map 中删除以前的路由？

Answer 1

在向map添加新路由之前，可以通过调用路由控件的remove方法来删除map之前的路由。

以下是如何执行此操作的示例：

function LeafletRoutingMachine() {
  const map = useMap();
  const route = useSelector((state) => state.route.route);

  const control = L.Routing.control({
    waypoints: [
      L.latLng(route.coord_from_lat, route.coord_from_lng),
      L.latLng(route.coord_to_lat, route.coord_to_lng),
    ],
  });

  // create a ref to store the previous control
  const prevControlRef = useRef(control);

  const changeRoute = () => {
    //remove the previous control
    prevControlRef.current.remove();
    //add new control
    control.addTo(map);
    //update ref
    prevControlRef.current = control;
  };

  useEffect(() => {
    changeRoute();
  }, [route]);

  return null;
}

通过使用 ref prevControlRef 来存储之前的控件，并在添加新控件之前将其删除，它将确保在 map 上一次只显示一个路由。

还需要注意的是，确保在卸载组件时删除控件，您可以使用 useEffect cleanup function 来执行此操作。

useEffect(() => {
    changeRoute();
    return () => {
      prevControlRef.current.remove();
    }
  }, [route]);

这样，当组件卸载时，控件将从 map 中删除，并且当路由更改时，它将删除以前的路由并添加新路由。

Answer 2

请检查文档

https://www.liedman.net/leaflet-routing-machine/api/

可以在map上设置单控

并使用

control.setWaypoints(// 新点)