Undo/Redo 传单路由机

Question

我正在尝试为我的使用传单和传单路由机的工具实现简单的 undo/redo 功能。这是我的功能：

var activityBuffer = [];
var undoFlag = false;

Routing.on('routeselected', function(){
  if (undoFlag) {
     undoFlag = false;
  }
  else {
    var newWaypoints = Routing.getWaypoints();
    activityBuffer.push(newWaypoints);
    console.log(activityBuffer);
  }
});

function undoActivity(){
  var lastStateIndex = activityBuffer.length - 2
     if (lastStateIndex >= 0) {
        var oldState = activityBuffer[lastStateIndex];
        Routing.setWaypoints(oldState);
        activityBuffer.splice( activityBuffer.length -  1, 1);
        undoFlag = true;
        console.log(activityBuffer);
     }
}

如果我只是添加更多点并触发 routeselected 事件，它工作正常，但问题是当我移动我的 waypoints 并且相同点的坐标发生变化时，该航路点的 activityBuffer 中的条目也是自己更新的，添加另一个新数组waypoints也被推送。为什么会这样？

例如：

我希望我解释了我的问题。寻求帮助！

Answer 1

我认为问题在于 Leaflet Routing Machine 在某些情况下会改变（更改）现有的路点实例，而不是总是创建新的路点实例。例如拖动航点时，同一实例覆盖航点的坐标。

由于您的 activityBuffer 保存了对现有 waypoints 的引用，因此当 LRM 更新它们时，这些 waypoints 也会更新。存储 waypoints 的副本应该可以解决您的问题。

另请注意，严格来说，您应该存储传递给事件处理程序 (routeselected) 的路由中的 waypoints，而不是获取控件的 waypoints - 这可能是例如，当网络延迟很高时很重要。

Undo/Redo 传单路由机

Undo/Redo for leafet routing machine

javascript

leaflet

leaflet.draw

leaflet-routing-machine