如何将弹出窗口绑定到作为来自后端 API 的 GET 请求响应进入的 FeatureCollection 的每个元素？

Question

Answer from back end comes back like this:

POSTMAN answer to GET REQUEST

I have a service method that sends the GET request to the back-end API.

export class PowerPlantService {
  constructor(private http: HttpClient) { }

  getAll() {
    return this.http.get(baseUrl);
  }

In the component, I create a service variable and call that GET method and subscribe to the result (data). Then I add the data (which is a feature collection as seen in the picture above) to the map. Final line of code below.

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
 //coordinates for Brasov
  private latitude: number = 45.6427;
  private longitude: number = 25.5887;
  private tiles?: any;
  private geoJsonFeature?: any;
   
  private map!: L.Map;
  private centroid: L.LatLngExpression = [this.latitude, this.longitude];

  ngOnInit(): void {
    this.initMap();
  }
  
  constructor(private powerPlantService: PowerPlantService) { 
  }

  private initMap(): void {
    this.map = L.map('map', {
      center: this.centroid,
      zoom: 2.8
    });

    this.tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {
      minZoom: 2.8,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

    this.tiles.addTo(this.map);
    
    this.powerPlantService.getAll().subscribe((data: any)=>{
      console.log(data);
      this.geoJsonFeature = data;
      
      L.geoJSON(data).addTo(this.map) 
    }) 

This is how the pins are displayed on the map, this is just an example for reference.

I have tried to find a way to bind a pop-up activated on click for each pin of the feature collection which displays the properties of each Feature from the FeatureCollection but I can't find a tutorial anywhere.

Answer 1

After trial and error, I have found a way:

1. In the initMap() method I created myOnEachFeatureMethod which takes as argument the feature and your tileLayer.
2. In the body of the myOnEachFeatureMethod I binded a pop-up to the layer and in the.bindPopup method I used the feature.properties to access each feature in the FeatureCollection and. DESIREDpROPERTY to display that feature's property. Ex:"Name: " + feature.properties.name
3. In the subscribe method of the getAll() API request, when I add the FeatureCollection to the map, after the FeatureCollection argument (data) I add another argument between {}, the onEachFeature method of GeoJson and my implementation of this method, myOnEachFeatureMethod).
4. Enjoy the pop-ups. :)

Here are some details about the onEachFeature but it's not very relevant to be honest, the documentation is rather disappointing if you are a beginner.

 this.powerPlantService.getAll().subscribe((data: any)=>{
      console.log(data);
      this.geoJsonFeature = data;
      L.geoJSON(data, {onEachFeature: myOnEachFeatureMethod}).addTo(this.map)

    }) 

    function myOnEachFeatureMethod(feature: any, layer:any)
    {
        layer.bindPopup(***the feature attributes you want to display go here***    );
    }