javascript - 如何过滤列表中的内容到 map 框

Question

我有一个显示项目列表，如果我单击其中一个项目，我希望根据所选项目过滤其余项目。我想根据所选的显示列表过滤标记点。谁能帮我解决这个问题。我尝试过 Mapbob 中的许多示例，但没有一个对我有用。

HTML:

<mat-select >

          <mat-option *ngFor="let interview of displayList" [value]="interview._id">

TS:

 mapboxgl.accessToken = 'pk.eyJ1IjoicmFrc2hpdGhhMTkiLCJhIjoiY2pjcHl1YW5wMjR5czJ6bzdqdjZrbDRzeSJ9.OOqu6zVyNsXavzCsYoBdPA';
    var coOrdinates = this.points;
    **var filterGroup = document.getElementById('filter-group');**
    var map = new mapboxgl.Map({
      container: 'maps',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [coOrdinates[1].lat,coOrdinates[1].lang],
      zoom: 3
    });

    });

Answer 1

您必须使用(change)来捕获mat-select的更改事件，然后您必须过滤数据，

以下是引用您的代码和 plunker 后必须进行的代码更改

HTML:

<mat-select id='filter-group' class='filter-group' (change)="myFunction($event)">

    <mat-option *ngFor="let interview of displayList" [value]="interview.name">

    </mat-option>
</mat-select>

watch (change)="myFunction($event)" 我们将在组件中使用 myFunction 。

TS:

myFunction(event){ 
    this.loadAllPins(event.value); 
}

loadAllPins(filter) { 
    let that = this; 
    this.points = this.places.map(function(pins) { 
    return {"name":pins.name,"lat":pins.lat,"lang":pins.lang,"address":pins.address,"category_name":pins.category_name,"description":pins.description,"email":pins.email,"phone_number":pins.phone_number,"pin_media":pins.pin_media, 
    "country":pins.user_details.country,"user_name":pins.user_details.user_name,"user_id":pins.user_id,"pin_id":pins._id}; 
    }); 
    if(filter) { 
        this.points = this.points.filter( 
        point => point.category_name == filter 
        ); 
    if (this.points == "") { 
        console.log("empty"); 
    } 
    } 
    mapboxgl.accessToken = 'pk.eyJ1IjoicmFrc2hpdGhhMTkiLCJhIjoiY2pjcHl1YW5wMjR5czJ6bzdqdjZrbDRzeSJ9.OOqu6zVyNsXavzCsYoBdPA'; 
    var coOrdinates = this.points; 
    var filterGroup = document.getElementById('filter-group'); 
    if(coOrdinates.length){ 
    var map = new mapboxgl.Map({ 
    container: 'maps', 
    style: 'mapbox://styles/mapbox/streets-v9', 
    center: [coOrdinates[0].lat,coOrdinates[0].lang], 
    zoom: 3 
    }); 
    } 
    else{ 
    var map = new mapboxgl.Map({ 
    container: 'maps', 
    style: 'mapbox://styles/mapbox/streets-v9', 
    zoom: 3 
    }); 
}

我添加的过滤逻辑是，

 if(filter) { 
      this.points = this.points.filter( 
      point => point.category_name == filter 
      ); 
  }