当数据数组更改时重新加载 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。

提前感谢您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

deck.gl javascript reactjs reactjs