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

catch the change event使用mat-select，您必须(change)然后必须过滤数据，

以下是您在参考代码和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>

注意(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 
      ); 
  }

如何将列表中的内容过滤到mapbox

1 个答案: