React + Mapbox：Deck.gl 中`getRenderedFeatures` 的示例实现？

如何解决React + Mapbox：Deck.gl 中`getRenderedFeatures` 的示例实现？

我有一个使用 React、MapBox 和 Deck.gl 堆栈的项目。我正在尝试查询样式地图上的要素，但在实现 Deck.gl 的 getRenderedFeatures 函数时遇到问题，即使查看了 documentation。

我当前的 React 组件：

<DeckGL
          {...deckGLProps}
          layers={layers}
          onViewportChange={() => console.log(mapRef)}
          ref={mapRef}
          getRenderedFeatures={(e) => console.log(e)}
        >
          <StaticMap
            ref={mapRef}
            visible={!level}
            {...staticMapProps}
            {...viewport}
            mapStyle={mapStyle[0]}
          />
        </DeckGL>

我知道建议在 getRenderedFeatures 上查询 onViewportLoad，但我找不到有效的实现。

是否有人有 getRenderedFeatures 的有效实现或指向该函数的更好文档的链接？

解决方法

您使用 MVTLayer 对吗？

getRenderedFeatures is a method 的 MVTLayer 类，您需要从这里访问它，而不是从甲板实例。

逻辑可能是：

1. 渲染 MVTLayer
2. 从甲板实例中聆听onViewStateChange，并进行一些去抖动
3. 然后调用 getRenderedFeatures

类似于：

function debounce(fn,ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      fn.apply(this,args);
    },ms);
  };
}

const YourMVTLayer = new MVTLayer({ ... });

function getViewportFeatures() {
  const viewportFeatures = YourMVTLayer.getRenderedFeatures();
  console.log(viewportFeatures);
}

// render
<DeckGL
 ...
 layers={[YourMVTLayer]}
 onViewportChange={debounce(getViewportFeatures,500)}
/>

Here 另一个使用脚本 API 的示例