Leaflet-routing-machine：如果航点已保存在某种数据存储中，有没有办法加载它们？

如何解决Leaflet-routing-machine：如果航点已保存在某种数据存储中，有没有办法加载它们？

我关注了这个great tutorial，因为它能够将它添加到我的路由机器中；但是，我想将航点保存在本地存储中并在需要时加载它们。

我在创建我的路由机时试过这个：

 if (map && !this.control) {
      this.control = L.Routing.control({
        collapsible: true,show: false,position: 'bottomleft',lineOptions: {
          styles: [{ color: 'chartreuse',opacity: 1,weight: 5 }]
        },waypoints: [null],//<--- I set the waypoints to null
        createMarker: function(i,wp,nWps) {
          if (i === 0) {
            return L.marker(wp.latLng,{
              icon: startIcon,draggable: true
            });
          }
          if (i === nWps - 1) {
            return L.marker(wp.latLng,{
              icon: endIcon,draggable: true
            });
          }
        }
      })
        .on('routingstart',this.handleLoader.bind(this))
        .on('routeselected',function(e) {
          var route = e.route;
        })
        .on('routesfound routingerror',this.handleLoader.bind(this));

然后在开始和目标事件的点击事件的初始侦听器中：

  map.on(
        'click',function(e) {
          var container = L.DomUtil.create('div'),startBtn = createButton('Start from this location',container),destBtn = createButton('Go to this location',container);

          function createMarkerHelper(marker) {
            setUserMarkers(marker);
          }

          L.popup()
            .setContent(container)
            .setLatLng(e.latlng)
            .openOn(map);

          L.DomEvent.on(
            startBtn,'click',function() {
              var wayPointStart = this.control.getWaypoints()[0].latLng;
              if (wayPointStart != null && userMarkers[0] !== undefined) {
                this.control.spliceWaypoints(0,1,userMarkers[0]);
              } else {
                this.control.spliceWaypoints(0,e.latlng);
                createMarkerHelper(e.latlng);
              }
              map.closePopup();
            }.bind(this)
          );

          L.DomEvent.on(
            destBtn,function() {
              var wapPointDestination = this.control.getWaypoints()[1].latLng;

              if (wapPointDestination != null && userMarkers[1] !== undefined) {
                this.control.spliceWaypoints(
                  this.control.getWaypoints().length - 1,userMarkers[1]
                );
              } else {
                this.control.spliceWaypoints(
                  this.control.getWaypoints().length - 1,e.latlng
                );
                createMarkerHelper(e.latlng);
              }

              map.closePopup();
            }.bind(this)
          );
        }.bind(this)
      );

这就是我在开始 click 事件时所尝试的：

      function() {
              var wayPointStart = this.control.getWaypoints()[0].latLng;
              if (wayPointStart != null && userMarkers[0] !== undefined) {
                this.control.spliceWaypoints(0,e.latlng);
                createMarkerHelper(e.latlng);
              }
              map.closePopup();
            }.bind(this)

所以基本上我使用 getWaypoints 方法来检查航点是否为空，（它会在重新开始时）并检查是否有任何标记在本地存储中，如果条件为真，它会自然加载标记。如果不是真的，它会像平常一样设置它。

然后Leaflet有更新功能，可以用来查看props是否有变化：

  updateLeafletElement(fromProps,toProps) {

    var start =
        toProps.userMarkers[0] !== undefined &&
        this.control.getWaypoints()[1].latLng != null
          ? toProps.userMarkers[0]
          : null,destination =
        toProps.userMarkers[1] !== undefined &&
        this.control.getWaypoints()[1].latLng != null
          ? toProps.userMarkers[1]
          : null;

    this.control.spliceWaypoints(0,start);
    this.control.spliceWaypoints(this.control.getWaypoints().length - 1,destination);

    if (toProps.removeRoutingMachine !== false) {
      this.control.setWaypoints([]);
    }
  }

我的想法是这将始终确保标记始终得到更新。但是没有用。

有什么想法吗？提前致谢！