用于传单标记的角形过滤管答案

【问题标题】：Angular filter pipe for leaflet markers用于传单标记的角形过滤管
【发布时间】：2020-03-12 19:24:25
【问题描述】：

我有一个选择，称为区，其中列出了城市的所有区。

目标是在选择一个地区以应用过滤器时，最终将仅在地图上显示相关地区的传单标记。有什么想法可以实现吗？

以下代码来自我的地图组件，它显示了数据的输入和标记的创建方式：

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>

【问题讨论】：

你能解释更多你想要达到的目标吗？当您单击一个地区时，您想列出传单标记但在哪里。我是传单的新手，但是如果您的问题与角度有关，如果您再解释一下，我可以提供帮助
传单基于开放街道地图！它只是一张地图，上面有很多小别针。在这个应用程序中，这些图钉对应于人们在城市中发现的各种公共艺术，但如果图钉太多，就会失去监督。因此，我想要一个过滤器，例如选择一区，它只会显示该区的引脚，并删除其他引脚。

标签： angular typescript filter leaflet pipe

【解决方案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

【讨论】：