Leaflet图层控制复选框的状态获取

Question

Leaflet图层控制复选框的状态获取

4

我有几个函数，使用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();
}

- remyremy

你可能会对Leaflet.ActiveLayers插件感兴趣。 - ghybs

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davojta · Accepted Answer

一般算法可能如下所示。

add some meta-data to your checkbox with data-attribites

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

listen change invent and make your action after checkbox is checked

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