我有几个函数,使用Leaflet在地图上绘制不同的内容,其中一个函数具有图层控件,可以显示/隐藏地图上的某些区域。另一个函数绘制电梯(直线)。
经过用户操作,地图上显示的内容会发生变化,然后我重新绘制电梯。 我希望只有在用户选中复选框时才绘制区域,但是我不知道如何获取复选框的值并将其传递给电梯函数(如果用户选中复选框,则应触发区域函数)。
如何保存图层控件复选框的值,并在其他Ajax函数(电梯)中进行测试?
更新:根据@davojta的建议,这是我的完整解决方案:
在
经过用户操作,地图上显示的内容会发生变化,然后我重新绘制电梯。 我希望只有在用户选中复选框时才绘制区域,但是我不知道如何获取复选框的值并将其传递给电梯函数(如果用户选中复选框,则应触发区域函数)。
如何保存图层控件复选框的值,并在其他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();
}