如何删除 L.rectangle(boxes[i])

Question

几天前，我实现了一个 routingControl = L.Routing.control({...})，它非常适合我的需求。但是，我的一位客户还需要我也能够实现它的 RouteBoxer。现在按照我的代码，我想从我的地图中删除这些框以绘制新的。但是，在尝试找到解决方案 2 天后，我放弃了。 wideroad 是一个来自 10、20、30 公里等下拉列表的参数。

function routeBoxer(wideroad) {
  this.route = [];
  this.waypoints = []; //Array for drawBoxes
  this.wideroad = parseInt(wideroad); //Distance in km
  this.routeArray = routingControl.getWaypoints();
  for (var i=0; i<routeArray.length; i++) {
    waypoints.push(routeArray[i].latLng.lng + ',' + routeArray[i].latLng.lat);
  }
  this.route = loadRoute(waypoints, this.drawRoute);
}; //End routeBoxer()

drawroute = function (route) {
  route = new L.Polyline(L.PolylineUtil.decode(route)); // OSRM polyline decoding
  boxes = L.RouteBoxer.box(route, this.wideroad);
  var bounds = new L.LatLngBounds([]);
  for (var i = 0; i < boxes.length; i++) {
    **L.rectangle(boxes[i], {color: "#ff7800", weight: 1}).addTo(this.map);**
    bounds.extend(boxes[i]);
  }
  console.log('drawRoute:',boxes);
  this.map.fitBounds(bounds);
  return route;
}; //End drawRoute()

loadRoute = function (waypoints) {
  var url = '//router.project-osrm.org/route/v1/driving/';
  var _this = this;
  url += waypoints.join(';');
  var jqxhr = $.ajax({
    url: url,
    data: {
      overview: 'full',
      steps: false,
      //compression: false,
      alternatives: false
    },
    dataType: 'json'
   })
  .done(function(data) {
    _this.drawRoute(data.routes[0].geometry);
    //console.log("loadRoute.done:",data);
  })
  .fail(function(data) {
    //console.log("loadRoute.fail:",data);
  });
}; //End loadRoute()

好吧，我现在的问题是如何删除以前绘制的框以绘制新的框，因为使用下拉列表更改了wideroad。我从 Leaflet-routeboxer 应用程序中获得的大部分代码。 提前感谢您的帮助...

Answer 1

您必须保留对矩形的引用，以便以后可以操作（删除它们）。请注意，Leaflet 和 Leaflet-routeboxer 都不会为您执行此操作。

例如：

if (this._currentlyDisplayedRectangles) {
    for (var i = 0; i < this._currentlyDisplayedRectangles.length; i++) {
        this._currentlyDisplayedRectangles[i].remove();
    }
} else {
    this._currentlyDisplayedRectangles = [];
}

for (var i = 0; i < boxes.length; i++) {
    var displayedRectangle = L.rectangle(boxes[i], {color: "#ff7800", weight: 1}).addTo(this.map);
    bounds.extend(boxes[i]);
    this._currentlyDisplayedRectangles.push(displayedRectangle);
}

如果您不存储对L.rectangle() 实例的引用，那么您以后显然将无法对其进行操作。这也适用于其他 Leaflet 层 - 不存储对 Leaflet 层的显式引用是 Leaflet 示例中的常见模式。