如何在Leaflet地图上添加随当前叠加层名称自动更新的文本框

完全可以实现，核心逻辑是先创建一个常驻地图的自定义文本控件，再在滑块切换图层的逻辑中同步更新控件文本即可，具体步骤如下：

• 第一步：创建自定义年份展示控件，添加到地图上

// 自定义年份展示控件
L.Control.YearDisplay = L.Control.extend({
  options: {
    // 可调整为'topleft'/'bottomleft'/'bottomright'修改控件在地图上的位置
    position: 'topright' 
  },
  onAdd: function (map) {
    // 创建dom容器，绑定自定义样式类
    this._container = L.DomUtil.create('div', 'year-display-control');
    // 初始化默认文本，可替换为你默认展示的第一个年份
    this._container.innerHTML = `<b>当前年份：1970</b>`;
    // 阻止容器的点击事件冒泡到地图，避免误操作
    L.DomEvent.disableClickPropagation(this._container);
    return this._container;
  },
  // 自定义文本更新方法，后续切换年份时直接调用
  updateYear: function (year) {
    this._container.innerHTML = `<b>当前年份：${year}</b>`;
  }
});
// 注册控件创建方法
L.control.yearDisplay = function (options) {
  return new L.Control.YearDisplay(options);
};

// 把控件添加到你的地图实例上，注意把下方的map替换为你自己的地图变量名
const yearDisplay = L.control.yearDisplay().addTo(map);

配套样式代码，可按需调整样式效果：

.year-display-control {
  background: rgba(255,255,255,0.9);
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.2);
  font-size: 16px;
  line-height: 1.5;
}

• 第二步：在滑块切换图层的逻辑中调用更新方法
  你原本切换LayerGroup的逻辑里，拿到当前激活的图层名称（也就是年份），直接调用刚才注册的控件的updateYear方法即可。如果使用的是LeafletSlider默认的切换逻辑，监听滑块的change事件即可，示例代码：

// 把下方的slider替换为你自己的滑块实例变量名
slider.on('change', function(e) {
  // e.value就是当前滑块对应的年份，也可以从当前激活的LayerGroup的name属性取值
  const currentYear = e.value;
  // 调用控件更新方法
  yearDisplay.updateYear(currentYear);
});

如果滑块切换逻辑是你自己手写的，只需要在你调用map.addLayer()切换对应年份LayerGroup的代码后面，加一行调用yearDisplay.updateYear(当前年份)的代码即可，无需额外监听事件。

内容的提问来源于stack exchange，提问作者s.caldwell.454