リーフレットレイヤーコントロールチェックボックスのステータスを取得

Question

リーフレットを使用してマップ上に異なるものを描画するいくつかの関数があり、そのうちの1つに地図上の一部のセクターを表示/非表示するレイヤーコントロールがあります。他の関数はリフト（直線）を描画します。

ユーザーの操作に応じて、マップに表示される内容が変更され、リフトが再描画されます。 ユーザーがチェックボックスをオンにした場合にのみセクタを描画したいのですが、チェックボックスの値を取得してリフト機能に渡す方法はわかりません（ユーザーがチェックした場合にセクタ機能を起動するはずです）チェックボックス）。

レイヤーコントロールのチェックボックスの値を保存し、別のAjax関数（リフト）でテストするにはどうすればよいですか？

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

更新：@davojtaの提案に基づいて、ここで私の完全なソリューションです：drawLiftで

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

私が追加：

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

Answer 1

一般的なアルゴリズムは、以下の

可能性があり

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