javascript - React、Mapbox 和 Deck.gl：如何在鼠标指针下获取功能？

Question

我正在尝试从 React 和 Deck.gl 中的 Mapbox 文档中复制此示例。我getRenderedFeatures在 Deck.gl 中发现了这个函数，得到了这个问题的答案。

我的困惑源于创建一个MVTLayer我想要查询的样式。我当前的代码：

export default function Map() {
  const PopulationLayer = new MVTLayer({
    data: "mapbox://styles/mapbox/streets-v11",
    getFillColor: [192, 192, 192],
    pointRadiusMinPixels: 3,
    uniqueIdProperty: "cartodb_id",
    pickable: true,
  });

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

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

  const view = {
    latitude: 41.4,
    longitude: 2.18,
    zoom: 5,
  };

  return (
    <>
      <DeckGL
        container={"map"}
        mapStyle={"mapbox://styles/mapbox/streets-v11"}
        initialViewState={view}
        controller={true}
        layers={[PopulationLayer]}
        onViewStateChange={debounce(getViewportFeatures, 500)}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      >
        <StaticMap mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN} />
      </DeckGL>
    </>
  );
}

这行 - data: "mapbox://styles/mapbox/streets-v11"- 给我一个错误：Unhandled Rejection (Error): An error occurred fetching TileJSON: TypeError: Failed to fetch。我认为这意味着MVTLayer无法解析 Mapbox 样式。

是否可以MVTLayer与 Mapbox 样式一起使用？有没有其他方法可以实现这一目标？我最终想使用包含热图的自定义样式，该样式在悬停时显示热图值。沿着这些思路。我认为让它在标准风格上工作是一个很好的第一步。

标签： javascriptreactjsmapboxmapbox-gl-jsdeck.gl