Keplergl 在添加从 supabase 获得的更多数据集时对重复图层做出反应

Question

我正在尝试将 supabase 中的数据可视化到 KeplerGl 地图上，但 KeplerGl 在向地图添加新数据时不断复制图层。

当我设置

keepExistingConfig: false

时，它会擦除所有现有图层并添加最后获取的数据集。 我在这项任务上需要一些帮助。 这是我的开普勒地图

在

AddDataToMap.js

文件中，与

AddPoints

和

AddMonitoringDeviceStatus

文件

相同

const ADD = () => {
  const data = fetch('from/some/endpoint');
  
  const geojson = { 
    datasets: { info: {id: 'my_data'},data: processGeojson(data) }
    options: { keepExistingConfig: true },
   ... // other configs
  }
 
  useEffect(()=>{
     
     dispatch(addDataToMap(geojson))    

     });
    return null;
  }

在

map.js

文件中

const Map = () => (

   <ErrorBoundary>
        <AutoSizer>
          {({ height, width }) => (
            <KeplerGl
              id="map"
              store={store}
              width={width}
              height={height}
              mapboxApiAccessToken={token}
              onHover={handleLayerHover}
              onClick={handleLayerClick}
            />
          )}
        </AutoSizer>
    </ErrorBoundary>
      <AddDataToMap />
      <AddPoints />
      <AddMonitoringDeviceStatus />
)

Answer 1

根据我当前的实现，我在每个组件中调度

addDataToMap

操作。

• 最好的实现是这里

要点

const Map = () => {
 const addData = async() => {
   const data_1 = await fetchData1();  
   const data_2 = await fetchData2();  
   
   if([data_1, data_2].includes(undefined)) return;

  const datasets = [
      {
         { info: { id: 'data_1' }, data: data_1 },
         { info: { id: 'data_2' }, data: data_2 },
       } 
    ]
   
  dispatch(addDataTopMap({ datasets, config: {} });

   }

  useEffect(() => {
 
   addData();

  },[data_2, data_1])

}