Javascript 单张分组对照

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

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

---

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

e、 g.类似于：

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

具体的事件处理程序将取决于您的HTML标记和您想要实现的行为

 // 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();
          }
      }
 );