Как мне динамически переключать несколько слоев в Deck.gl? - PullRequest
Новая
       39

Как мне динамически переключать несколько слоев в Deck.gl?

0 голосов
/ 05 мая 2020

enter image description here Я создаю базовую c систему визуализации, в которой слои можно переключать из блока управления. У меня есть layers, которые объединяют отдельные слои в один.

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

У меня 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 которых равно * 1018. *. 

  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}
      >

В моей программе отключение слоев работает нормально, но они работают не включайся. В консоли я заметил, что жизненные циклы между слоями различаются. Есть ли что-то неправильное в моем подходе?

1 Ответ

0 голосов
/ 22 мая 2020

А вы пробовали использовать свойство visible для слоев? Если вы собираетесь переключаться несколько раз и часто, deck.gl предлагает использовать видимый вместо воссозданного нового слоя. Некоторые полезные ресурсы по этой теме:

Сначала создайте блок управления, как вы это делали. Затем передайте компоненту DeckGL в качестве свойств то, что вы выбрали в блоке управления. 

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

Создайте состояние для слоев. 

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

Проверяйте с помощью useEffect, когда что-то изменяется в LayersProps. 

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,
});

И передать в качестве реквизита только то, что вы выбрали из блока управления, и проверить наличие изменений. 

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]}
    ...
>
...