Mapbox globe投影下queryRenderedFeatures鼠标坐标偏移问题求助

问题根源 #

在Globe投影的中间缩放级别（约6级），Mapbox mousemove事件自带的lngLat是基于球面投影的地理真实坐标，但鼠标光标的视觉位置是经过透视投影转换后的结果，两者因透视变形产生偏移。切换到Mercator投影时无此问题，是因为它属于平面投影，不存在透视转换差异。

解决方案 #

保留Globe投影的前提下，可通过以下方法修复偏移：

• 用map.unproject()替代事件自带的lngLat
  直接从鼠标的屏幕像素坐标反推经纬度，结果完全匹配视觉上的光标位置。示例代码：

  map.on('mousemove', (e) => {
    // 用unproject获取精准视觉坐标，替代e.lngLat
    const preciseLngLat = map.unproject(e.point);
    // 后续用preciseLngLat做查询或标记
    const features = map.queryRenderedFeatures(e.point, { layers: ['your-point-layer'] });
    // ...其他逻辑
  });
  

• 优先用屏幕坐标范围查询要素
  调用queryRenderedFeatures时，直接传入鼠标位置的小范围屏幕bbox，比经纬度查询更贴合视觉选中逻辑：

  const bbox = [
    [e.point.x - 2, e.point.y - 2],
    [e.point.x + 2, e.point.y + 2]
  ];
  const hoveredFeatures = map.queryRenderedFeatures(bbox, { layers: ['your-point-layer'] });
  

• 可选：缩放级别适配
  仅在缩放级别5-7左右使用上述方法，其他缩放级别（完全平面或完全球面）可继续用e.lngLat，减少不必要的计算：

  map.on('mousemove', (e) => {
    const targetLngLat = (map.getZoom() > 5 && map.getZoom() < 7) 
      ? map.unproject(e.point) 
      : e.lngLat;
    // ...后续逻辑
  });
  

效果验证 #

替换后，红绿标记会精准跟随鼠标光标，悬停弹窗能准确触发在红点上方，解决选中困难的问题。

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