React+Mapbox+Deck.gl获取鼠标下要素及MVTLayer加载样式问题求解

核心结论 #

不能直接给MVTLayer传入Mapbox样式地址。

报错原因 #

MVTLayer的data参数要求传入矢量瓦片数据源（TileJSON地址或瓦片模板地址），而你传入的mapbox://styles/mapbox/streets-v11是Mapbox样式资源地址，不属于瓦片数据源，因此MVTLayer无法解析获取瓦片数据，触发TileJSON获取失败的报错。

实现方案 #

方案1：直接使用Mapbox原生queryRenderedFeatures（更适配你的需求） #

你已经引入了Mapbox的StaticMap组件，直接调用Mapbox原生API即可实现需求，不需要额外加MVTLayer：

1. 用useRef存储Mapbox实例：

import { useRef, useMemo } from 'react';

export default function Map() {
  const mapRef = useRef(null);
  // 防抖逻辑你原有代码保留即可
  function getViewportFeatures() {
    if (!mapRef.current) return;
    // 可传入图层ID数组过滤你需要查询的图层，比如自定义的热力图、分区域填色图层
    const viewportFeatures = mapRef.current.queryRenderedFeatures(undefined, {
      layers: ['your-custom-heatmap-layer-id', 'your-fill-layer-id']
    });
    console.log(viewportFeatures);
  }

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

  // 原有视图配置、渲染逻辑调整，给StaticMap加onLoad回调存实例
  return (
    <>
      <DeckGL
        container={"map"}
        mapStyle={"mapbox://styles/mapbox/streets-v11"} // 你的自定义样式直接填在这里即可
        initialViewState={view}
        controller={true}
        onViewStateChange={debounce(getViewportFeatures, 500)}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      >
        <StaticMap 
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
          onLoad={(e) => mapRef.current = e.target}
        />
      </DeckGL>
    </>
  );
}

这种方案完美适配你用自定义Mapbox样式（包含热力图）的需求，不需要额外处理数据源，样式里的所有图层都可以直接查询。如果要实现hover展示数值，给DeckGL加onHover回调，拿到鼠标像素坐标传给queryRenderedFeatures的第一个参数，就能获取当前hover位置的要素属性。

方案2：正确使用MVTLayer加载矢量瓦片 #

如果你一定要用DeckGL的getRenderedFeatures方法，需要给MVTLayer传入正确的矢量瓦片源地址，以Mapbox公共矢量瓦片源为例：

const PopulationLayer = useMemo(() => new MVTLayer({
  data: "mapbox://mapbox.mapbox-streets-v8", // 矢量瓦片源地址，不是样式地址
  sourceLayer: 'admin', // 指定你要加载的瓦片内的子图层，根据你的需求调整
  getFillColor: [192, 192, 192],
  pointRadiusMinPixels: 3,
  uniqueIdProperty: "cartodb_id",
  pickable: true,
}), []);

注意：如果是你自定义的样式用了自己上传的矢量数据源，要换成你自己的数据源地址。

额外优化提示 #

你当前的代码直接在组件函数体内声明MVTLayer实例，每次组件重渲染都会生成新的实例触发不必要的图层重绘，建议用useMemo包裹Layer实例，依赖项留空即可。

内容的提问来源于stack exchange，提问作者mmz