Мне бы хотелось, чтобы некоторые маркеры на моей карте были сгруппированы в оверлей, чтобы можно было переключать видимость всех маркеров с помощью управления слоями в Leaflet. Затем я хочу добавить всплывающие подсказки, чтобы быть постоянно видимым. Но они должны иметь свое собственное наложение, чтобы переключать свою видимость через управление слоями.
Конечно, отображение ТОЛЬКО надписей без маркеров не имеет особого смысла, т.е. я бы хотел "связать" оверлеи:
- пользователь отключает маркеры: ярлыки исчезают автоматически
- пользователь включает маркеры: появляются только маркеры
- пользователь включает метки: маркеры добавляются автоматически.
У меня есть оверлеи, и я могу переключать их с помощью управления слоями. Автоматическое добавление отсутствующего наложения (обработчик событий 1) работает как шарм.
Но при попытке автоматического удаления меток в обработчике событий 2 Leaflet начинает запускать различные события «overlayadd» и «overlayremove», и НИЧЕГО не происходит, похоже, что щелчок флажка управления слоем даже не произошел.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var position = [51.5, -0.09];
var map = L.map('mapid').setView(position, 13);
var layerControl = new L.Control.Layers().addTo(map);
// add layers
var markers = new L.LayerGroup().addTo(map);
layerControl.addOverlay(markers, "Markers");
var labels = new L.LayerGroup().addTo(map);
layerControl.addOverlay(labels, "Labels");
// add marker and label to layers
var marker = L.marker(position);
var label = L.marker(position, {
icon: L.divIcon(),
opacity: 0
}).bindTooltip("Hello", { permanent: true, offset: [-12, -30] });
markers.addLayer(marker);
labels.addLayer(label);
// bind event handlers
// 1) this is working: if enabling labels auto-enable markers, too
map.on("overlayadd", function(event) {
if (event.layer === labels) {
markers.addTo(map);
layerControl._update();
}
});
// 2) this does not work:
map.on("overlayremove", function(event) {
if (event.layer === markers) {
console.log("does not remove anything");
labels.remove();
layerControl._update();
}
});
</script>
</body>
</html>
Полный пример: https://codesandbox.io/s/jovial-clarke-jrxjp