reactjs - 有没有办法在反应传单中添加“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='© <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
这应该可以使可拖动标记捕捉到折线和其他图层。此页面中的 Demo-Link 已损坏,但它似乎在 GitHub-Page 中有详细记录,如何使用。我认为您需要使用该部分Leaflet.Draw
进行实施。
祝您好运,让您的地图按预期工作。
推荐阅读
- android - 我应该在 Android FCM 的防火墙中将哪个域或 IP 列入白名单?
- c# - 实体框架:在包含许多记录的表中插入记录时提高性能
- java - 在批处理作业中的 Spring Batch Processor 中生成新项目/CSV-Rows
- jquery - 当我使用 jquery 选择另一个选择框的第一个选项时,如何清除/重置选择框选项?
- android - 蓝牙扫描设备,但频繁扫描后无法写入设备
- php - 如何使用 foreach 循环在 Json 中查找特定数据?
- python - 为什么我在类 python 中使用 super 时会出现此错误
- reactjs - 如何在反应中创建可扩展表?
- r - 用以下列中的数据填充空白值
- javascript - SAPUI5 表项重复 ID