当前位置：首页 > news >正文

Cesium 快速入门（五）坐标系

news 2025/8/1 17:47:13

Cesium 快速入门（五）坐标系

看过的知识不等于学会。唯有用心总结、系统记录，并通过温故知新反复实践，才能真正掌握一二
作为一名摸爬滚打三年的前端开发，开源社区给了我饭碗，我也将所学的知识体系回馈给大家，助你少走弯路！
OpenLayers、Leaflet 快速入门，每周保持更新 2 个案例
Cesium 快速入门，每周保持更新 4 个案例

Cesium 快速入门（一）快速搭建项目
Cesium 快速入门（二）底图更换
Cesium 快速入门（三）Viewer：三维场景的“外壳”
Cesium 快速入门（四）相机控制完全指南
Cesium 快速入门（五）坐标系
Cesium 快速入门（六）实体类型介绍
Cesium 快速入门（七）材质详解
Cesium 快速入门（八）Primitive（图元）系统深度解析
Cesium 快速入门（九）Appearance（外观）系统深度解析
Cesium 快速入门（十） JulianDate（儒略日期）详解
Cesium 快速入门（十一）3D Tiles 大规模三维地理空间数据
Cesium 快速入门（十二）数据加载详解
Cesium 快速入门（十三）事件系统

坐标系

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

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

Cartesian3 → WGS84

// 笛卡尔坐标转弧度坐标
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 类，用于进行弧度和角度之间的转换。

// 经度转弧度
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 ↔ 屏幕坐标

// 笛卡尔坐标转屏幕坐标
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 墨卡托投影

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)}°`);

计算两点间距离

// 故宫坐标（东经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)} 米`);

设置面坐标

// 设置笛卡尔坐标
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, // 第二个点的经度,纬度,高度
]);