宣传单张 - 更改所有图层

Question

Leaflet 1.0.3和1.1.0之间发生了一些变化，使我无法再动态删除地图上的所有图层，然后在其位置添加一组新图层。

添加一组航点和基本地图（单张图片）：

function drawMap() {
  waypointLayer = L.layerGroup([]);
  var bounds = [[0, 0], [30, 30]];

  L.imageOverlay(
    "https://www.dropbox.com/s/r098ggmze3763fx/examplemap.png?raw=1",
    bounds
  ).addTo(ourMap);
  ourMap.fitBounds(bounds);

  for (var wp of waypoints[showPoints]) {
    waypointLayer.addLayer(
      L.rectangle([[wp[0] + 0.2, wp[1] - 0.2], [wp[0] - 0.2, wp[1] + 0.2]], {
        color: "black",
        fillColor: "black",
        fillOpacity: 0.9
      })
    );
  }
  ourMap.addLayer(waypointLayer);
}

要删除所有图层，我正在使用：

  ourMap.eachLayer(function(thisLayer) {
    ourMap.removeLayer(thisLayer);
  });

我在https://codepen.io/cablemonkey42/pen/wpayaX处使用Leaflet 1.2.0设置了一个codepen。

对于使用相同确切代码的工作1.0.3示例：https://codepen.io/cablemonkey42/pen/PEqRyq

除了我可能很明显的新手技能之外，有谁可以请我指出我做错了什么？感谢

Answer 1

看起来Leaflet版本1.1.0+和1.0.3-之间确实存在回归，这是因为您删除了绘制矩形的SVG渲染器图层（由Leaflet自动添加）。< / p>

你有几个＆＃34; easy＆＃34;暂时的解决方法：

1. 不要盲目地从地图中删除所有图层，而只删除已明确添加的图层，以保持SVG渲染器图层的完整。

$("#mapset").change(function() {
  //Erase everything shown
  /*ourMap.eachLayer(function(thisLayer) {
    ourMap.removeLayer(thisLayer);
  });*/

  /////////////////////////////////////////////////////////////
  // Erase only the explicitly added layers,
  // in order to preserve automatically managed layers (Renderer).
  if (imageOverlay) {
    imageOverlay.remove();
  }
  if (waypointLayer) {
    waypointLayer.remove();
  }
  /////////////////////////////////////////////////////////////

  //assign showPoints to whichever waypoint set (0 or 1) we want to show
  showPoints = $(this).val();

  //now draw it...
  drawMap();
});

＆＃13;
＆＃13;
var ourMap; //LeafletJS Map
var waypointLayer; //LayerGroup of Waypoints

/////////////////////////////////////////////////////////////
var imageOverlay; // Reference to explicitly added layer.
/////////////////////////////////////////////////////////////

//The variable "waypoints" is two different sets of waypoints.
//Which waypoint shown is defined by "showPoints".
var waypoints = [];
waypoints[0] = [
  [5, 5],
  [10, 5],
  [20, 20]
];
waypoints[1] = [
  [25, 25],
  [20, 15],
  [10, 10]
];
var showPoints = 0;

$(function() {
  //Initialize map and draw default data
  ourMap = L.map("ourmap", {
    crs: L.CRS.Simple,
    minZoom: 3,
    maxZoom: 10,
    zoomDelta: 1,
    zoomSnap: 0.01
  });
  drawMap();
});


$("#mapset").change(function() {
  //Erase everything shown
  /*ourMap.eachLayer(function(thisLayer) {
    ourMap.removeLayer(thisLayer);
  });*/

  /////////////////////////////////////////////////////////////
  // Erase only the explicitly added layers,
  // in order to preserve automatically managed layers (Renderer).
  if (imageOverlay) {
    imageOverlay.remove();
  }
  if (waypointLayer) {
    waypointLayer.remove();
  }
  /////////////////////////////////////////////////////////////

  //assign showPoints to whichever waypoint set (0 or 1) we want to show
  showPoints = $(this).val();

  //now draw it...
  drawMap();
});

function drawMap() {
  waypointLayer = L.layerGroup([]);
  var bounds = [
    [0, 0],
    [30, 30]
  ];

  //assign a base map (blank tan-ish map for demo, normally I would change based on data set)

  /////////////////////////////////////////////////////////////
  // Keep a reference to each explicitly added layer.
  imageOverlay = L.imageOverlay(
    "https://www.dropbox.com/s/r098ggmze3763fx/examplemap.png?raw=1",
    bounds
  ).addTo(ourMap);
  /////////////////////////////////////////////////////////////

  //zoom to show the entire base map image
  ourMap.fitBounds(bounds);

  //add each waymark of our selected set to a layergroup
  for (var wp of waypoints[showPoints]) {
    waypointLayer.addLayer(
      L.rectangle([
        [wp[0] + 0.2, wp[1] - 0.2],
        [wp[0] - 0.2, wp[1] + 0.2]
      ], {
        color: "black",
        fillColor: "black",
        fillOpacity: 0.9
      })
    );
  }

  //add the layergroup to the map
  ourMap.addLayer(waypointLayer);
}
＆＃13;
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

Waypoint Set:
<select id="mapset">
    <option value="0" selected>0</option>
    <option value="1">1</option>
  </select>
<div id="ourmap" style="height: 170px"></div>
＆＃13;
＆＃13;
＆＃13;
1. 跳过渲染器，即那些L.Renderer的实例。

$("#mapset").change(function() {
  //Erase everything shown
  ourMap.eachLayer(function(thisLayer) {

    /////////////////////////////////////////////////////////////
    // Skip Renderer type layers.
    if (thisLayer instanceof L.Renderer) {
      return;
    }
    /////////////////////////////////////////////////////////////

    ourMap.removeLayer(thisLayer);
  });

  //assign showPoints to whichever waypoint set (0 or 1) we want to show
  showPoints = $(this).val();

  //now draw it...
  drawMap();
});

＆＃13;
＆＃13;
var ourMap; //LeafletJS Map
var waypointLayer; //LayerGroup of Waypoints

//The variable "waypoints" is two different sets of waypoints.
//Which waypoint shown is defined by "showPoints".
var waypoints = [];
waypoints[0] = [
  [5, 5],
  [10, 5],
  [20, 20]
];
waypoints[1] = [
  [25, 25],
  [20, 15],
  [10, 10]
];
var showPoints = 0;

$(function() {
  //Initialize map and draw default data
  ourMap = L.map("ourmap", {
    crs: L.CRS.Simple,
    minZoom: 3,
    maxZoom: 10,
    zoomDelta: 1,
    zoomSnap: 0.01
  });
  drawMap();
});


$("#mapset").change(function() {
  //Erase everything shown
  ourMap.eachLayer(function(thisLayer) {

    /////////////////////////////////////////////////////////////
    // Skip Renderer type layers.
    if (thisLayer instanceof L.Renderer) {
      return;
    }
    /////////////////////////////////////////////////////////////

    ourMap.removeLayer(thisLayer);
  });

  //assign showPoints to whichever waypoint set (0 or 1) we want to show
  showPoints = $(this).val();

  //now draw it...
  drawMap();
});

function drawMap() {
  waypointLayer = L.layerGroup([]);
  var bounds = [
    [0, 0],
    [30, 30]
  ];

  //assign a base map (blank tan-ish map for demo, normally I would change based on data set)
  L.imageOverlay(
    "https://www.dropbox.com/s/r098ggmze3763fx/examplemap.png?raw=1",
    bounds
  ).addTo(ourMap);

  //zoom to show the entire base map image
  ourMap.fitBounds(bounds);

  //add each waymark of our selected set to a layergroup
  for (var wp of waypoints[showPoints]) {
    waypointLayer.addLayer(
      L.rectangle([
        [wp[0] + 0.2, wp[1] - 0.2],
        [wp[0] - 0.2, wp[1] + 0.2]
      ], {
        color: "black",
        fillColor: "black",
        fillOpacity: 0.9
      })
    );
  }

  //add the layergroup to the map
  ourMap.addLayer(waypointLayer);
}
＆＃13;
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

Waypoint Set:
<select id="mapset">
    <option value="0" selected>0</option>
    <option value="1">1</option>
  </select>
<div id="ourmap" style="height: 170px"></div>
＆＃13;
＆＃13;
＆＃13;
1. 使用Canvas渲染器而不是默认的SVG渲染器（带preferCanvas地图选项）。前者似乎不受这个错误的影响。

$(function() {
  //Initialize map and draw default data
  ourMap = L.map("ourmap", {
    crs: L.CRS.Simple,
    minZoom: 3,
    maxZoom: 10,
    zoomDelta: 1,
    zoomSnap: 0.01,

    /////////////////////////////////////////////////////////////
    preferCanvas: true // Use Canvas that is immune to SVG Renderer bug.
    /////////////////////////////////////////////////////////////
  });
  drawMap();
});

＆＃13;
＆＃13;
var ourMap; //LeafletJS Map
var waypointLayer; //LayerGroup of Waypoints

//The variable "waypoints" is two different sets of waypoints.
//Which waypoint shown is defined by "showPoints".
var waypoints = [];
waypoints[0] = [
  [5, 5],
  [10, 5],
  [20, 20]
];
waypoints[1] = [
  [25, 25],
  [20, 15],
  [10, 10]
];
var showPoints = 0;

$(function() {
  //Initialize map and draw default data
  ourMap = L.map("ourmap", {
    crs: L.CRS.Simple,
    minZoom: 3,
    maxZoom: 10,
    zoomDelta: 1,
    zoomSnap: 0.01,

    /////////////////////////////////////////////////////////////
    preferCanvas: true // Use Canvas that is immune to SVG Renderer bug.
    /////////////////////////////////////////////////////////////
  });
  drawMap();
});


$("#mapset").change(function() {
  //Erase everything shown
  ourMap.eachLayer(function(thisLayer) {
    ourMap.removeLayer(thisLayer);
  });

  //assign showPoints to whichever waypoint set (0 or 1) we want to show
  showPoints = $(this).val();

  //now draw it...
  drawMap();
});

function drawMap() {
  waypointLayer = L.layerGroup([]);
  var bounds = [
    [0, 0],
    [30, 30]
  ];

  //assign a base map (blank tan-ish map for demo, normally I would change based on data set)
  L.imageOverlay(
    "https://www.dropbox.com/s/r098ggmze3763fx/examplemap.png?raw=1",
    bounds
  ).addTo(ourMap);

  //zoom to show the entire base map image
  ourMap.fitBounds(bounds);

  //add each waymark of our selected set to a layergroup
  for (var wp of waypoints[showPoints]) {
    waypointLayer.addLayer(
      L.rectangle([
        [wp[0] + 0.2, wp[1] - 0.2],
        [wp[0] - 0.2, wp[1] + 0.2]
      ], {
        color: "black",
        fillColor: "black",
        fillOpacity: 0.9
      })
    );
  }

  //add the layergroup to the map
  ourMap.addLayer(waypointLayer);
}
＆＃13;
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

Waypoint Set:
<select id="mapset">
    <option value="0" selected>0</option>
    <option value="1">1</option>
  </select>
<div id="ourmap" style="height: 170px"></div>
＆＃13;
＆＃13;
＆＃13;

您还可以轻松修补SVG渲染器代码：

L.SVG.include({
  _destroyContainer: function() {
    L.DomUtil.remove(this._container);
    L.DomEvent.off(this._container);
    delete this._container;
    delete this._rootGroup;

    // Make sure to also clear the cache for svgSize,
    // so that next container width and height will be set.
    delete this._svgSize;
  }
});

＆＃13;
＆＃13;
/////////////////////////////////////////////////////////////
// Patch SVG Renderer code to remove regression bug.
L.SVG.include({
  _destroyContainer: function() {
    L.DomUtil.remove(this._container);
    L.DomEvent.off(this._container);
    delete this._container;
    delete this._rootGroup;

    // Make sure to also clear the cache for svgSize,
    // so that next container width and height will be set.
    delete this._svgSize;
  }
});
/////////////////////////////////////////////////////////////

var ourMap; //LeafletJS Map
var waypointLayer; //LayerGroup of Waypoints

//The variable "waypoints" is two different sets of waypoints.
//Which waypoint shown is defined by "showPoints".
var waypoints = [];
waypoints[0] = [
  [5, 5],
  [10, 5],
  [20, 20]
];
waypoints[1] = [
  [25, 25],
  [20, 15],
  [10, 10]
];
var showPoints = 0;

$(function() {
  //Initialize map and draw default data
  ourMap = L.map("ourmap", {
    crs: L.CRS.Simple,
    minZoom: 3,
    maxZoom: 10,
    zoomDelta: 1,
    zoomSnap: 0.01
  });
  drawMap();
});


$("#mapset").change(function() {
  //Erase everything shown
  ourMap.eachLayer(function(thisLayer) {
    ourMap.removeLayer(thisLayer);
  });

  //assign showPoints to whichever waypoint set (0 or 1) we want to show
  showPoints = $(this).val();

  //now draw it...
  drawMap();
});

function drawMap() {
  waypointLayer = L.layerGroup([]);
  var bounds = [
    [0, 0],
    [30, 30]
  ];

  //assign a base map (blank tan-ish map for demo, normally I would change based on data set)
  L.imageOverlay(
    "https://www.dropbox.com/s/r098ggmze3763fx/examplemap.png?raw=1",
    bounds
  ).addTo(ourMap);

  //zoom to show the entire base map image
  ourMap.fitBounds(bounds);

  //add each waymark of our selected set to a layergroup
  for (var wp of waypoints[showPoints]) {
    waypointLayer.addLayer(
      L.rectangle([
        [wp[0] + 0.2, wp[1] - 0.2],
        [wp[0] - 0.2, wp[1] + 0.2]
      ], {
        color: "black",
        fillColor: "black",
        fillOpacity: 0.9
      })
    );
  }

  //add the layergroup to the map
  ourMap.addLayer(waypointLayer);
}
＆＃13;
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

Waypoint Set:
<select id="mapset">
    <option value="0" selected>0</option>
    <option value="1">1</option>
  </select>
<div id="ourmap" style="height: 170px"></div>
＆＃13;
＆＃13;
＆＃13;