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 或 link 的有效实现来更好地记录函数？

Answer 1

你用的 MVTLayer 对吗？

getRenderedFeatures is a method of MVTLayer class，你需要从这里访问它，而不是从甲板实例。

逻辑可以是：

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