如何添加按钮实现Leaflet地图居中适配所有已激活图层

完全可以实现该需求，基于Leaflet的原生API即可完成开发，具体实现步骤如下：

• 第一步：编写获取当前所有激活图层边界的工具函数
  该函数会遍历地图上所有已加载的图层，合并所有可获取地理范围的图层的边界，无有效图层时返回空：

function getActiveLayersBounds(map) {
  // 初始化空的地理边界对象
  const allBounds = L.latLngBounds();
  map.eachLayer(layer => {
    // 若不需要适配底图可放开下面的注释，跳过瓦片图层
    // if (layer instanceof L.TileLayer) return;
    // 仅处理支持getBounds方法的图层（标记、矢量图形、GeoJSON等均支持）
    if (typeof layer.getBounds === 'function') {
      allBounds.extend(layer.getBounds());
    }
  });
  return allBounds.isValid() ? allBounds : null;
}

• 第二步：添加自定义控制按钮到地图
  通过Leaflet的Control扩展能力添加自定义按钮，绑定适配范围的点击逻辑：

const fitActiveLayersControl = L.Control.extend({
  options: {
    // 按钮在地图上的位置，可按需调整为topleft、bottomleft、bottomright
    position: 'topright'
  },
  onAdd: function (map) {
    // 创建按钮容器，复用Leaflet自带的控制栏样式
    const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
    // 自定义按钮内容，可替换为图标
    container.innerHTML = `<button style="width:30px;height:30px;padding:0;border:none;cursor:pointer;" title="适配所有已激活图层范围">▦</button>`;
    // 阻止按钮点击事件冒泡到地图
    L.DomEvent.disableClickPropagation(container);
    // 绑定点击触发的适配逻辑
    L.DomEvent.on(container, 'click', () => {
      const targetBounds = getActiveLayersBounds(map);
      if (targetBounds) {
        // 第二个参数为边界预留内边距，单位为像素，可按需调整
        map.fitBounds(targetBounds, { padding: [20, 20] });
      }
    });
    return container;
  }
});
// 将按钮添加到地图实例中
new fitActiveLayersControl().addTo(map);

• 可选优化
  如果你的L.control.layers配置了专属的叠加图层分组，也可以直接维护已勾选的叠加图层列表，遍历该列表计算边界，不需要全量遍历地图所有图层，性能更优。

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