javascript - Mapbox GL setData to update layer - Stack Overflow

admin管理员组

文章数量:1363637

In my angular app I am using directions api and trying to add a route path from one direction to another. On the first time when making the ajax request route path is creating properly but from the second time i can not see the route path.

I am getting this error from second time onwards of the ajax request - Layer with id "route" already exists on this map

Is there any way to update the source and layer in mapbox?

drawRoute() {
const url = `/${this.startData?.lng},${this.startData?.lat};${this.endData?.lng},${this.endData?.lat}?alternatives=true&geometries=geojson&steps=true&access_token=${environment.mapbox.accessToken}`;

this._http.get(url).subscribe({
    next: (result) => {
        const geojson: any = {
            type: 'Feature',
            properties: {},
            geometry: {
               type: 'LineString',
               coordinates: result.routes[0]
            }
        };

        if (this.map?.getSource('route')) {
            const source: mapboxgl.GeoJSONSource = this.map?.getSource('route') as 
             mapboxgl.GeoJSONSource;
            source.setData(geojson);
        } else {
            this.map?.addSource('route', {
            type: 'geojson',
                data: {
                    type: 'Feature',
                    properties: {},
                    geometry: {
                       type: 'LineString',
                       coordinates: result.routes[0].geometry.coordinates
                    }
                }
            });
        }

        this.map?.addLayer({
            id: 'route',
            type: 'line',
            source: 'route',
            layout: {
                'line-join': 'round',
                'line-cap': 'round'
            },
            paint: {
              'line-color': '#1F5ED8',
              'line-width': 2
            }
        });
    },
    error: (err) => {} 
})
}

In my angular app I am using directions api and trying to add a route path from one direction to another. On the first time when making the ajax request route path is creating properly but from the second time i can not see the route path.

I am getting this error from second time onwards of the ajax request - Layer with id "route" already exists on this map

Is there any way to update the source and layer in mapbox?

drawRoute() {
const url = `https://api.mapbox./directions/v5/mapbox/driving/${this.startData?.lng},${this.startData?.lat};${this.endData?.lng},${this.endData?.lat}?alternatives=true&geometries=geojson&steps=true&access_token=${environment.mapbox.accessToken}`;

this._http.get(url).subscribe({
    next: (result) => {
        const geojson: any = {
            type: 'Feature',
            properties: {},
            geometry: {
               type: 'LineString',
               coordinates: result.routes[0]
            }
        };

        if (this.map?.getSource('route')) {
            const source: mapboxgl.GeoJSONSource = this.map?.getSource('route') as 
             mapboxgl.GeoJSONSource;
            source.setData(geojson);
        } else {
            this.map?.addSource('route', {
            type: 'geojson',
                data: {
                    type: 'Feature',
                    properties: {},
                    geometry: {
                       type: 'LineString',
                       coordinates: result.routes[0].geometry.coordinates
                    }
                }
            });
        }

        this.map?.addLayer({
            id: 'route',
            type: 'line',
            source: 'route',
            layout: {
                'line-join': 'round',
                'line-cap': 'round'
            },
            paint: {
              'line-color': '#1F5ED8',
              'line-width': 2
            }
        });
    },
    error: (err) => {} 
})
}

• javascript
• mapbox
• mapbox-gl

Share Improve this question Follow edited Mar 27, 2021 at 8:44 RAHUL KUNDU asked Mar 27, 2021 at 8:39 RAHUL KUNDURAHUL KUNDU 95533 gold badges1919 silver badges4040 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

I think that the setData() method that is available for GeoJSON sources in Mapbox GL JS is what you are looking for. The method allows you to update the underlying source data and triggers a map re-render. The data-driven styling should then kick in and style your updates layers as desired.

https://docs.mapbox./mapbox-gl-js/api/sources/#geojsonsource#setdata

Here is a pseudo-code example

map.getSource("source-id").setData(updatedGeoJSONData);

Hope this helps! I have been writing a series of guides for Mapbox that you might be interested in too. Here are some links:

• The Mapbox Developer's Handbook
• A Complete Guide to Sources and Layers in React and Mapbox GL JS

本文标签： javascriptMapbox GL setData to update layerStack Overflow