javascript - 如何在 Deck.gl 中动态切换多个图层？

Question

我正在构建一个基本的可视化系统，可以从控制箱切换图层。我有 layers 将各个层合并为一个层。

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

我有 filterState 跟踪控制箱中的事件。它包含层对象作为 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()这将选择其 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 建议使用 visible 而不是重新创建一个新层。关于此线程的一些有用资源:

• Creating layer instances is cheap .
• Layer visibility over addition and removal .
• Visible property .

首先，像您一样创建一个控制框。然后将您从控制框中选择的内容作为 Prop 传递给 DeckGL 组件。

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

为层创建状态。

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]);

或者你可以创建一个状态

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

并且仅将您从控制框中选择的内容作为 Prop 传递并检查更改。

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

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

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

如果您愿意，您还可以将每一层拆分为一个状态(这样您就有了一个原始值)。

最后，你可以创建你的层

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

和渲染

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