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

Question

我是JS/jQuery初学者，也许是愚蠢的，但我有问题，添加+删除自定义按钮的传单LayersControl在移动设备上

项目描述:我有多个图层的地图，我需要为选中/取消选中所有复选框添加两个按钮(它在示例中工作)。

这是我的例子，是必要的打开触摸模拟在浏览器：https://jsfiddle.net/lukassliacky/n2ep6yg0/42/(在Firefox上创建和测试)。

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

在桌面(非触摸)它看起来很简单:在右上角是图标为折叠的LayerControl和我使用事件mouseenter和mouseleave添加和删除自定义按钮。它看起来很好，我认为这是很好的和工作的解决方案(这种情况不包括在我的例子)

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

我认为添加事件看起来很好，例如click,tap或touchstart，但我不知道如何在LayerControl扩展时删除按钮，它将被折叠。这对我来说很复杂，因为我需要从地图中排除一些div (LayerControl与复选框-当我想点击复选框时，我的自定义按钮将被删除)

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

当我已经扩展LayersControl(带按钮)，当我点击引脚标记，按钮被删除，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/，我真的感谢作者。也谢谢你的支持。