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

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

我看到一群人用JavaScript创建了一个DeckGL对象，然后使用它调用

deck.setProps（）

，但我不知道如何使用react呈现这个DeckGL对象

这是我的

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, 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, south, east, north]
          }),
          showBorder &&
            new PathLayer({
              id: `${props.id}-border`,
              visible: props.visible,
              data: [
                [
                  [west, north],
                  [west, south],
                  [east, south],
                  [east, north],
                  [west, north]
                ]
              ],
              getPath: (d) => d,
              getColor: [255, 0, 0],
              widthMinPixels: 4
            })
        ];
      }
    }),
    new HexagonLayer({
      id: 'hexagon-layer',
      data: /*JsonDataArray*/,
      pickable: true,
      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（{showBorder=false，onTilesLoad=null}）{
层=[
/**
*Tillelayer是开放式街道地图瓷砖的ein层（ANZEGN der Karte）
*/
新瓦工({
数据：[/*OSM TileServer*/]，
最大请求数：20，
pickable:是的，
onViewportLoad:onTilesLoad，
自动突出显示：showBorder，
highlightColor:[60,60,60,40]，
最小缩放：0，
maxZoom:19，
tileSize:512/devicePixelRatio，
渲染子层：（道具）=>{
常数{
bbox:{西、南、东、北}
}=道具、瓷砖；
返回[
新位图层（道具{
数据：空，
图片：道具数据，
边界：[西、南、东、北]
}),
showBorder&&
新路径层({
id:`${props.id}-border`，
可见：道具可见，
数据：[
[
[西，北]，
[西，南]，
[东，南]，
[东，北]，
[西，北]
]
],
getPath：（d）=>d，
getColor:[255,0,0]，
像素宽度：4
})
];
}
}),
新六角形层({
id:'六边形层'，
数据：/*JsonDataArray*/,，
pickable:是的，
对,，
半径：2000，
升降范围：[25500]，
升降比例：200，
自动突出显示：正确，
不透明度：0.2，
颜色范围：[
[255, 255, 204],
[199, 233, 180],
[127, 205, 187],
[65, 182, 196],
[44, 127, 184],
[37, 52, 148]
],
getElevationHeight:（）=>500，
getPosition：（d）=>d坐标，
})
];
返回(
);
}

显然，我的

app.js

还有一点内容，但我不认为缺少的部分很重要，因为我只想知道如何刷新层

我还有一个

index.html

，但我认为它的内容也不是很相关，因为它的唯一用途是调用

App

函数来渲染层

我就是不知道该怎么做，让六边形图层重新加载

提前谢谢你的帮助

一个好的方法是使用。基于GPU的数据 过滤，如果您关心性能，请按此方式进行。对于 延长期限的时刻

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

否则，更新

数据
数组就足够了。这意味着
基于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}
    />
);

const[yourData，setData]=useState（[]）；
useffect（（）=>{
//分派一些操作来设置数据
setData（[newData]）；
}, []);
常数层=[
新六角形层({
…其他道具，
数据：你的数据
});
];
返回(
);

注意：

deck.setProps（）

建议在非反应性环境中使用

一个好的方法是使用。基于GPU的数据 过滤，如果您关心性能，请按此方式进行。对于 延长期限的时刻

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

否则，更新

数据
数组就足够了。这意味着
基于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}
    />
);

const[yourData，setData]=useState（[]）；
useffect（（）=>{
//分派一些操作来设置数据
setData（[newData]）；
}, []);
常数层=[
新六角形层({
…其他道具，
数据：你的数据
});
];
返回(
);

注意：

deck.setProps（）

建议在非反应性环境中使用