Mapbox-GL中经纬度几何坐标转屏幕坐标(x,y)方法咨询

嘿，这个问题其实Mapbox GL JS本身就自带完美解决方案，完全不用额外找第三方库！我来给你拆解不同几何类型的转换方法：

对于单个[lng, lat]格式的点，直接用Mapbox GL提供的map.project()方法就能搞定：

// 确保在地图加载完成后执行
map.on('load', () => {
  const lngLat = [116.3972, 39.9075]; // 示例：北京天安门经纬度
  const screenPoint = map.project(lngLat);
  console.log('屏幕坐标：', screenPoint.x, screenPoint.y);
});

这个方法会返回一个包含x和y属性的对象，对应浏览器窗口内的像素坐标。

线是由多个经纬度点组成的数组，只需要遍历每个点调用map.project()即可：

map.on('load', () => {
  const lineLngLats = [
    [116.3972, 39.9075],
    [116.4072, 39.9175],
    [116.4172, 39.9075]
  ];
  // 转换为屏幕坐标数组
  const screenLine = lineLngLats.map(lngLat => map.project(lngLat));
  // screenLine中的每个元素都是{x: number, y: number}
});

面的结构是嵌套数组（外层是环，内层是点），多面则是面的数组，只需要嵌套遍历转换：

map.on('load', () => {
  // 单个面（Polygon）：外层是环数组，每个环是点数组
  const polygonLngLats = [
    [
      [116.3972, 39.9075],
      [116.4072, 39.9075],
      [116.4072, 39.9175],
      [116.3972, 39.9175],
      [116.3972, 39.9075] // 闭合点
    ]
  ];
  const screenPolygon = polygonLngLats.map(ring => ring.map(lngLat => map.project(lngLat)));

  // 多面（MultiPolygon）：外层是面数组
  const multiPolygonLngLats = [
    [/* 第一个面的环数组 */],
    [/* 第二个面的环数组 */]
  ];
  const screenMultiPolygon = multiPolygonLngLats.map(polygon => 
    polygon.map(ring => ring.map(lngLat => map.project(lngLat)))
  );
});

• 必须在地图加载完成后调用：map.project()依赖当前地图的视图状态（缩放级别、中心点、旋转角度等），如果地图还没初始化完成，调用会返回无效值或报错。
• 动态视图更新需重新计算：如果用户缩放、平移地图，同一个经纬度对应的屏幕坐标会变化，你可以在moveend事件里重新计算：

map.on('moveend', () => {
  // 重新转换所有需要的几何图形
});

完全不需要额外的JavaScript库！Mapbox GL JS的project()方法已经封装了和当前地图视图绑定的投影逻辑，比第三方库更精准——毕竟第三方库无法实时获取你当前的地图状态参数。

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