Question

我的传单视觉效果上有一些要点，我希望能够显示/隐藏它们。现在，我以粗略的方式进行此操作，即分别调用图层组引用addLayer()的{{1}}和clearLayers()方法。

可以，但是我有很多点（300K），并且由于必须从头开始重画标记而有些延迟。但是，我遇到了这个post，并且正在尝试使代码适应我的需求。

尽管它看起来很简单，但我无法使其适用于var lg = new L.LayerGroup();，因为它们看起来都放在同一窗格中，这是在选项中设置的第一个窗格。如果您有circleMarkers和markers，并且分别为每个窗格分配了不同的窗格，则该窗格将正常工作。但是，当您引入另一组circleMarkers时，可以说是另一种颜色，那么这些颜色将不会按需要放置在其自己的窗格中，而是将与其他circleMarkers分配到同一窗格中。因此，尽管有3个不同的集合，但是只有2个窗格具有点，一个窗格用于circleMarkers，另一个窗格用于markers。（请参见代码段）

请问有人我想念什么吗？

谢谢！

circleMarkers

Answer 1

而不是像在此处那样传递窗格对象：

new L.marker(getRandomLatLng(), {
  pane: pane1, // <-- pane object
  color: 'green',
  //icon: greenIcon
}).addTo(map);

您需要输入窗格的名称：

new L.marker(getRandomLatLng(), {
  pane: 'markers1', // <-- name of the pane
  color: 'green',
  //icon: greenIcon
}).addTo(map);

完整的代码示例答案：

<!DOCTYPE html>
<html>

<head>
  <title>Leaflet</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
  <style>
    html,
    body,
    #leaflet {
      height: 90%
    }
  </style>
</head>

<body>
  <button id="hidem1">Hide1</button>
  <button id="showm1">Show1</button>
  <button id="hidem2">Hide2</button>
  <button id="showm2">Show2</button>
  <button id="hidem3">Hide3</button>
  <button id="showm3">Show3</button>    
  <div id="leaflet"></div>
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js"></script>

  <script>
    var map = L.map('leaflet', {
      layers: [
        L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
        })
      ],
      center: [48.85, 2.35],
      zoom: 12
    });

    // Example adapted from http://jsfiddle.net/b7LgG/3/
    // provided by @danzel https://github.com/Leaflet/Leaflet/issues/4#issuecomment-35025365
    // Images from Leaflet Custom Icons tutorial http://leafletjs.com/examples/custom-icons/
    //We don't use shadows as you can't currently specify what pane shadows end up in
    var greenIcon = L.icon({
      iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
      iconSize: [38, 95],
      iconAnchor: [22, 94],
      popupAnchor: [-3, -76]
    });
    var redIcon = L.icon({
      iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-red.png',
      iconSize: [38, 95],
      iconAnchor: [22, 94],
      popupAnchor: [-3, -76]
    });

    //Create panes for each of the sets of markers
    var pane1 = map.createPane('markers1');
    var pane2 = map.createPane('markers2');
    var pane3 = map.createPane('markers3');

    populate();

    function hide1() {
      pane1.style.display = 'none';
    }

    function show1() {
      pane1.style.display = '';
    }      

    function hide2() {
      pane2.style.display = 'none';
    }

    function show2() {
      pane2.style.display = '';
    }
      
    function hide3() {
      pane3.style.display = 'none';
    }

    function show3() {
      pane3.style.display = '';
    }

    L.DomUtil.get('hidem1').onclick = hide1;
    L.DomUtil.get('showm1').onclick = show1;
      
    L.DomUtil.get('hidem2').onclick = hide2;
    L.DomUtil.get('showm2').onclick = show2;
      
    L.DomUtil.get('hidem3').onclick = hide3;
    L.DomUtil.get('showm3').onclick = show3;      

    //Add 200 markers to each of the groups/layers
    function populate() {
      for (var i = 0; i < 200; i++) {
        new L.marker(getRandomLatLng(), {
          pane: 'markers1',
          color: 'green',
          //icon: greenIcon
        }).addTo(map);
        new L.circleMarker(getRandomLatLng(), {
          pane: 'markers2',
          color: 'red',
          //icon: redIcon
        }).addTo(map);
        new L.circleMarker(getRandomLatLng(), {
          pane: 'markers3',
          color: 'blue',
          //icon: redIcon
        }).addTo(map);
      }
      return false;
    }

    function getRandomLatLng() {
      return [
        48.8 + 0.1 * Math.random(),
        2.25 + 0.2 * Math.random()
      ];
    }
  </script>
</body>

</html>

leaflet.js：隐藏/显示图层组和circleMarkers

1 个答案: