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

IT技术 javascript reactjs mapbox-gl-js deck.gl react-map-gl
2021-04-28 08:01:23

我有一个使用 React、Mapbox 和 Deck.gl 堆栈的项目。我正在尝试查询样式地图上的getRenderedFeatures功能，但在实现 Deck.gl 的功能时遇到了问题，即使查看了文档。

我当前的 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关于该功能的更好文档的工作实现或链接？

1个回答

你用MVTLayer对了吗？

getRenderedFeatures是一个方法的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)}
/>

这是使用脚本 API 的另一个示例

其它你可能感兴趣的问题
上一篇带有 forwardRef typescript的 JSX 点符号 下一篇react中的 useEffect 清理功能