使按钮不相应leaflet的地图事件

此文是博主原创，仅做为工作积累

背景

系统应用了leaflet的地图库，库自带的zoom、fullscreen、layers等也都有用到，业务需要自己添加了几个按钮，样式为:

class='leaflet-control leaflet-bar'

与leaflet库自带功能的按钮样式一样，看上去很漂亮，但是在自添加按钮上点击、双击、拖动时会产生地图事件。

解决方法

给leaflet的dom添加事件监听，若自添加的按钮点击，则阻止事件调用。具体代码如下：

html部分:

<div className="leaflet-control leaflet-bar">
    <a title="上一个" id="pre">
        <i className="fa fa-angle-up fa-2x"></i>
    </a>
</div>

js部分：

componentDidMount() {
    const el = document.getElementById('pre');
    L.DomEvent.addListener(el, 'click', function (e) {
      L.DomEvent.preventDefault(e);
    });
    L.DomEvent.addListener(el, 'mousedown dblclick', function (e) {
      L.DomEvent.stopPropagation(e);
    });
  }

组件挂载完成后，获取按钮元素，给按钮元素的点击事件添加preventDefault()方法，阻止默认的行为，给按钮元素的拖动、双击添加stopPropagation()，阻止地图平移和缩放。使按钮就像leaflet库封装好的功能一样。

转载自：https://blog.csdn.net/yangluo1683/article/details/76680653