Używam następujących pakietów dla mojej mapy:

    "leaflet-routing-machine": "^3.2.12",
    "leaflet": "^1.7.1",
    "react-leaflet": "^2.7.0",

Zasadniczo mam komponent maszyny routingu, którą zintegrowałem z moją mapą i znacznikami I.E. (Po kliknięciu dwóch punktów na mapie otrzymujesz trasę) Możesz przeciągnąć każdą i aktualizacje trasy!

Jednak w tym momencie mam przycisk, który resetuje wszystko, oczyszcza znaczniki, powiązane lat i długie. Ale chcę też też zresetować trasę.

enter image description here

Możesz zobaczyć te poprzednie trasy (w pięknym "Chartreuse") pozostań na mapie.

W tej chwili mam funkcję, która ma kontrolować, gdy składnik jest widoczny:

function clearMarkers(){
  setIsRoutingDone(false);
}

 {isRoutingDone &&  <Routing isRoutingDone={isRoutingDone} map={map} myMapRef={myMapRef} icon={{startIcon, endIcon}} userLocation={userLocation}  coords={{fromLat, fromLon, toLat, toLon}}  />}

To jest moja maszyna routingu:

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);

Właściwie zalogowałem coś w funkcji {X0}} i 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>

  )
}

Pozbawiłem się kodu, który nie jest ważny dla problemu w ręku!

Z góry dziękuję!

3
Antonio Pavicevac-Ortiz 23 listopad 2020, 09:09

1 odpowiedź

Najlepsza odpowiedź

Właściwie radziłem sobie z rozwiązaniem!

Pomyśl, że scratcher Head był reakcją, ma swoje metody życia, tj. CreateLeaflet, UpdateLeAleMement Nie powinieneś zapomnieć o regularnych metodach życia Reaguj!

Nie jestem pewien, czy się pokrywają, ale znalazłem dodawanie ComponentDidMount:

  componentDidMount() {
    const { map } = this.props;

    map.addControl(this.routing);
  }

Dzięki UpdateLeafletElement (używam API poprawnie teraz), akceptuje fromProps i toProps

  updateLeafletElement(fromProps, toProps) {
    if (toProps.removeRoutingMachine !== false) {
      this.routing.setWaypoints([]);
    }
  }

 

Wreszcie na odmowa, użyj metody removeControl na map przechodzisz do maszyny routingu, aby usunąć maszynę routera!

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);

Mam nadzieję że to pomoże! Fyi: To jest Aplikacja Używam maszyny routingu w przypadku, gdy chcesz przeglądać Inne integracje ...

1
Antonio Pavicevac-Ortiz 13 grudzień 2020, 14:31