当数据数组更改时重新加载 DeckGL HexagonLayer/触发重新加载 DeckGL HexagonLayer

如何解决当数据数组更改时重新加载 DeckGL HexagonLayer/触发重新加载 DeckGL HexagonLayer

我正在使用带有 React 的 DeckGL 在 OpenStreetMap 上显示一些数据。我计划实施一些过滤器，以便能够对我拥有的数据显示不同的视图。我的主要问题是，我不知道如何在过滤数据数组后刷新数据表示层。

我看到很多人在 JavaScript 中创建了一个 DeckGL-Object，然后使用它来调用 deck.setProps()，但我不知道如何使用 react 来渲染这个 DeckGL-Object。

这是我的app.js：

export default function App({showBorder = false,onTilesLoad = null}) {
  layers = [
    /**
     * TileLayer ist ein Layer aus Open-Streetmap-Tiles (Anzeigen der Karte)
     */
    new TileLayer({
      data: [/*OSM TileServer*/],maxRequests: 20,pickable: true,onViewportLoad: onTilesLoad,autoHighlight: showBorder,highlightColor: [60,60,40],minZoom: 0,maxZoom: 19,tileSize: 512 / devicePixelRatio,renderSubLayers: (props) => {
        const {
          bBox: {west,south,east,north}
        } = props.tile;
        return [
          new BitmapLayer(props,{
            data: null,image: props.data,bounds: [west,north]
          }),showBorder &&
            new PathLayer({
              id: `${props.id}-border`,visible: props.visible,data: [
                [
                  [west,north],[west,south],[east,north]
                ]
              ],getPath: (d) => d,getColor: [255,0],widthMinPixels: 4
            })
        ];
      }
    }),new HexagonLayer({
      id: 'hexagon-layer',data: /*JsonDataArray*/,extruded: true,radius: 2000,elevationRange: [25,500],elevationScale: 200,autoHighlight: true,opacity: 0.2,colorRange: [
        [255,255,204],[199,233,180],[127,205,187],[65,182,196],[44,127,184],[37,52,148]
      ],getElevationHeight: () => 500,getPosition: (d) => d.coordinates,})
  ];

  return (
    <DeckGL
      layers={layers}
      views={new MapView({repeat: true})}
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
    />
  );
}

显然我的 app.js 有更多内容，但我认为缺少的部分并不重要，因为我只想知道如何刷新图层。

我也有一个 index.html，但我认为它的内容也不是真正相关的，因为它的唯一用途是调用 App 函数来渲染图层。

我只是不知道该怎么做，导致重新加载 HexagonLayer。

提前感谢您的帮助。

解决方法

一个好方法是使用 DataFilterExtension。基于 GPU 的数据过滤，如果您关心性能，请采用这种方式。为了扩展的时刻 there is a limitation HexagonLayer，但也许使用 GPUGridLayer 可以帮助您也可视化。

即：假设您想过滤定性数据。 filterRange 需要数字边界（它定义一个对象是否应该呈现），因此您可以将边界设置为 [1,1] 和检查某些对象是否与您当前的过滤条件匹配，如果匹配，getFilterValue 得到 1，这样对象就会被渲染，否则，不呈现：
```
 const [filterCondition,setFilter] = useState('');

 useEffect(() => {
     // dispatch some action to set the filter
     setFilter('cities');
 },[]);

 new ScatterplotLayer({
     ...otherProps,getFilterValue: object => object.properties.target === filterCondition ? 1 : 0,filterRange: [1,1],extensions: [new DataFilterExtension({ filterSize: 1 })],updateTriggers: {
         // It's important to tell deck.gl when to update
         getFilterValue: filterCondition
     }
 });
```

否则更新您的 data 数组就足够了。这意味着一个基于CPU的数据过滤，如果你的数据不是很大，没关系。多亏了反应性，这样的事情应该足够了：

const [yourData,setData] = useState([]);

useEffect(() => {
    // dispatch some action to set data
    setData([newData]);
},[]);

const layers = [
    new HexagonLayer({
        ...otherProps,data: yourData
    });
];

return (
    <DeckGL
        ...otherProps,layers={layers}
    />
);

P.D：deck.setProps() 建议在非反应环境中使用