Estoy trabajando en el proyecto Angular. He cargado el mapa de Mapbox. Hay una base de datos configurada que tiene algún tipo de campañas, cada campaña tiene su propio polígono. Cuando el usuario elige una campaña, debe activar la función plotPolygon(coordinates) . Esta función se encuentra a continuación en el código y agregará la fuente de Mapbox (la fuente son las coordenadas del polígono) con map.addSource() . Cada vez que el usuario hace clic en una campaña diferente, se debe cambiar la fuente y se debe agregar un polígono diferente a Mapbox. Creo que la fuente anterior también debería eliminarse al mismo tiempo. Estoy un poco confundido sobre cómo hacer esto. El polygon variable de entrada en mi caso cambia cada vez que se llama a la función plotPolygon . El resultado que obtengo es que cuando se llama a la función por primera vez, obtengo un trazado de polígono, y en cada llamada posterior nada cambiará, el polígono permanecerá trazado. Lo que debería hacer es eliminar el polígono antiguo y trazar uno nuevo.

Esta es la función que hice:

 plotPolygon(polygon: any) { //PLOTTING polygons // Add a data source containing GeoJSON data. this.map.addSource('CampPoly', { 'type': 'geojson', 'data': { 'type': 'Feature', 'geometry': { 'type': 'Polygon', // These coordinates outline CampPoly. 'coordinates': polygon } } }); // Add a new layer to visualize the polygon. this.map.addLayer({ 'id': 'CampPoly', 'type': 'fill', 'source': 'CampPoly', // reference the data source 'layout': {}, 'paint': { 'fill-color': '#0080ff', // blue color fill 'fill-opacity': 0.5 } }); // Add a black outline around the polygon. this.map.addLayer({ 'id': 'outline', 'type': 'line', 'source': 'CampPoly', 'layout': {}, 'paint': { 'line-color': '#000', 'line-width': 3 } }); }