如何解决带有钩子的 react-leaflet v3 上的 L.Routing.control
我只看到 L.Routing.control 在版本 3 下工作,在 v3 上有等效的版本吗?我正在尝试设置两点之间的航点路线和方向。
解决方法
您可以创建自己的自定义组件,使用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。