源更新后Mapbox图层未更新

问题描述

我正在使用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]);

这些都不起作用，我很难找到如何基于更新的源来更新图层。当我在控制台中检查源代码时，一切似乎都正确，只是无法管理地图上的图层。

任何帮助将不胜感激。

解决方法

我发现了问题，我将原来的geoJson对象用于setData方法而不是数据输入，该数据在对象中太高了。只是一个简单的错误而被忽略了。

geojson mapbox reactjs reactjs