Leaflet点击删除按钮后图层残留小方块问题求助

我是JavaScript和Leaflet新手，现有一个加载了两张TIFF影像的Leaflet地图。每张影像都关联着一个包含两个按钮和文本的图层，一个按钮用于定位到影像位置，另一个用于删除影像。点击删除按钮时，我希望关联的图层也一并消失，但目前会残留一个小方块。

地图初始状态（影像及两个图层）：

点击删除按钮后，影像消失，但其中一个图层变为小方块：

我希望这个小方块也能消失，请问该如何实现？

现有代码 #

JavaScript #

var map = L.map('map').setView([0, 0], 5);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var geoTIFFLayerGroup = L.layerGroup().addTo(map);

function addGeoTIFFToGroup(imagePath, groupName) {
  fetch(imagePath)
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => parseGeoraster(arrayBuffer))
    .then(georaster => {
      var layer = new GeoRasterLayer({
        georaster: georaster,
        opacity: 0.7,
        resolution: 256
      });
      layer.addTo(geoTIFFLayerGroup);

      var layerControl = L.control.layers(null, null, {
        collapsed: false
      }).addTo(map);

      // Add a checkbox to the layer control for each GeoTIFF layer
      layerControl.addOverlay(layer, groupName);

      // Add the custom button to the layer control
      var locationButton = L.DomUtil.create('button', 'custom-button');
      locationButton.innerHTML = 'Go to Image Location';
      locationButton.onclick = function() {
        map.fitBounds(layer.getBounds());

      };
      layerControl.getContainer().appendChild(locationButton);

      // Add the custom button to the layer control
      var deleteButton = L.DomUtil.create('button', 'custom-button');
      deleteButton.innerHTML = 'Delete image';
      deleteButton.onclick = function() {
        if (layer) {
          map.removeLayer(layer);

          var container = layerControl.getContainer();
          container.removeChild(deleteButton);

          container.removeChild(locationButton);

          // Remove the layer from the layer group
          layerControl.removeLayer(layer);
          layerControl._update();
          geoTIFFLayerGroup.removeLayer(layer);
        }


      };
      layerControl.getContainer().appendChild(deleteButton);

      map.fitBounds(layer.getBounds());
    })
    .catch(error => console.error('Error loading image:', error));
}

// Replace 'path/to/your/image.tif' with the actual paths of your local images

var imagePath1 = 'Ortomosaico.tif';
var imagePath2 = 'example_4326.tif';

addGeoTIFFToGroup(imagePath1, 'GeoTIFF 1');
addGeoTIFFToGroup(imagePath2, 'GeoTIFF 2');

CSS #

#map {
  height: 500px;
}

.custom-control {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: white;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  z-index: 1000;
}

HTML #

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/georaster"></script>
<script src="https://unpkg.com/georaster-layer-for-leaflet"></script>

解决方案 #

核心问题是每次添加影像时都创建了一个新的L.control.layers控件，而非复用同一个控件。删除按钮仅移除了当前控件内的元素，但旧的控件容器残留，就会显示成小方块。

修改步骤 #

1. 全局创建唯一图层控件：把layerControl的创建移到函数外部，确保整个地图只有一个图层控件
2. 关联按钮与对应图层条目：将按钮插入到对应图层的DOM条目内，而非直接追加到控件容器
3. 优化删除逻辑：移除图层的同时，确保控件内的对应条目也被彻底清理

修改后的完整代码 #

JavaScript

var map = L.map('map').setView([0, 0], 5);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var geoTIFFLayerGroup = L.layerGroup().addTo(map);
// 全局唯一的图层控件
var layerControl = L.control.layers(null, null, { collapsed: false }).addTo(map);

function addGeoTIFFToGroup(imagePath, groupName) {
  fetch(imagePath)
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => parseGeoraster(arrayBuffer))
    .then(georaster => {
      var layer = new GeoRasterLayer({
        georaster: georaster,
        opacity: 0.7,
        resolution: 256
      });
      layer.addTo(geoTIFFLayerGroup);

      // 添加图层到全局控件
      layerControl.addOverlay(layer, groupName);
      
      // 找到刚添加的图层对应的DOM条目
      var layerItems = layerControl.getContainer().querySelectorAll('.leaflet-control-layers-overlays label');
      var targetItem = layerItems[layerItems.length - 1];

      // 添加定位按钮到图层条目
      var locationButton = L.DomUtil.create('button', 'custom-button');
      locationButton.innerHTML = '定位到影像';
      locationButton.style.marginLeft = '8px';
      locationButton.onclick = function() {
        map.fitBounds(layer.getBounds());
      };
      targetItem.appendChild(locationButton);

      // 添加删除按钮到图层条目
      var deleteButton = L.DomUtil.create('button', 'custom-button');
      deleteButton.innerHTML = '删除影像';
      deleteButton.style.marginLeft = '8px';
      deleteButton.onclick = function() {
        // 移除图层实例
        map.removeLayer(layer);
        geoTIFFLayerGroup.removeLayer(layer);
        // 从控件移除图层并更新UI
        layerControl.removeLayer(layer);
        layerControl._update();
      };
      targetItem.appendChild(deleteButton);

      map.fitBounds(layer.getBounds());
    })
    .catch(error => console.error('加载影像出错:', error));
}

var imagePath1 = 'Ortomosaico.tif';
var imagePath2 = 'example_4326.tif';

addGeoTIFFToGroup(imagePath1, 'GeoTIFF 1');
addGeoTIFFToGroup(imagePath2, 'GeoTIFF 2');

优化后的CSS（可选）

#map {
  height: 500px;
}

.custom-button {
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: white;
  margin-left: 8px;
}
.custom-button:hover {
  background: #f5f5f5;
}

这样修改后，删除按钮会连同对应的图层条目一起被移除，不会残留小方块，且所有图层都统一在一个控件内管理，更符合Leaflet的控件设计逻辑。

内容的提问来源于stack exchange，提问作者Monetillo