Skip to content

坐标系

Cesium 中涉及多种坐标系,理解它们的定义及相互转换是开发三维地理应用的基础,以下以北京天安门坐标为例,介绍几种常见的坐标系及其转换方法。

坐标系值示例说明
WGS84 经纬度{ longitude: 116.3975°, latitude: 39.9075°, height: 50 }人类可读的地理坐标
笛卡尔坐标 (Cartesian3)Cartesian3(-2173633.5, 4387689.5, 4077985.0)地心直角坐标(单位:米)
弧度坐标 (Cartographic){ longitude: 2.0313, latitude: 0.6964, height: 50 }经纬度的弧度表示
屏幕坐标 (Cartesian2){ x: 640, y: 360 } (随窗口尺寸变化)相对于 Canvas 的像素位置
Web 墨卡托投影{ x: 12958809.1, y: 4825922.9 }平面投影坐标(EPSG:3857)

转换方法

WGS84 → Cartesian3

js
const tiananmenCartesian = Cesium.Cartesian3.fromDegrees(
  116.3975, // 经度(度)
  39.9075, // 纬度(度)
  50 // 高度(米)
);

Cartesian3 → WGS84

js
// 笛卡尔坐标转弧度坐标
const cartographic = Cesium.Cartographic.fromCartesian(tiananmenCartesian);

// 弧度转度数
const longitude = Cesium.Math.toDegrees(cartographic.longitude); // 116.3975°
const latitude = Cesium.Math.toDegrees(cartographic.latitude); // 39.9075°
const height = cartographic.height; // 50米

经纬度 ↔ 弧度

  • 弧度是一种用于测量角度的单位,它的定义是:1 弧度等于 180 度除以 π。
  • Cesium 中提供了 Math 类,用于进行弧度和角度之间的转换。
js
// 经度转弧度
const lonRad = Cesium.Math.toRadians(116.3975); // ~2.0313 弧度

// 纬度转弧度
const latRad = Cesium.Math.toRadians(39.9075); // ~0.6964 弧度

// 弧度转度数
const lonDeg = Cesium.Math.toDegrees(lonRad); // 116.3975°
const latDeg = Cesium.Math.toDegrees(latRad); // 39.9075°

Cartesian3 ↔ 屏幕坐标

js
// 笛卡尔坐标转屏幕坐标
const screenPos = Cesium.SceneTransforms.worldToWindowCoordinates(
  viewer.scene,
  tiananmenCartesian
);
console.log(`屏幕坐标: (${screenPos.x}, ${screenPos.y})`);

// 屏幕坐标转笛卡尔坐标(地形表面)
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((movement) => {
  console.log(movement.position); // 屏幕坐标
  console.log(viewer.scene.pickPosition(movement.position)); // Cartesian3
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

WGS84 ↔ Web 墨卡托投影

js
const projection = new Cesium.WebMercatorProjection();

// WGS84 转 Web 墨卡托
const cartographic = Cesium.Cartographic.fromDegrees(116.3975, 39.9075);
const projected = projection.project(cartographic);
console.log(`投影坐标: (${projected.x}, ${projected.y})`);

// Web 墨卡托转 WGS84
const unprojected = projection.unproject(
  new Cesium.Cartesian2(projected.x, projected.y)
);
console.log(`WGS84坐标: ${Cesium.Math.toDegrees(unprojected.longitude)}°, 
  ${Cesium.Math.toDegrees(unprojected.latitude)}°`);

计算两点间举例

js
// 故宫坐标(东经116.3972°, 北纬39.9163°)
const palaceCartesian = Cesium.Cartesian3.fromDegrees(116.3972, 39.9163);

// 计算直线距离(米)
const distance = Cesium.Cartesian3.distance(
  tiananmenCartesian,
  palaceCartesian
);
console.log(`直线距离: ${distance.toFixed(2)} 米`);

// 计算椭球面距离(沿地球表面)
const geodesic = new Cesium.EllipsoidGeodesic();
const carto1 = Cesium.Cartographic.fromCartesian(tiananmenCartesian);
const carto2 = Cesium.Cartographic.fromCartesian(palaceCartesian);
geodesic.setEndPoints(carto1, carto2);
console.log(`地表距离: ${geodesic.surfaceDistance.toFixed(2)} 米`);

设置面坐标

js
// 设置笛卡尔坐标
const cartesian3 = new Cesium.Cartesian3.fromDegressArray([
  116.404,
  39.915, // 第一个点的经度和纬度
  116.404,
  39.916, // 第二个点的经度和纬度
  116.405,
  39.916, // 第三个点的经度和纬度
]);
// 设置高度使用fromDegressArrayHeights
const cartesian3H = new Cesium.Cartesian3.fromDegressArrayHeights([
  116.404,
  39.915,
  1000, // 第一个点的经度,纬度,高度
  116.404,
  39.916,
  2000, // 第二个点的经度,纬度,高度
]);

更多方法可参考Cartesian3