如何在Mapboxgl中创建带有事件的自定义控件？

// 创建自定义控件的HTML元素
var customControl = document.createElement('div');
customControl.className = 'custom-control';
customControl.innerHTML = 'Custom Control';

// 创建自定义控件对象
var CustomControl = function() {};

// 定义控件被添加到地图时的行为
CustomControl.prototype.onAdd = function(map) {
  this._map = map;
  map.getContainer().appendChild(customControl);

  // 添加点击事件监听器
  customControl.addEventListener('click', this.onClick.bind(this));

  return customControl;
};

// 定义控件被移除时的行为
CustomControl.prototype.onRemove = function() {
  customControl.parentNode.removeChild(customControl);

  // 清除点击事件监听器
  customControl.removeEventListener('click', this.onClick.bind(this));

  this._map = undefined;
};

// 定义点击事件的处理函数
CustomControl.prototype.onClick = function() {
  console.log('Custom Control clicked!');
};

// 创建自定义控件对象实例
var customControlInstance = new CustomControl();

// 将自定义控件添加到地图上的指定位置
map.addControl(customControlInstance, 'top-right');