如何在Leaflet中实现带激活/非激活状态的交互式自定义控件

嘿，我来帮你搞定这个Leaflet控件的需求！咱们一步步实现你要的所有功能——包括激活/非激活状态切换、十字光标显示、地图点击后的动作，还有激活时二次点击取消状态的逻辑。

核心思路 #

我们需要给自定义控件加状态管理，用CSS类区分激活/非激活状态，绑定点击事件切换状态；激活时给地图绑定点击监听，处理坐标获取，完成动作后自动恢复非激活状态，同时支持手动二次点击取消激活。

完整实现代码 #

CSS 样式（补充激活状态和光标样式）

.my-control {
  background: #fff;
  padding: 5px;
  cursor: pointer; /* 提示用户这是可点击按钮 */
  user-select: none; /* 防止按钮文本被选中 */
}

.my-control.active {
  background: #e0e0e0; /* 激活时的背景色，方便用户识别状态 */
}

.map-crosshair {
  cursor: crosshair !important; /* 强制设置十字光标 */
}

JavaScript 逻辑（修改自定义控件，添加状态管理和事件）

var map = L.map('map').setView([48.86, 2.35], 11);

L.Control.MyControl = L.Control.extend({
  options: {
    position: 'topleft'
  },

  initialize: function(options) {
    L.Control.prototype.initialize.call(this, options);
    this._isActive = false; // 初始化状态为非激活
    this._mapClickHandler = this._onMapClick.bind(this); // 绑定回调上下文，确保能访问控件实例
  },

  onAdd: function(map) {
    this._map = map;
    var el = L.DomUtil.create('div', 'leaflet-bar my-control');
    
    // 绑定控件点击事件，阻止冒泡避免触发地图点击
    L.DomEvent
      .on(el, 'click', L.DomEvent.stopPropagation)
      .on(el, 'click', this._toggleActive, this);
    
    el.innerHTML = 'My Control';
    this._container = el; // 保存容器元素，方便后续修改样式类
    return el;
  },

  onRemove: function(map) {
    // 移除所有绑定的事件，防止内存泄漏
    L.DomEvent.off(this._container, 'click', this._toggleActive, this);
    if (this._isActive) {
      this._deactivate();
    }
  },

  // 切换激活/非激活状态的核心方法
  _toggleActive: function() {
    this._isActive ? this._deactivate() : this._activate();
  },

  // 激活状态处理
  _activate: function() {
    this._isActive = true;
    this._container.classList.add('active'); // 给按钮加激活样式
    this._map.getContainer().classList.add('map-crosshair'); // 地图切换为十字光标
    this._map.on('click', this._mapClickHandler); // 监听地图点击事件
  },

  // 非激活状态处理
  _deactivate: function() {
    this._isActive = false;
    this._container.classList.remove('active'); // 移除按钮激活样式
    this._map.getContainer().classList.remove('map-crosshair'); // 恢复默认光标
    this._map.off('click', this._mapClickHandler); // 取消地图点击监听
  },

  // 地图点击后的业务逻辑
  _onMapClick: function(e) {
    // 这里可以替换成你需要的任意动作，比如打印坐标
    console.log('点击的经纬度：', e.latlng.lat, ',', e.latlng.lng);
    // 完成动作后自动恢复非激活状态
    this._deactivate();
  }
});

L.control.myControl = function(opts) {
  return new L.Control.MyControl(opts);
}

L.control.myControl({
  position: 'topleft'
}).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

HTML 部分（保持原样即可）

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet-src.js" integrity="sha512-2h9aokfcaYW7k0VPn1JqbQDQCaNQRrZJwetlnQ88yJrtIzGLVW/2StdQKoE+TIVNNTUxf6SVa+2vW2KB2EXnnA==" crossorigin=""></script>

<div id="map" style="height: 200px"></div>

功能说明 #

• 激活状态：点击"My Control"按钮，按钮背景变灰（激活样式），地图光标切换为十字，此时点击地图任意位置会打印该点的经纬度，之后自动恢复非激活状态。
• 取消激活：如果按钮处于激活状态，再次点击按钮，会直接取消激活，恢复默认光标和按钮样式，同时不再监听地图点击。
• 内存优化：控件移除时会自动清理所有绑定的事件，避免内存泄漏。

备注：内容来源于stack exchange，提问作者Software Dev