0

我正在尝试实现与移动设备上的 autoHighlight 道具相同的行为，其中单击项目“选择”它并更改其颜色。我设法使它与 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>
  );
}

4

1 回答 1

1

对于遇到此问题的任何人：如果您仅将 id（而不是整个对象）传递给 updateTriggers，则图层的重新渲染效果很好。就我而言，我只需要将以下内容传递给 updateTriggers：

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

于 2020-03-18T08:11:55.760 回答