React-Leaflet/React-Routing-Machine：删除路线和航路点
Posted
技术标签:
【中文标题】React-Leaflet/React-Routing-Machine：删除路线和航路点【英文标题】：React-Leaflet/React-Routing-Machine: Remove route and waypoints 【发布时间】：2020-11-23 06:09:29 【问题描述】：我正在为我的地图使用以下软件包：
"leaflet-routing-machine": "^3.2.12",
"leaflet": "^1.7.1",
"react-leaflet": "^2.7.0",
基本上我有一个路由机组件，我已将它与我的地图和标记集成，即（单击地图上的两个点即可获得路线）您可以拖动每个点并更新路线！
但是，此时我有一个按钮，可以重置所有内容、清除标记、相关的 LAT 和 LONG。但我也只想重置路线。
您可以在地图上看到那些以前的路线（在漂亮的“chartreuse”中）。
现在我有一个函数应该控制组件何时可见：
function clearMarkers()
setIsRoutingDone(false);
isRoutingDone && <Routing isRoutingDone=isRoutingDone map=map myMapRef=myMapRef icon=startIcon, endIcon userLocation=userLocation coords=fromLat, fromLon, toLat, toLon />
这是我的路由机：
import MapLayer from "react-leaflet";
import L from "leaflet";
import "leaflet-routing-machine";
import withLeaflet from "react-leaflet";
class Routing extends MapLayer
constructor(props)
super(props);
createLeafletElement()
const map, coords, icon, removeFrom, removeTo = this.props;
var dStart = L.latLng(coords.fromLat, coords.fromLon);
var dGoal = L.latLng(coords.toLat, coords.toLon);
this.leafletElement = L.Routing.control(
collapsible: true,
lineOptions:
styles: [color: 'chartreuse', opacity: 1, weight: 5]
,
waypoints: [dStart, dGoal],
createMarker: function(i, waypoints, n)
if (i === 0)
marker_icon = icon.startIcon;
var marker_icon;
if (i === 0)
marker_icon = icon.startIcon;
else if (i == n - 1)
marker_icon = icon.endIcon
var marker = L.marker(i === 0 ? dStart : dGoal,
draggable: true,
icon: marker_icon
);
return marker;
).addTo(map.leafletElement);
return this.leafletElement.getPlan();
updateLeafletElement(props)
if(this.leafletElement)
if(this.props.isRoutingDone === false)
this.leafletElement.spliceWaypoints(0, 2); // <-- removes your route
export default withLeaflet(Routing);
实际上我在 updateLeafletElement 函数和 zzilch 中记录了一些内容。
And this is my map:
import React, useState, useEffect, useRef from 'react'
import Map, Marker from 'react-leaflet';
import LocateControl from '../LocateControl/LocateControl.jsx';
import MapboxLayer from '../MapboxLayer/MapboxLayer.jsx';
import Routing from '../RoutingMachine/RoutingMachine.jsx'
export default function MyMap(getAddressFromLatLong, hillfinderFormButtonRef, setCurrentLocation, setCurrentDestination)
var myMapRef = useRef();
useEffect(() =>
hillfinderFormButtonRef.current = clearMarkers;
return() =>
hillfinderFormButtonRef.current = null;
, []);
function resetHandler ()
return myMapRef.current();
;
function clearMarkers()
console.log("markerData ", markerData);
setMarkerData(markerData => [], ...markerData);
setFromLat(fromLat => null);
setFromLon(fromLon => null);
setToLat(toLat => null)
setToLon(toLon => null)
setFrom(from => 0);
setTo(to => 0);
setIsRoutingDone(false);
// setRemoveFrom(removeFrom => null)
// setRemoveTo(removeTo => null)
function saveMap(map)
setMap(map);
function handleOnLocationFound(e)
setUserLocation(e.latlng)
function markerClick(e)
e.originalEvent.view.L.DomEvent.stopPropagation(e)
return (
<Map animate=animate center=userLocation onClick=setMarkers onLocationFound=handleOnLocationFound zoom=zoom ref=saveMap>
markerData && markerData.map((element, index) =>
return (
<Marker
key=index
marker_index=index
position=element
draggable=true
onClick=markerClick
onDragend=updateMarker
icon=element.id === 0 ? startIcon : endIcon
/>
)
)
<MapboxLayer
accessToken=MAPBOX_ACCESS_TOKEN
style="mapbox://styles/mapbox/streets-v9"
/>
<LocateControl startDirectly />
isRoutingDone && <Routing isRoutingDone=isRoutingDone map=map myMapRef=myMapRef icon=startIcon, endIcon userLocation=userLocation coords=fromLat, fromLon, toLat, toLon />
</Map>
)
我把对手头的问题不重要的代码去掉了！
提前致谢！
【问题讨论】：
【参考方案1】：其实我自己解决了！
想想头疼是因为 react-leaflet 有它的 lifeCycle 方法，即 createLeaflet、updateLeafletElement 你不应该忘记常规的 React life 方法！
不确定它们是否重叠，但我发现添加了 componentDidMount：
componentDidMount()
const map = this.props;
map.addControl(this.routing);
使用 updateLeafletElement（我现在正在正确使用该函数的 API）它接受 fromProps 和 toProps 来检查我传递给路由机的道具的值...
updateLeafletElement(fromProps, toProps)
if (toProps.removeRoutingMachine !== false)
this.routing.setWaypoints([]);
最后在卸载时，使用map 上的removeControl 方法，您传递到路由机以删除路由器机！
import MapLayer from 'react-leaflet';
import L from 'leaflet';
import 'leaflet-routing-machine';
import withLeaflet from 'react-leaflet';
class Routing extends MapLayer
constructor(props)
super(props);
createLeafletElement(props)
const map, coords, icon = this.props;
var dStart = L.latLng(coords.fromLat, coords.fromLon);
var dGoal = L.latLng(coords.toLat, coords.toLon);
if (map && !this.routing)
this.routing = L.Routing.control(
collapsible: true,
position: 'bottomleft',
lineOptions:
styles: [ color: 'chartreuse', opacity: 1, weight: 5 ]
,
waypoints: [dStart, dGoal],
createMarker: function(i, waypoints, n)
var marker_icon;
if (i === 0)
marker_icon = icon.startIcon;
else if (i == n - 1)
marker_icon = icon.endIcon;
var marker = L.marker(i === 0 ? dStart : dGoal,
draggable: true,
icon: marker_icon
);
return marker;
);
return this.routing.getPlan();
componentDidMount()
const map = this.props;
console.log('map ', map);
map.addControl(this.routing);
updateLeafletElement(fromProps, toProps)
if (toProps.removeRoutingMachine !== false)
this.routing.setWaypoints([]);
componentWillUnmount()
this.destroyRouting();
destroyRouting()
if (this.props.map)
this.props.map.removeControl(this.routing);
export default withLeaflet(Routing);
希望这会有所帮助！仅供参考：这是app 我正在使用路由机，以防您想浏览其他集成...
【讨论】：
以上是关于React-Leaflet/React-Routing-Machine：删除路线和航路点的主要内容，如果未能解决你的问题，请参考以下文章