Mapbox queryRenderedFeatures()返回空数组问题求助

我参考Mapbox官方示例实现地图点位信息获取，仅将触发时机修改为点击事件，但调用queryRenderedFeatures()始终返回空数组。以下是我的代码：

import React, { useState, useEffect, useRef } from "react";
import MAP, { MapRef } from "react-map-gl";


const MAPBOX_TOKEN = 'pk.eyJ1IjoicmlraWQiLCJhIjoiY2xuZmZtNXN0MDcwcDJybzJiNXM0cmU0aSJ9.umSCVKmjN4XB-srFrFOqFQ';

export default function MapboxMap(props: User): React.ReactElement {
  const mapRef = useRef<MapRef>(null);
  const [mapStyle, setMapStyle] = useState("mapbox://styles/mapbox/standard");

  const getMapPointInfo = (e: mapboxgl.MapMouseEvent) => {
    console.log("Info at this point", e.point);
    const features = mapRef.current?.queryRenderedFeatures(e.point);

    const displayProperties = ["type", "properties", "id", "layer", "source", "sourceLayer", "state"];

    const displayFeatures = features.map((feat) => {
      const displayFeat = {};
      displayProperties.forEach((prop) => {
        displayFeat[prop] = feat[prop];
      });
      return displayFeat;
    });

    console.log("Info at this point", features);
  };

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <MAP
        initialViewState={viewport}
        mapboxAccessToken={MAPBOX_TOKEN}
        mapStyle={mapStyle}
        ref={mapRef}
        attributionControl={false}
        projection={{ name: "globe" }}
        onClick={(e) => {
          getMapPointInfo(e);
        }}
      >
        <GeocoderControl mapboxAccessToken={MAPBOX_TOKEN} position="top-left" setInfo={setPanelInfo} />
      </MAP>
    </div>
  );
}

我不确定问题出在哪里，是否是React相关的Bug？另外我发现可能需要指定交互图层ID，但未在文档中找到该配置项的相关说明，恳请提供帮助。

解决方案 #

• 指定查询的目标图层
  Mapbox官方标准样式（mapbox://styles/mapbox/standard）的大部分图层默认不开放交互查询权限，直接调用queryRenderedFeatures会返回空数组。你需要明确指定要查询的图层ID，比如POI、道路、建筑等图层：

  const features = mapRef.current?.queryRenderedFeatures(e.point, {
    // 可根据需求调整图层ID，以下为示例
    layers: ['poi-label', 'road-label', 'building-extrusion']
  });
  

  你可以通过调用mapRef.current?.getMap().getStyle().layers打印当前样式的所有图层列表，从中筛选需要交互的图层ID。

• 处理空值避免报错
  代码中直接对features调用map方法，但mapRef.current?.queryRenderedFeatures()可能返回undefined，会导致运行时错误。建议先做空值判断：

  const features = mapRef.current?.queryRenderedFeatures(e.point, { layers: [...] });
  if (!features) return;
  // 后续处理逻辑
  

• 确保地图加载完成后再操作
  地图未完全加载时调用queryRenderedFeatures也可能返回空值，可通过监听load事件确认地图就绪：

  useEffect(() => {
    const mapInstance = mapRef.current?.getMap();
    if (mapInstance) {
      mapInstance.on('load', () => {
        console.log('地图加载完成');
        // 可在此绑定点击事件或标记加载状态
      });
    }
  }, []);
  

• 验证Map实例是否正确获取
  点击事件中打印mapRef.current，确认其不为null且正确指向Map实例。如果mapRef未初始化，需要检查组件渲染逻辑，确保MAP组件的ref属性正确绑定。

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