有没有办法在反应传单中添加"Snap to road"?



我正在寻找在我的每个标记之间创建所有多段线的方法"快速上路";而不是在点a和b之间绘制的直线。因此,在任何两点之间,我希望这些点自动放置在最近的道路上(如果标记没有放置在道路上(,并希望沿着两点之间最短的道路路线生成多段线。我刚开始研究谷歌地图API,看起来他们有这个功能,但我不想改变我已经拥有的一切。这是我的密码。

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { MapContainer, TileLayer, Polyline } from "react-leaflet";
import "../styles/Map.css";
import AddMarkers from "./AddMarkers";
const Map = () => {
const markers = useSelector((state) => state.markers);
return (
<div className="leaflet-container">
<MapContainer
center={[50.868031999999996, -9]}
zoom={20}
scrollWheelZoom={true}
>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<AddMarkers />
{markers.length > 1 && (
<Polyline
positions={markers.map((marker) => {
return [marker.lat, marker.lng];
})}
/>
)}
</MapContainer>
</div>
);
};
export default Map;

您可能会搜索:https://github.com/makinacorpus/Leaflet.Snap

这样就可以将可拖动标记捕捉到多段线和其他图层。这个页面中的演示链接被破坏了,但它似乎在GitHub页面中有很好的记录,如何使用。我认为您需要使用Leaflet.Draw部分来实现。

祝你好运,让你的地图像预期的那样工作。

最新更新