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

Question

我有一个使用 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>

我了解建议在 onViewportLoad 上查询 getRenderedFeatures，但我找不到可行的实现。

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

Answer 1

你用MVTLayer对吗？

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

逻辑可能是：

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 的示例