如何使用Leaflet.Toolbar在Leaflet地图中添加多个工具栏

Leaflet.Toolbar2 本身完全支持多工具栏部署，你遇到的只剩最后一个工具栏的问题，根源是跨工具栏复用了同一份Action配置引用，不是库不支持多实例。

你当前的代码里定义的actions数组是全局唯一的引用，两个Toolbar初始化时都拿到了这个同一个数组。库在做Action实例绑定时，会把之前关联到第一个工具栏的Action引用，重新绑定到新创建的第二个工具栏上；最终第一个工具栏因为丢失了绑定的Action集合，渲染时自动清空了对应的DOM节点，只剩最后初始化的那个工具栏能正常显示。

多工具栏实现的正确做法 #

• 不要把同一份actions数组直接传给多个Toolbar，需要给每个工具栏生成完全独立的Action集合，从根源上避免引用冲突。
  可以把Action生成逻辑抽成可重复调用的工厂函数，每次初始化工具栏时调用一次，返回全新的Action类数组：

  // 抽离Action生成逻辑为独立函数
  function getToolbarActions() {
      return [
          L.Toolbar2.Action.extend({
              options: { toolbarIcon: { html: 'a', tooltip: 'Zoom to all' } },
              addHooks: function () { console.log('a') }
          }),
          L.Toolbar2.Action.extend({
              options: { toolbarIcon: { html: 'p', tooltip: 'Zoom to all' } },
              addHooks: function () { console.log('p') }
          }),
          L.Toolbar2.Action.extend({
              options: { toolbarIcon: { html: 'e', tooltip: 'Zoom to all' } },
              addHooks: function () { console.log('e') }
          })
      ];
  }
  
  // 分别生成独立的工具栏实例
  const toolbar1 = new L.Toolbar2.Control({
      actions: getToolbarActions(),
      position: 'topright'
  }).addTo(this.map);
  
  const toolbar2 = new L.Toolbar2.Control({
      actions: getToolbarActions(),
      position: 'topleft'
  }).addTo(this.map);
  

• 给每个工具栏配置独立的className标识
  因为默认配置下所有Toolbar生成的DOM会带相同的通用类名，哪怕做了独立的Action生成，也可能因为DOM选择器匹配到同类型元素，被后续渲染逻辑误清理。在初始化时给每个工具栏加专属的类名，就能避免这类DOM冲突：

  const toolbar1 = new L.Toolbar2.Control({
      actions: getToolbarActions(),
      position: 'topright',
      className: 'map-toolbar map-toolbar-right'
  }).addTo(this.map);
  
  const toolbar2 = new L.Toolbar2.Control({
      actions: getToolbarActions(),
      position: 'topleft',
      className: 'map-toolbar map-toolbar-left'
  }).addTo(this.map);
  

• 同位置的多个工具栏不需要做额外处理
  如果你需要把多个工具栏放在同一个位置锚点（比如都放在右上角），只要保证每个工具栏的Action集合是独立生成的、有专属类名，Leaflet会自动按添加顺序在对应位置的容器里纵向排列，不会出现节点丢失的问题。

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