如何将多个过滤器应用于 mapbox 位置

Question

我已经为大学校园内的各种建筑物创建了地图，并且正在尝试为最终用户设置一个导航菜单，以 select 多个过滤器以仅显示适用的位置。

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

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)
  
};

如何将多个过滤器应用于 mapbox 位置

How to apply multiple filters to mapbox locations

javascript

mapbox

mapbox-gl-js