javascript - Mapbox GL setData 更新图层

Question

在我的 Angular 应用程序中，我正在使用 Directions api 并尝试添加从一个方向到另一个方向的路线路径。第一次发出ajax请求时，路由路径已正确创建，但从第二次开始，我看不到路由路径。

从第二次 ajax 请求开始，我收到此错误 - 此 map 上已存在 ID 为“route”的图层

有什么方法可以更新mapbox中的源和图层吗？

drawRoute() {
const url = `https://api.mapbox.com/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) => {} 
})
}

Answer 1

我认为您正在寻找 Mapbox GL JS 中可用于 GeoJSON 源的 setData() 方法。该方法允许您更新底层源数据并触发 map 重新渲染。然后，数据驱动的样式应该启动并根据需要设置更新层的样式。

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

这是一个伪代码示例

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

希望这有帮助!我一直在为 Mapbox 编写一系列指南，您可能也会感兴趣。以下是一些链接:

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