Cesium中经纬度转画布XY计算距离结果异常求助

核心问题 #

你用Cartographic.toCartesian得到的是地球中心为原点的三维笛卡尔坐标（单位为米），并非画布上的屏幕坐标，所以计算出的18000实际是18000米左右的球面距离，和屏幕视觉距离完全不匹配。

解决步骤 #

要得到画布上的XY坐标，需要完成两步转换：

• 第一步：经纬度转地理空间笛卡尔坐标（和你当前步骤一致）
• 第二步：将空间笛卡尔坐标投影到画布的二维屏幕坐标

代码修改示例（以Cesium为例） #

假设你使用Cesium地图库，修改后的代码如下：

// 生成左右两个经纬度点
const leftPoint = new LatLon(center.lat, center.lon).destinationPoint(semiMajorAxis, 270);
const rightPoint = new LatLon(center.lat, center.lon).destinationPoint(semiMajorAxis, 90);

// 转成Cesium的Cartographic对象
const leftCartographic = Cartographic.fromDegrees(leftPoint.lon, leftPoint.lat);
const rightCartographic = Cartographic.fromDegrees(rightPoint.lon, rightPoint.lat);

// 转成空间笛卡尔坐标
const leftCartesian = Cesium.Ellipsoid.WGS84.cartographicToCartesian(leftCartographic);
const rightCartesian = Cesium.Ellipsoid.WGS84.cartographicToCartesian(rightCartographic);

// 关键：转成画布上的屏幕坐标
const leftScreenXY = scene.cartesianToCanvasCoordinates(leftCartesian);
const rightScreenXY = scene.cartesianToCanvasCoordinates(rightCartesian);

// 计算屏幕上的距离（像素单位）
const diameter = distanceFormula(leftScreenXY.x, leftScreenXY.y, rightScreenXY.x, rightScreenXY.y);

注意事项 #

• scene是Cesium的Viewer实例下的场景对象，需确保已正确初始化
• 如果使用其他地图库（如Leaflet、Mapbox），要对应使用库提供的经纬度转屏幕坐标方法，比如Leaflet的map.latLngToContainerPoint()

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