Question

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

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

0 个答案: