更改 deck.gl 中点击项目的颜色

Question

我正在尝试实现与我们在移动设备上使用 autoHighlight 道具时相同的行为，即点击一个项目 'selects' 并更改其颜色。我设法让它与 deck.gl 的 updateTriggers 道具一起工作，但我觉得我遗漏了一些东西，因为更新需要 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>
  );
}

Answer 1

对于遇到此问题的任何人：如果您仅将 id（而不是整个对象）传递给 updateTriggers，则图层的重新渲染将完美无缺。在我的例子中，我只需要将以下内容传递给 updateTriggers:

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

更改 deck.gl 中点击项目的颜色

Change colour of clicked item in deck.gl

reactjs

deck.gl