javascript - 传单群控

Question

我有一个传单 map ，其中有多个图层LayerGroup和layerControl，如下图所示。

我想知道如何仍然控制这些图层，但 Controller 不会停留在 map 上，而是停留在 map 之外，例如

Answer 1

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

例如像这样:

 <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 标记和您想要实现的行为。