源更新后 Mapbox 图层未更新

Question

我正在使用 Redux 状态更新 Mapbox 源中的坐标数组。我首先检查是否有带有 id 的源，如果是，我设置源的数据，如果没有，我将源添加到地图。当 redux 状态发生变化时，它会触发一个效果，该效果会更新 geojson 对象中要素的坐标并使用 setData 更改源。我试过删除图层、更改源并添加图层，这只是给了我旧图层（即使源确实已更新）。我也试过只更新源代码并查看图层是否会动态更新，但没有。

效果代码如下，当redux状态改变时触发

useEffect(() => {

        const geoJsonObj = {
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: []
            }
        };
        for (let i = 0; i < (props.mapRoutes.length); i++) {
            geoJsonObj.data.features.push({
                type: 'Feature',
                geometry: {
                    type: 'LineString',
                    coordinates: props.mapRoutes[i].geometry.coordinates
                }
            });
        };

        const routeLayer = {
            id: 'route',
            type: 'line',
            source: 'route',
            layout: {
                'line-join': 'round',
                'line-cap': 'round'
            },
            paint: {
                'line-color': '#ff3814',
                'line-width': 5,
                'line-opacity': 0.75
            }
        };
        const jsonString = JSON.stringify(geoJsonObj);
        const jsonObj = JSON.parse(jsonString);

        if (props.mapRoutes.length) {
            if (map.current.getSource('route')) {
                map.current.getSource('route').setData(jsonObj);
            } else {
                map.current.addSource('route', jsonObj);
                map.current.addLayer(routeLayer);
            };
        };

    }, [props.mapRoutes]);

这些都不起作用，我无法找到如何根据更新的源更新图层。当我在控制台中检查源时，一切似乎都是正确的，我只是无法更新地图上的图层。

如有任何帮助，我们将不胜感激。

Answer 1

我发现了问题，我在 setData 方法中使用了原始的 geoJson 对象而不是数据条目，这在对象中的级别太高了。只是一个被忽略的简单错误。

源更新后 Mapbox 图层未更新

Mapbox layer not updating after source update

geojson

mapbox

reactjs