javascript - 如何根据单击的按钮在传单上添加/删除标记？

Question

我想做一个过滤器，让用户点击一个按钮，只在传单地图上显示与该按钮相关的标记。（例如，如果我点击救护车按钮，它只会显示有救护车的标记）

我根据这个 json 代码制定我的标准（这是它的一个片段）

{
      "station_co_number":"801",
      "station_name":"HYATTSVILLE",
      "location_1":{
         "latitude":"38.96384532",
         "longitude":"-76.95262225",
         "human_address":"{\"address\": \"6200 BELCREST RD\", \"city\": \"Hyattsville\", \"state\": \"MD\", \"zip\": \"\"}"
      },
      "type":"VOLUNTEER",
      "medical_unit_onsite":"Y",
      "ambulance_onsite":"Y",
      "icon":"a8fbdc2c-f8f6-491a-b764-8d30aca84d5b",
      ":@computed_region_87xh_ddyp":"8789"
   },

我想将其基于 medical_unit_onsite 值和 ambulance_onsite 值。我想这样做，如果我单击页面上的救护车按钮，传单将仅显示 ambulance_onsite 值为 Y 的标记，现场医疗单位也可以这样说。有没有办法做到这一点？这是我当前的代码

const mymap = L.map('mapid').setView([38.8447892, -76.8266697], 9);

            const attribution = 
            '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>'

            const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
            const tiles = L.tileLayer(tileUrl, { attribution })
            tiles.addTo(mymap)

            const url = 'https://data.princegeorgescountymd.gov/resource/bzf2-94qx.json';
            async function getData() {
              const response = await fetch(url)
              const data = await response.json();

              for (item of data) {
                let lat = item.location_1.latitude;
                let lng = item.location_1.longitude;
                let addy = item.human_address;
                let ambuLance = item.ambulance_onsite;
                let medicalOnsite = item.medical_unit_onsite;

                const marker = L.marker([lat, lng], title=item.station_name).addTo(mymap);

                const txt = `${item.station_name}`;
                marker.bindPopup(txt);
              }

            }
            $("#all").click(function() {
            map.addLayer(others)
            map.removeLayer(cafes)
        });
        $("#ambulance").click(function() {
          if(!ambulance == 'Y'){
            map.removeLayer(marker)
          }
            //map.addLayer(cafes)
            //map.removeLayer(others)
        });
        $("#medicalunit").click(function() {
          if(!medicalOnsite  == 'Y'){
            map.removeLayer(marker)

          }
            //map.addLayer(cafes)
            //map.addLayer(others)
        });

            getData();

我主要是想让我的 .click 函数工作，以便为按下的每个按钮只显示值为“Y”的标记。如果您能提供帮助，将不胜感激

这里也是html

<div class="col-md-6">
          <div class="btn-group">
            <button type="button" id="all" class="btn btn-success">All</button>
            <button type="button" id="ambulance" class="btn btn-primary">Ambulance</button>
            <button type="button" id="medicalunit" class="btn btn-danger">Medical Unit</button>
        </div>
        </div>
        <div class="col-md-6 bg-light mt-5">
          <div class="row">
            <div class="col-md-7">
              <h3>Selected Station Services Rating</h3>
                <!-- Might not need this block
                 <p> <b>Type: State</b></p>
                 <p> <b>Medical unit: Yes</b></p>
                  <p><b>Ambulance: Yes</b></p>
                  -->
            </div>
            <div class="col-md-5 pt-5">
             <i class="fa fa-star" aria-hidden="true"></i>
             <i class="fa fa-star" aria-hidden="true"></i>
             <i class="fa fa-star" aria-hidden="true"></i>
             <i class="fa fa-star" aria-hidden="true"></i>
             <i class="fa fa-star-half-o" aria-hidden="true"></i>
            </div>

          </div>

          </div>
        </div>
        </div>
      </div>

leaflet javascript 

标签： javascriptleaflet

Answer 1

您可以使用 featureGroups 并将它们添加/删除到地图中。

var fgAmbulance = L.featureGroup();
var fgMedicalunit= L.featureGroup();
var fgOtherMarkers = L.featureGroup();

 async function getData() {
              const response = await fetch(url)
              const data = await response.json();

              for (item of data) {
                let lat = item.location_1.latitude;
                let lng = item.location_1.longitude;
                let addy = item.human_address;
                let ambuLance = item.ambulance_onsite;
                let medicalOnsite = item.medical_unit_onsite;

                const marker = L.marker([lat, lng], title=item.station_name);
                const txt = `${item.station_name}`;
                marker.bindPopup(txt);

                if(ambuLance == 'Y'){
                    fgAmbulance.addLayer(marker);
                }else if(medicalOnsite == 'Y'){
                    fgMedicalunit.addLayer(marker);
                }else{
                    fgOtherMarkers.addLayer(marker);
                }
              }
fgAmbulance.addTo(mymap);
fgMedicalunit.addTo(mymap);
fgOtherMarkers.addTo(mymap);
            }

$("#all").click(function() {
            mymap.addLayer(fgAmbulance);
            mymap.addLayer(fgMedicalunit);
            mymap.addLayer(fgOtherMarkers);
        });
        $("#ambulance").click(function() {
          mymap.addLayer(fgAmbulance);
          if(mymap.hasLayer(fgMedicalunit)){
              mymap.removeLayer(fgMedicalunit);
          }
          if(mymap.hasLayer(fgOtherMarkers)){
              mymap.removeLayer(fgOtherMarkers);
          }
        });
        $("#medicalunit").click(function() {
          mymap.addLayer(fgMedicalunit);
          if(mymap.hasLayer(fgAmbulance)){
              mymap.removeLayer(fgAmbulance);
          }
          if(mymap.hasLayer(fgOtherMarkers)){
              mymap.removeLayer(fgOtherMarkers);
          }
        });

这应该工作