代码之家 › 专栏 › 技术社区 › Aenaon

传单.js:隐藏/显示图层组和圆圈标记

leaflet javascript

Aenaon · 技术社区 · 6 年前

addLayer() 和 clearLayers() var lg = new L.LayerGroup(); .

工作正常,但我有很多点(300K),有一些延迟,因为标记必须从头开始重新绘制。但是我遇到了这个 post 我正在努力使代码适应我的需要。

虽然这看起来很简单,但我不能让它为我工作 circleMarkers markers 和 圆圈标记 你给每个看起来有效的窗格分配不同的窗格。但是当你介绍另一套 ,假设颜色不同,则这些将不会按所需放置在自己的窗格中,但它们将被分配到与另一个窗格相同的窗格中 圆圈标记 另一个给我 圆圈标记

有人知道我缺少什么吗?

<!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: pane1,
          color: 'green',
          //icon: greenIcon
        }).addTo(map);
        new L.circleMarker(getRandomLatLng(), {
          pane: pane2,
          color: 'red',
          //icon: redIcon
        }).addTo(map);
        new L.circleMarker(getRandomLatLng(), {
          pane: pane3,
          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>

1 回复 | 直到 6 年前

Kenneth 6 年前

而不是像这里那样传入pane对象:

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>