如何在 Deck.gl 中動態切換多個圖層？

Question

我正在構建一個基本的可視化系統，可以從控制框切換圖層。 我有將各個layers合並為一個的圖層。

const [layers, setLayers] = useState([densityLayer, pedestrianLayer]);

我有filterState跟蹤控制框中的活動。 它包含層 object 作為linkTo的屬性

 const [filterState, setFilterState] = useState([
        {
          id: 'densityFilter',
          checked: true,
          description: 'Population density',
          linkedTo: densityLayer
        },
        {
          id: 'pedestrianFilter',      
          checked: true,
          description: 'Pedestrian volume',
          linkedTo: pedestrianLayer
        }
      ]);

並且每次更新filterState中的檢查屬性時，它都會啟動renderLayers() ，它將 select 對應的圖層checked屬性為true 。

  useEffect(()=>{
        renderLayers();
      },[filterState]);

      const renderLayers = () => {
        const newLayers = []; 
        filterState.map(filter => (filter.checked && newLayers.push(filter.linkedTo)));
        setLayers(newLayers);
      }

然后將layers作為圖層道具傳遞給DeckGL組件。

   <DeckGL
        initialViewState={viewState}
        controller={true}
        layers={layers}
      >

在我的程序中，關閉圖層可以正常工作，但它們不會重新打開。 在控制台中，我注意到層之間的生命周期是不同的。 我的方法有什么不正確的地方嗎？

Answer 1

您是否嘗試過使用圖層的可見屬性？ 如果您要多次且經常切換，deck.gl 建議使用可見層而不是重新創建新層。 關於這個線程的一些有用資源：

• 創建層實例很便宜。
• 添加和刪除的圖層可見性。
• 可見財產。

首先，像您一樣創建一個控制框。 然后將您從控制框中選擇的內容作為道具傳遞給 DeckGL 組件。

{
    layer1: true, layer2: false, layer3: false, layer4: false,
}

為層創建 state。

const [activeLayers, setActiveLayers] = useState(layersProps);

當 layersProps 發生變化時使用 useEffect 檢查。

useEffect(() => {
    const layers = {
        layer1: false,
        layer2: false,
        layer3: false,
        layer4: false,
    };

    if (typeMap === 'layer1') {
        layers.layer1 = true;
    } else if (typeMap === 'layer2') {
        layers.layer2 = true;
    }
    ...

    setActiveLayers(layers);
}, [layerProps]);

或者您可以創建一個 state

const [activeLayers, setActiveLayers] = useState({
    layer1: true, layer2: false,
});

並僅將您從控制框中選擇的內容作為道具傳遞並檢查更改。

useEffect(() => {
    const layers = {
        layer1: false,
        layer2: false,
    };

    if (typeMap === 'layer1') {
        layers.layer1 = true;
    } else if (typeMap === 'layer2') {
        layers.layer2 = true;
    }
    ...

    setActiveLayers(layers);
}, [inputLayerSelected]);

如果您願意，也可以使用單個 state 拆分每一層（這樣您就有了一個原始值）。

最后，您可以創建圖層

const layer1 = new ScatterplotLayer({
    id: 'scatter',
    data: data,
    ....
    visible: activeLayers.layer1, OR
    visible: layer1
});

並渲染

<DeckGL
    layers={[layer1, layer2, layer3, layer4]}
    ...
>