有没有办法在反应传单中添加“Snap to road”？答案

【问题标题】：Is there a way to add "Snap to road" in react leaflet?有没有办法在反应传单中添加“Snap to road”？
【发布时间】：2021-05-03 20:13:29
【问题描述】：

我正在寻找使每个标记之间的所有折线“对齐道路”的方法，而不是在点 a 和 b 之间绘制直线。因此，在任意两点之间，我希望将这些点自动放置在最近的道路上（如果标记未放置在道路上），并且希望沿着两点之间的最短道路生成一条折线。我刚刚开始研究 google maps 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;

【问题讨论】：

使用leaflet-routing-machine。查看this example integrating leaflet-routing-machine with react-leaflet，尽管该示例使用 react-leaflet v2，因此您必须重写它以使用您正在使用的 V3。
我看到你已经为此添加了赏金。我可能会建议在您的问题中添加一些细节。您是否只需要放置标记，并在它们之间绘制一条折线，沿着产生最短行驶时间的道路？或者您是否还需要能够拖动标记，并且当您拖动时，在拖动动作中的任何给定时刻，该折线是否与结束标记和拖动标记之间的任何道路一致？我很难理解你的意图，我不想让你浪费你的赏金
谢谢。我添加了更改@Seth Lutske

标签： reactjs leaflet react-leaflet leaflet-routing-machine

【解决方案1】：

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

这应该可以实现将可拖动标记捕捉到折线和其他图层。此页面中的 Demo-Link 已损坏，但它似乎在 GitHub-Page 中有详细记录，如何使用。我认为您需要使用 Leaflet.Draw 部分来实现。

祝您好运，让您的地图按预期工作。

【讨论】：

我刚刚打开了一个 PR 来修复演示链接 :)
看起来像 Leaflet 的实现，我正在寻找一个反应传单的实现