在开发交互式地图应用时，我们经常需要根据用户的操作（例如从下拉菜单选择不同的区域或国家）来动态加载并显示不同的GeoJSON数据。一个常见的需求是，当新的GeoJSON图层被加载时，之前的图层应该被移除，以避免地图上出现多个重叠的图层，影响视觉效果和性能。
问题分析：为什么图层没有被移除？
许多开发者在尝试实现这一功能时，可能会遇到一个问题：尽管使用了 L.LayerGroup 并调用了 clearLayers() 方法，但旧的图层依然保留在地图上。这通常是因为 L.LayerGroup 实例被错误地在每次图层更新的回调函数内部重新创建了。
考虑以下示例代码中常见的错误模式：
class MyMapApplication {
#map; // 假设 #map 是一个 L.Map 实例
constructor(mapId) {
this.#map = L.map(mapId).setView([0, 0], 2);
// ... 其他地图初始化代码
}
_callBack(coords) {
const map = this.#map;
var myStyle = {
color: " #80ff00",
weight: 3,
opacity: 0.5,
};
if (coords) {
// 错误：每次调用时都创建新的 LayerGroup 实例
var LayerGroup = new L.LayerGroup();
LayerGroup.addTo(map); // 将新的空 LayerGroup 添加到地图
var sMap = new L.GeoJSON(coords, { style: myStyle });
LayerGroup.clearLayers(); // 清空的是这个新创建的 LayerGroup (此时是空的)
LayerGroup.addLayer(sMap); // 将 GeoJSON 添加到这个新的 LayerGroup
map.fitBounds(sMap.getBounds());
}
}
}在这段代码中，每次 _callBack 函数被调用时，都会创建一个全新的 L.LayerGroup 实例。尽管 LayerGroup.clearLayers() 被调用，但它清除的是当前这次函数调用中新创建的、尚为空的 LayerGroup。而之前添加的 GeoJSON 图层则属于上一次函数调用中创建的另一个 LayerGroup 实例，或者直接添加到了地图上，因此它们并未被清除。结果就是，每次选择新的国家，都会在地图上叠加一个新的 GeoJSON 图层。
正确的解决方案：重用 LayerGroup 实例
解决这个问题的关键在于确保 L.LayerGroup 实例是持久化的，并且在整个应用生命周期中只有一个实例用于管理动态 GeoJSON 图层。这意味着 L.LayerGroup 应该在地图初始化阶段就被声明和添加到地图，而不是在每次更新时重新创建。
以下是修正后的代码示例，它将 L.LayerGroup 作为类的一个成员变量进行管理：
class MyMapApplication {
#map; // L.Map 实例
#geoJsonLayerGroup; // L.LayerGroup 实例，用于管理动态 GeoJSON 图层
constructor(mapId) {
this.#map = L.map(mapId).setView([0, 0], 
