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>

ts：

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

Full demo

传单标记的角度过滤管

1 个答案: