Листовая группа управления

Question

У меня есть карта листовка, в которой есть несколько слоев LayerGroup и layerControl как показано ниже.

Мне интересно, как я еще могу контролировать эти слои, но контроллер не остается на карте, но за пределы карты, такие как

Answer 1

Вам придется создавать простые обработчик событий для HTML элементы за пределами карты, поэтому они переключают слои листов внутри.

например. что-то вроде:

<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-разметки и поведение вы хотите достичь.