如何将多个过滤器应用于地图框位置

Question

我已经为大学校园中的各种建筑创建了一张地图，并试图为最终用户设置一个导航菜单，以选择多个过滤器，只显示适用的位置。

我已经成功地创建了每个过滤器，但是过滤器之间没有通信。每次选择过滤器时，如何调用每个过滤器的值？

演示

HTML:

<div class="radio-toolbar">
<p>Type</p>
<input type="radio" id="Apartment_Type" name="type" onclick="Apartment_Type()">
<label for="Apartment_Type">Apartment</label>

<input type="radio" id="Residence_Hall_Type" name="type" onclick="ResidenceHall_Type()">
<label for="Residence_Hall_Type">Residence Hall</label>

<input type="radio" id="Both_Type" name="type" onclick="Both_Type()" checked>
<label for="Both_Type">Both</label>
<br><br>
<hr>
</div>
<div class="radio-toolbar">
<p>Style <br> <span style="font-size: 10px;">(Residence Hall Only)</span></p>
<input type="radio" id="Low_Rise_Style" name="style" onclick="Low_Rise_Style()">
<label for="Low_Rise_Style">Traditional Style (Low Rise)</label>
<br><br>
<input type="radio" id="High_Rise_Style" name="style" onclick="High_Rise_Style()">
<label for="High_Rise_Style">Suite Style (High Rise)</label>
<br><br>

<input type="radio" id="Apartment_Style" name="style" onclick="Apartment_Style()">
<label for="Apartment_Style">Apartment Style</label>
<input type="radio" id="All_Style" name="style" onclick="All_Style()" checked>
<label for="All_Style">All</label>
<br><br>
<hr>
</div>

JavaScript:

map.on('load', function Apartment_Type() {
// Get the checkbox
var checkBox_apartmenttype = document.getElementById("Apartment_Type");
// If the checkbox is checked, display the output text
if (checkBox_apartmenttype.checked == true){
map.setFilter('Locations', ['==', ['get', 'type'], 'apartment']);
} else {
}
});
map.on('load', function ResidenceHall_Type() {
// Get the checkbox
var checkBox_halltype = document.getElementById("Residence_Hall_Type");

// If the checkbox is checked, display the output text
if (checkBox_halltype.checked == true){
map.setFilter('Locations', ['==', ['get', 'type'], 'hall']);

} else {
}
});
map.on('load', function Both_Type() {
// Get the checkbox
var checkBox_bothtype = document.getElementById("Both_Type");

// If the checkbox is checked, display the output text
if (checkBox_bothtype.checked == true){
var bothtype=[
"all",
["in", "type", 'apartment','hall'],
]
map.setFilter('Locations',bothtype)
} else {
}
});
map.on('load', function Low_Rise_Style() {
// Get the checkbox
var checkBox_lowrisestyle = document.getElementById("Low_Rise_Style");
// If the checkbox is checked, display the output text
if (checkBox_lowrisestyle.checked == true){
map.setFilter('Locations', ['==', ['get', 'style'], 'low rise']);
} else {
}
});
map.on('load', function High_Rise_Style() {
// Get the checkbox
var checkBox_highrisestyle = document.getElementById("High_Rise_Style");
// If the checkbox is checked, display the output text
if (checkBox_highrisestyle.checked == true){
map.setFilter('Locations', ['==', ['get', 'style'], 'high rise']);
} else {
}
});
map.on('load', function Apartment_Style() {
// Get the checkbox
var checkBox_apartmentstyle = document.getElementById("Apartment_Style");
// If the checkbox is checked, display the output text
if (checkBox_apartmentstyle.checked == true){
map.setFilter('Locations', ['==', ['get', 'style'], 'apartment']);
} else {
}
});
map.on('load', function All_Style() {
// Get the checkbox
var checkBox_allstyle = document.getElementById("All_Style");
// If the checkbox is checked, display the output text
if (checkBox_allstyle.checked == true){
var allstyle=[
"all",
["in", "style", 'high rise','low rise','apartment'],
]
map.setFilter('Locations',allstyle)
} else {
}
});

Answer 1

成功了！HTML:

<div class="radio-toolbar">
<p>Type</p>
<input type="radio" id="Apartment_Type" name="type" value="apartment" onclick="ApplyFilters()">
<label for="Apartment_Type">Apartment</label>

<input type="radio" id="Residence_Hall_Type" name="type" value="hall" onclick="ApplyFilters()">
<label for="Residence_Hall_Type">Residence Hall</label>

<input type="radio" id="Both_Type" name="type" value="both" onclick="ApplyFilters()" checked>
<label for="Both_Type">Both</label>
<br><br>
<hr>
</div>
<div class="radio-toolbar">
<p>Style <br> <span style="font-size: 10px;">(Residence Hall Only)</span></p>
<input type="radio" id="Low_Rise_Style" name="style" value="low rise" onclick="ApplyFilters()">
<label for="Low_Rise_Style">Traditional Style (Low Rise)</label>
<br><br>
<input type="radio" id="High_Rise_Style" name="style" value="high rise" onclick="ApplyFilters()">
<label for="High_Rise_Style">Suite Style (High Rise)</label>
<br><br>
<input type="radio" id="Apartment_Style" name="style" value="apartment" onclick="ApplyFilters()">
<label for="Apartment_Style">Apartment Style</label>
<input type="radio" id="All_Style" name="style" value="all" onclick="ApplyFilters()" checked>
<label for="All_Style">All</label>
<br><br>
<hr>
</div>

JavaScript:

function ApplyFilters() {


var type = document.querySelector("input[type=radio][name=type]:checked").value;
if (type === 'both'){
var filtertype = ["in", "type", 'hall','apartment'];
}else{
var filtertype = ["in", "type", type];
}
var style = document.querySelector("input[type=radio][name=style]:checked").value;
if (style === 'all'){
var filterstyle = ["in", "style", 'low rise','high rise','apartment',''];
}else{
var filterstyle = ["in", "style", style];
}
var filters=[
"all",
filtertype,
filterstyle,      
]
map.setFilter('Locations',filters)

};