我正在为我的地图使用以下软件包:
"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>
)
}
我摆脱了对手头的问题不重要的代码!
提前致谢!