Изменить цвет кликаемого элемента в deck.gl - PullRequest
Новая
       21

Изменить цвет кликаемого элемента в deck.gl

0 голосов
/ 18 марта 2020

Я пытаюсь добиться того же поведения, что и у нас с опорой autoHighlight на мобильном устройстве, когда нажатие на элемент «выбирает» его и меняет его цвет. Мне удалось заставить его работать с помощью updateTriggers из deck.gl, но я чувствую, что что-то упустил, потому что обновление занимает 3 секунды, а слой не реагирует на это.

Вот что есть до сих пор: 

const App = () => {
  const [selectedItem, setSelectedItem] = useState(null);

  const layers = [
    new H3ClusterLayer({
      id: 'h3-cluster-layer',
      data,
      pickable: true,
      stroked: true,
      filled: true,
      extruded: false,
      getHexagons: d => d.hexIds,
      getFillColor: hexagon => {
        if (selectedItem && hexagon.hexIds[0] === selectedItem.hexIds[0]) return [25,116,210]
        if (hexagon.mean === undefined) return [122, 122, 122];

        return [255, (1 - hexagon.mean / 500) * 255, 0];
      },
      updateTriggers: {
        getFillColor: [selectedItem]
      },
      getLineColor: [255, 255, 255],
      lineWidthMinPixels: 1,
      opacity: 0.03,
      autoHighlight: true,
      highlightColor: [142,223,255],
    }),
  ];

  return (
    <DeckGL
      initialViewState={initialViewState}
      controller={true}
      layers={layers}
      onClick={(info, event) => {
        // event bubble cancelation doesn't work between react components and deck.gl
        if (event.target !== document.getElementById('view-default-view')) return;

        setSelectedItem(info.object)
      }}
    >
      <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
      {selectedItem && <Details selectedItem={selectedItem} />}
    </DeckGL>
  );
}

1 Ответ

0 голосов
/ 18 марта 2020

Для всех, кто сталкивался с этим: перерисовка слоя работает отлично, если вы только передаете id (а не весь объект) updateTriggers. В моем случае мне просто нужно было передать в updateTriggers следующее: 

updateTriggers: {
  getFillColor: [selectedItem ? selectedItem.hexIds[0]: null]
},
...