在地图上绘制边界矩形后，绘制另一个矩形不会删除上一个矩形

Question

我创建了一个在地图上绘制边界矩形的函数。当我使用创建一个新的矩形功能时，带有传单随附的功能时，手动绘制的矩形不会清除。当某人使用创建新矩形时，如何清除手动绘制的矩形？

function drawRectangle()

{

var north = document.getElementById("north").value;
 var west = document.getElementById("west").value;
var east = document.getElementById("east").value;
var south = document.getElementById("south").value;
 var lat_lon = [[north,east],[south,west]];

  var rectangle = L.rectangle(lat_lon, { draggable: true ,redraw:true});
  rectangle.addTo(map);
 map.fitBounds(rectangle.getBounds());
}

手动添加矩形

Answer 1

如果您在绘制下一个矩形之前将矩形声明在drawRectangle函数外面，则可以从地图上删除它：

var rectangle;
function drawRectangle()
{
  if(rectangle)
    rectangle.remove(map)

  var north = document.getElementById("north").value;
  var west = document.getElementById("west").value;
  var east = document.getElementById("east").value;
  var south = document.getElementById("south").value;
  var lat_lon = [[north,east],[south,west]];

  rectangle = L.rectangle(lat_lon, { draggable: true ,redraw:true});
  rectangle.addTo(map);
  map.fitBounds(rectangle.getBounds());
}

或者如果您希望在单击矩形按钮中将该逻辑放入事件处理程序中：

map.on('editable:drawing:move', function (e) { 
  if(rectangle)
    rectangle.remove(map)
});