Mapbox GL JS：如何将屏幕(X,Y)坐标转换为LngLat？

Mapbox GL JS 提供了和project()对应的逆转换方法unproject()，直接用它就能完成屏幕像素坐标到地理坐标（LngLat）的转换。

• 核心用法示例：

  // 前提：map是已初始化的Mapbox地图实例
  const screenCoords = [x, y]; // 你的屏幕(X,Y)坐标，格式为[横向像素值, 纵向像素值]
  const lngLat = map.unproject(screenCoords);
  // 可直接访问经纬度值
  const longitude = lngLat.lng;
  const latitude = lngLat.lat;
  

• 关键注意点：

  • 必须在地图实例完成加载后调用unproject()，比如放在map.on('load', () => { ... })的回调函数内，否则会因投影参数未就绪导致转换结果错误。
  • 屏幕坐标的原点是地图容器的左上角，要确保你传入的(X,Y)是基于这个原点的坐标，而非其他坐标系的点位。

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