传单组控制

Question

我有一个传单地图，它有几个图层LayerGroup和layerControl，如下图所示。

我想知道如何仍然可以控制这些图层，但控制器不会留在地图上，而是留在地图之外，例如

Answer 1

您必须为地图外的HTML元素创建简单的事件侦听器，以便在内部切换Leaflet图层。

e.g。类似的东西：

 <label><input type='checkbox' id='bicycles-ctrl' value='1'>Bicycles</label>

 // Init the map and its layers as needed
 var map = L.map(...);
 var bicyclesLayer = L.geoJson(...);


 // Let's attach a DOM event handler, the Leaflet way:
 L.domEvent.on(

      // Whenever the 'bicycles-ctrl' DOM element...
      document.getElementById('bicycles-ctrl')),

      // ...dispatches a 'change' event...
      'change',

      // ...run this function
      function(ev) {
          // The 'target' property of the DOM event points to the instance 
          // of HTMLInputElement which dispatched the event
          var input = ev.target;

          // The 'value' property will be empty (falsy) if the checkbox is unchecked,
          // or will have the contents of the 'value' HTML attribute (truthy)
          // otherwise.
          if (input.value) {
               // If the checkbox is checked, display the leaflet layer
               bicyclesLayer.addTo(map);
          } else {
               // If not, hide the leaflet layer
               bicyclesLayer.remove();
          }
      }
 );

特定事件处理程序将取决于您的HTML标记以及您希望实现的行为。