时间戳

首页 > 解决方案 > 图层控制：链接两个叠加层，移除叠加层 A 也会移除叠加层 B

leaflet - 图层控制：链接两个叠加层，移除叠加层 A 也会移除叠加层 B

问题描述

我想在我的地图中将一些标记分组到一个叠加层中，以便能够通过 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

标签： leaflet

解决方案

推荐阅读