0
152
Vistas¿Cómo vinculo una ventana emergente a cada elemento de una FeatureCollection que ingresa como una respuesta de solicitud GET de la API de back-end?
La respuesta del back-end regresa así: 
POSTMAN responde a OBTENER SOLICITUD 
Tengo un método de servicio que envía la solicitud GET a la API de back-end.
export class PowerPlantService { constructor(private http: HttpClient) { } getAll() { return this.http.get(baseUrl); }En el componente, creo una variable de servicio y llamo a ese método GET y me suscribo al resultado (datos). Luego agrego los datos (que es una colección de características como se ve en la imagen de arriba) al mapa. Línea final de código a continuación.
@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: '© <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) })Así es como se muestran los pines en el mapa, este es solo un ejemplo de referencia.
He intentado encontrar una manera de vincular una ventana emergente activada al hacer clic para cada pin de la colección de funciones que muestra las propiedades de cada función de FeatureCollection, pero no puedo encontrar un tutorial en ninguna parte.
1 Respuestas
Responde la pregunta0
Después de prueba y error, he encontrado una manera:
- En el método initMap() creé myOnEachFeatureMethod que toma como argumento la función y su capa de mosaico.
- En el cuerpo de myOnEachFeatureMethod, vinculé una ventana emergente a la capa y en el método .bindPopup usé feature.properties para acceder a cada función en FeatureCollection y . PROPIEDAD DESEADA para mostrar la propiedad de esa entidad. Ej: "Nombre: " + característica.propiedades.nombre
- En el método de suscripción de la solicitud de API getAll(), cuando agrego FeatureCollection al mapa, después del argumento FeatureCollection (datos) agrego otro argumento entre {}, el método onEachFeature de GeoJson y mi implementación de este método, myOnEachFeatureMethod) .
- Disfruta de las ventanas emergentes. :)
Aquí hay algunos detalles sobre onEachFeature pero no es muy relevante para ser honesto, la documentación es bastante decepcionante si eres un principiante.
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*** ); }