Leaflet / LayersControl / 移动设备上的自定义按钮

Question

我是 JS / jQuery 初学者，也许很愚蠢，但我在移动设备上向 Leaflet LayersControl 添加 + 删除自定义按钮时遇到问题。

项目描述： 我有多个图层的地图，我需要添加两个按钮来选中/取消选中所有复选框（它在示例中有效）。

这是我的示例，需要在浏览器中打开触摸模拟： https://jsfiddle.net/lukassliacky/n2ep6yg0/42/（在 Firefox 上创建和测试）。

正如我所说，我还是 JS 初学者，对我来说似乎是使用 after 添加自定义 HTML 的最简单的解决方案，但我对触摸设备上的事件有疑问。

在桌面（非触摸）上看起来很简单：右上角是折叠的 LayerControl 图标，我使用事件 mouseenter 和 mouseleave 添加和删除自定义按钮。它看起来不错，我认为这是一个很好且可行的解决方案（这个案例不包括在我的示例中）

我在移动/触摸设备上遇到问题，因为我不知道我可以使用哪些事件来添加 + 删除。

我认为添加事件看起来不错，例如click、tap 或 touchstart 但我不知道如何在 LayerControl 展开时删除按钮，它将被折叠。 它对我来说很复杂，因为我需要从地图中排除一些 div（带有复选框的图层控制 - 当我要单击复选框时，我的自定义按钮将被删除）

  $('#main-map:not(leaflet-control-layers-expanded > div).click(function() {
    $('.leaflet-custom-buttons').remove()

  })
  $('.leaflet-control').click(function(e) {
    e.stopPropagation();
  });

当我展开 LayersControl（带有按钮）并且当我点击 Pin 标记时，按钮被移除并且 LayerControl 仍然被展开（它不是很好）。在这种情况下，LayersControl 在单击不同对象作为 Pin Marker 后折叠。

请问，您能帮我使用正确的事件来添加/删除移动设备上的自定义按钮吗？当然，也许是我的方法不对，需要重写我的代码。

谢谢

Answer 1

好吧，我尝试了不同的方法，似乎是正确的方法。

使用自定义按钮的更新示例在这里：https://jsfiddle.net/lukassliacky/n2ep6yg0/57/

    var cities = L.layerGroup();
    var secondLayer = L.layerGroup();
    var thirdLayer = L.layerGroup();
  

    L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
    L.marker([39.24, -104.39]).bindPopup('This is Denver, CO.').addTo(cities),
    L.marker([39.33, -103.2]).bindPopup('This is Aurora, CO.').addTo(cities),
    L.marker([39.17, -105.43]).bindPopup('This is Golden, CO.').addTo(cities);

    L.marker([39.51, -105.52]).bindPopup('This is Littleton, CO.').addTo(secondLayer),
    L.marker([39.34, -104.29]).bindPopup('This is Denver, CO.').addTo(secondLayer),
    L.marker([39.13, -104.3]).bindPopup('This is Aurora, CO.').addTo(secondLayer),
    L.marker([39.97, -105.63]).bindPopup('This is Golden, CO.').addTo(secondLayer);
  
  L.marker([39.21, -105.52]).bindPopup('This is Littleton, CO.').addTo(thirdLayer),
    L.marker([39.34, -104.09]).bindPopup('This is Denver, CO.').addTo(thirdLayer),
    L.marker([39.73, -104.28]).bindPopup('This is Aurora, CO.').addTo(thirdLayer),
    L.marker([39.17, -105.53]).bindPopup('This is Golden, CO.').addTo(thirdLayer);

    var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

    var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
        streets  = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});

    var map = L.map('main-map', {
        center: [39.73, -104.99],
        zoom: 7,
        layers: [grayscale, cities, secondLayer, thirdLayer]
    });

    var baseLayers = {
/*      "Grayscale": grayscale,
        "Streets": streets */
    };

    var overlays = {
        "Cities": cities,
    "SecondLayer": secondLayer,
    "ThirdLayer": thirdLayer,
    
    };


L.Control.Custom = L.Control.Layers.extend({
    onAdd: function () {
            this._initLayout();
            this._addCheckButton();
            this._addClearButton();
            this._update();
            return this._container;
        },
        _addCheckButton: function () {
        var elements = this._container.getElementsByClassName('leaflet-control-layers-list');
        var button = L.DomUtil.create('button', 'btn btn-primary rounded-0 my-1 me-1 btn-xs leaflet-btn-check-all', elements[0]);
        button.textContent = 'Check All';
        L.DomEvent.on(button, 'click', function(e){
            L.DomEvent.stop(e);

            // fire this function (check all)
            $('.leaflet-control input[type="checkbox"]').trigger('click').prop('checked', true);
        }, this);
        },
        _addClearButton: function () {
        var elements = this._container.getElementsByClassName('leaflet-control-layers-list');
        var button = L.DomUtil.create('button', 'btn btn-primary rounded-0 my-1 btn-xs w-50 leaflet-btn-check-all', elements[0]);
        button.textContent = 'Clear All';
        L.DomEvent.on(button, 'click', function(e){
            L.DomEvent.stop(e);

            // fire this function (uncheck all)
            $('.leaflet-control input[type="checkbox"]').trigger('click').prop('checked', false);
        }, this);
        }
    });
    
    new L.Control.Custom(
        baseLayers, 
        overlays,
        {collapsed:true}).addTo(map);   

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.74.0/L.Control.Locate.min.js"></script>
<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #main-map   {
            width: 100%;
            height: 500px;
        }
    </style>    
</head>
<body>

<div id='main-map'></div>

我的解决方案基于https://embed.plnkr.co/Je7c0m/，非常感谢作者。 Grzegorz T. 也感谢您的支持。