如何自定义控件类并添加到 Leaflet 中

// 定义自定义控件类
L.Control.CustomButton = L.Control.extend({
  // 初始化选项（如位置、按钮文本等）
  options: {
    position: 'topright',
    buttonText: '点击我'
  },

  // 添加控件到地图时调用
  onAdd: function(map) {
    // 创建控件容器（Leaflet推荐使用 L.DomUtil 创建DOM）
    const container = L.DomUtil.create('div', 'leaflet-control-custom');
    container.innerHTML = this.options.buttonText;
    container.style.backgroundColor = 'white';
    container.style.padding = '5px';
    container.style.cursor = 'pointer';

    // 添加点击事件
    L.DomEvent.on(container, 'click', this._onClick, this);

    return container;
  },

  // 移除控件时调用（可选）
  onRemove: function(map) {
    // 清理事件监听
    if (this._container) {
      L.DomEvent.off(this._container, 'click', this._onClick, this);
    }
  },

  // 自定义点击事件处理
  _onClick: function(e) {
    L.DomEvent.stopPropagation(e); // 阻止事件冒泡到地图
    alert('按钮被点击了！');
    console.log('当前地图中心点：', this._map.getCenter());
  }
});

// 添加控件到地图
const customButton = new L.Control.CustomButton({
  buttonText: '自定义按钮'
});
map.addControl(customButton);

L.Control.DropdownMenu = L.Control.extend({
  options: {
    position: 'topleft',
    items: ['选项1', '选项2', '选项3']
  },

  onAdd: function(map) {
    const container = L.DomUtil.create('div', 'leaflet-control-dropdown');
    const select = L.DomUtil.create('select', '', container);

    // 添加下拉选项
    this.options.items.forEach(item => {
      const option = L.DomUtil.create('option', '', select);
      option.value = item;
      option.textContent = item;
    });

    // 绑定事件
    L.DomEvent.on(select, 'change', this._onSelectChange, this);

    return container;
  },

  _onSelectChange: function(e) {
    const selectedValue = e.target.value;
    alert(`你选择了: ${selectedValue}`);
  }
});

// 使用控件
map.addControl(new L.Control.DropdownMenu({
  items: ['北京', '上海', '广州']
}));

/* 自定义按钮样式 */
.leaflet-control-custom {
  background: #3388ff;
  color: white;
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}

/* 下拉菜单样式 */
.leaflet-control-dropdown select {
  padding: 5px;
  border: none;
  border-radius: 3px;
}

// 获取控件实例并移除
const controlInstance = map._controls.find(c => c instanceof L.Control.CustomButton);
if (controlInstance) {
  map.removeControl(controlInstance);
}