Status der Leaflet-Layer-Kontrolle bekommen Checkbox

Question

Ich habe mehrere Funktionen, die verschiedene Dinge auf einer Karte mit Leaflet zeichnen und eine von ihnen hat eine Layer-Kontrolle, die einige Sektoren auf der Karte zeigt/versteckt. Die andere Funktion zeichnet Aufzüge (gerade Linien).

Nach Benutzeraktion wird der Inhalt auf der Karte geändert und ich lade die Aufzüge neu. Ich möchte die Sektoren nur gezeichnet werden, wenn der Benutzer das Kontrollkästchen aktiviert hat, aber ich weiß nicht, wie Sie den Wert des Kontrollkästchens erhalten und an die Liftfunktion übergeben (die die Sektorfunktion auslösen sollte, wenn der Benutzer überprüft hat das Kontrollkästchen).

Wie kann ich den Wert des Kontrollkästchens Layer Control speichern und in einer anderen Ajax-Funktion (Lift) testen?

$('#build').on("click", function(e){ 
    $.ajax({ 
     type: "POST", 
     url: map_controller/show_lift_types", 
     success: function(result){ 
      if (result.returned == true){ 
       // ... Displays some information in the page 
       drawLift(); // Draws the lifts 
       // If the user has chosen to show the sector layer, need to call drawSectors 
       drawSectors(); 
      } 
     } 
    }); 
}); 


function drawLift() { 
    if (typeof lift_path !== 'undefined') {    // If lift_path (the lifts) exists 
     map.eachLayer(function (layer) {    // For each layer 
      console.log(layer._leaflet_id); 
      if (typeof layer._path !== 'undefined') {  // Only if the _path variable exist. Excludes the background image of the map and already built lift 
      map.removeLayer(layer);      // Remove the layer 
     } 
     }); 
    } 

    $.ajax({ 
     type: "POST", 
     dataType: "json", 
     url: map_controller/get_lifts_map", 
     success: function(result){ 
      for (i=0; i < result.id_group.length; i++) { 
       // ... retrieves parameters ...   
       var path_info = { 
        "type": "Feature", 
        "features": [{ 
         "type": "Feature", 
         "geometry": { 
          "type": "LineString", 
          "coordinates": [start_location, end_location] 
         } 
        }] 
       }; 
       lift_path = new L.geoJson(path_info,style: style}).on('click', function (e) { 
        // ... Some function... 
       }).addTo(map); 
      } 
     } 
    }); 
}; 

function drawSector() { 
    var sector_path = new Array() 
    var baseLayers; 
    $.ajax({ 
     type: "POST", 
     dataType: "json", 
     url: map_controller/get_sectors_map", 
     success: function(result){ 
      for (i=0; i < result.path.length; i++) { 
       // ... retrieves parameters ... 
       var sectors = { 
        "type": "Feature", 
        "geometry": { 
         "type": "Polygon", 
         "coordinates": path 
        } 
       }; 
       sector_path[i] = L.geoJson(sectors, style); 
      } 
      var sectors = L.layerGroup([sector_path[0], sector_path[1], sector_path[2]]).addTo(map); 
      var overlays = {}; 
      overlays[Settings.show_sectors] = sectors; // Show sector checkbox 
      L.control.layers(baseLayers, overlays).addTo(map); 
     } 
    }); 
} 

// do the actual ajax calls 
drawSector(); 
drawLift(); 

Update: Basierend auf @davojta Vorschlag, hier ist meine komplette Lösung:

$(document).on('change', '.leaflet-control-layers-selector', function() { 
    $checkbox = $(this); 
    if ($checkbox.is(':checked')) { 
     sectorLayerCheckbox = true; 
    } 
    else { 
     sectorLayerCheckbox = false; 
    } 
} 

In drawLift ich hinzugefügt:

if (typeof sectorLayerCheckbox == 'undefined' || sectorLayerCheckbox != false) { 
    drawSector(); 
} 

Answer 1

Allgemeine Algorithmus die folgenden

sein könnte

• einige Meta-Daten zu Ihrer Checkbox mit Daten-attribites hinzufügen

  <input id="checkBox" type="checkbox" data-lyftFlag="flagId"> 
  

• hören Änderung erfinden und Ihre Aktion, nachdem Kontrollkästchen aktiviert ist

  $('#checkBox').change(function() { 
      const $checkbox = $(this); 
      if ($checkbox.is(':checked')) { 
       const lyftFlag = $checkbox.data("lyftFlag"); 
       drawLift(lyftFlag); 
      } 
  });