obtenir l'état de contrôle de la couche Leaflet checkbox

Question

J'ai plusieurs fonctions dessinant des choses différentes sur une carte en utilisant Leaflet et l'un d'entre eux a un contrôle de couche qui affiche/cache certains secteurs sur la carte. L'autre fonction dessine des ascenseurs (lignes droites).

Lors d'une action de l'utilisateur, le contenu affiché sur la carte est modifié et je redessine les levées. Je voudrais que les secteurs ne soient dessinés que si l'utilisateur a coché la case mais je ne sais pas comment obtenir la valeur de la case à cocher et la passer à la fonction lift (qui devrait déclencher la fonction sector si l'utilisateur a coché la case à cocher). Comment puis-je enregistrer la valeur de la case à cocher de contrôle de couche et le tester dans une autre fonction Ajax (ascenseur)?

$('#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(); 

Mise à jour: Sur la base de suggestion @davojta, voici ma solution complète:

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

Dans drawLift I ajouté:

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

Answer 1

algorithme général pourrait être le suivant

• ajouter des méta-données à votre case avec des données attribites

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

• écouter changement inventer et faire de votre action après case est cochée

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