獲得Leaflet圖層控件複選框的狀態

我有幾個函數在使用Leaflet的地圖上繪製不同的東西，其中一個函數具有圖層控件，它在地圖上顯示/隱藏了一些扇區。其他功能繪製升降機（直線）。獲得Leaflet圖層控件複選框的狀態

用戶操作後，地圖上顯示的內容會發生變化，並重新繪製升降機。我希望只在用戶選中複選框時繪製扇區，但我不知道如何獲取複選框的值並將其傳遞給提升功能（如果用戶選中了應該觸發扇區函數複選框）。

如何保存圖層控件複選框的值並在另一個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的建議，這是我的完整的解決方案：

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

在drawLift我說：

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

來源

2017-10-17 remyremy

您可能會感興趣後[手冊.ActiveLayers]（https://github.com/vogdb/Leaflet.ActiveLayers）plugin – ghybs

通用算法可以是以下

一些元數據添加到您的複選框與數據attribites

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

聽變革創造，使您的操作複選框被選中

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

來源

2017-10-20 06:49:39 davojta

我設法用'$（document）.on（'change'，'.leaflet-control-layers-selector '，function（）{'然後用'const lyftFlag = true/fa存儲值lse;' – remyremy

@remyremy你可以提供jsfiddle來看看和調試嗎？ – davojta

我用最終解決方案編輯了我的問題。感謝您的幫助，它現在工作正常！ – remyremy

獲得Leaflet圖層控件複選框的狀態

回答

相關問題