Угловая труба фильтра для листовочных маркеров

Question

У меня есть выделенный район, в котором перечислены все районы города.

Цель состоит в том, чтобы при выборе района применить фильтр, который в конечном итоге будет отображать только маркеры листовок из соответствующего района на карте.Есть идеи, как мне этого добиться?

следующий код взят из моего компонента карты, он показывает, как поступают данные и создаются маркеры:

refresh() {
    this.artworkService.retrieveAll().then( (artworkList) => {
      this.artworkList = artworkList;
      for (const artwork of this.artworkList) {
        const popupOptions = { className: 'customPopup' };
        const popupInfo =
          "<span class='customPopup'><b>" +
          artwork.name +
          "</b></span>" +
          "<br/>" +
          artwork.firstname + " " + artwork.lastname +
          "<br/>" +
          artwork.streetname + artwork.streetnumber + ", " + artwork.zipcode;
        console.log(artwork.name);
        L.marker([artwork.latitude, artwork.longitude], this.markerIcon)
          .addTo(this.map)
          .bindPopup(popupInfo, popupOptions);
      }

    });

  }

это мой HTML дляфильтр:

<div class="leaflet-top leaflet-left">
  <div class="filterButton leaflet-control">
    <i class="fa fa-filter fa-7x"></i>
    <strong class="mt-4">District</strong>
    <select class="ml-1" name="zipcode" [(ngModel)]="zipcode">
      <option>-All-</option>
      <option *ngFor="let zipcode of artworkList">{{zipcode}}</option>
    </select>
  </div>
</div>

Answer 1

Возможно, это может быть достигнуто с помощью канала, но я дам другую реализацию для вашей проблемы. Метод, который удаляет все маркеры и добавляет те, которые необходимы после изменения значения параметра выбора:

шаблон:

<select
  class="ml-1"
  name="zipcode"
  [(ngModel)]="zipcode"
  (ngModelChange)="changeZipcode()"
>
  <option>-All-</option>
  <option *ngFor="let list of artworkList">{{list.zipcode}}</option>
</select>

ц

map;
artworkList;
zipcode;
popupOptions = {
  className: "test test2"
};

buildMarkers(artworkList) {
   for (let artwork of artworkList) {
       this.buildPopup(artwork);
   }
}

buildPopup(object) {
    const popupInfo = `
        ${object.name} <br/>
        ${object.firstname}
        ${object.lastname} <br/>
        ${object.streetname} ${object.streetnumber}
        , ${object.zipcode}
      `;
    L.marker([object.latitude, object.longitude], this.markerIcon)
      .addTo(this.map)
      .bindPopup(popupInfo, this.popupOptions);
}

changeZipcode() {
    // empty map of any markers
    this.map.eachLayer(layer => {
      if (layer instanceof L.Marker) this.map.removeLayer(layer);
    });
    if (this.zipcode === "-All-") {
      // build all markers like before selection
      this.buildMarkers(this.artworkList);
    } else {
      // return onject inside array which contains the specific zipcode
      const currentArtworklist = this.artworkList.filter(
        list => list.zipcode == this.zipcode
      );
      this.buildMarkers(currentArtworklist);
    }
}

Полная демонстрация