不懂这些GIS基础，开发Cesium寸步难行！

大家好，我是日拱一卒的攻城师不浪，专注可视化、数字孪生、前端提效、nodejs、AI学习、GIS等学习沉淀，这是2024年输出的第30/100篇文章。

前言

想学Cesium开发，你如果对一些GIS基础，特别是坐标系概念不了解的话，会让你非常难受，今天我们就来聊聊WebGiser开发过程中常用到的一些坐标系概念。

GIS坐标系

要熟悉Cesium中常用到的一些坐标类型以及它们之间是如何进行转换的，到了真正用到的时候可以再返回来细看，加深理解。

经纬度坐标（球面坐标）

经纬度坐标通常被称为地理坐标或地球坐标，它是一种基于地球表面的坐标系统，用于确定地球上任何点的位置。这种坐标系统使用两个主要的数值来表示位置：经度和纬度。

经纬度坐标也常常被称为：

• 
  
• 球面坐标（Spherical Coordinates）：因为地球近似为一个球体，经纬度坐标可以看作是在球面上确定点的位置。
  
• 大地坐标（Geodetic Coordinates）：在大地测量学中，这种坐标系统用于描述地球表面的点。
  
• WGS84坐标：WGS84（World Geodetic System 1984）是一种广泛使用的全球地理坐标系统，它提供了一个标准化的参考框架，用于地理定位。
  

经纬度坐标广泛应用于地图制作、导航、地理信息系统（GIS）、航空和海洋导航等领域。在数字地图服务和应用程序中，经纬度坐标是最常见的位置表示方式之一。

地理坐标（弧度）

在地理信息系统（GIS）中，地理坐标通常指的是地球上某个点的位置，使用经纬度来表示。然而，由于地球是一个近似的椭球体，使用弧度而非角度来表示经纬度坐标可以避免在计算中引入的某些复杂性，尤其是在进行距离和面积的测量时。

弧度是一种角度的度量单位，它基于圆的周长和半径之间的关系。一个完整的圆周被定义为 2π弧度。弧度与角度的转换关系如下：

在GIS中，使用弧度的地理坐标可以简化一些数学运算，尤其是涉及到三角函数和地球曲率的计算。例如，计算两点之间的大圆距离（即地球表面的最短路径）时，使用弧度可以更直接地应用球面三角学公式。

地理坐标（弧度）的应用

屏幕坐标系

屏幕坐标系（Screen Coordinate System）是一种二维坐标系统，它用于描述屏幕上的点或区域的位置。屏幕坐标系通常以屏幕的左上角为原点，水平向右为 x 轴正方向，垂直向下为 y 轴正方向。

屏幕坐标系在Cesium中叫做二维笛卡尔平面坐标。

new Cesium.Cartesian2(x, y)

屏幕坐标系的特点：

空间直角坐标系

在地理信息系统（GIS）中，空间直角坐标系（Spatial Cartesian Coordinate System）是一种三维坐标系统，用于在三维空间中精确地表示点、线、面的位置。这种坐标系通常由三个正交的坐标轴组成：X、Y 和 Z 轴。

空间直角坐标系的特点：

Cesium中的坐标系

Cesium中支持两种坐标系：3D笛卡尔坐标系和经纬度坐标系；

3D笛卡尔坐标系

先来了解下笛卡尔空间直角坐标系，它的X、Y、Z三个轴的正方向如下图所示：

坐标系的原点位于地球的中心。因此，这些坐标通常是负的。单位通常是米。

Cesium.Cartesian3(x, y, z)

地理坐标系

是一种基于经度和纬度的坐标系，它使用度数来表示位置。

在Cesium中，地理坐标可以通过将经度、纬度和高度值传递给Cartographic对象来表示。

其中经度和纬度是以度数表示的，高度值可以是以米或其他单位表示的。

Cesium将地理坐标转换为笛卡尔坐标以在地球表面上进行可视化。

坐标系转换

Cesium提供了很多坐标系互相转换的大类。

经纬度转空间直角

const cartesian3 = Cesium.Cartesian3.fromDegrees(lng, lat, height);

经纬度转地理坐标（弧度）

const radians = Cesium.Math.toRadians(degrees) 

地理坐标（弧度）转经纬度

const degrees = Cesium.Math.toDegrees(radians) 

空间直角转经纬度

// 先将3D笛卡尔坐标转为地理坐标（弧度） 
const cartographic = Cesium.Cartographic.fromCartesian(cartesian3); 
// 再将地理坐标（弧度）转为经纬度
const lat = Cesium.Math.toDegrees(cartographic.latitude);
const lng = Cesium.Math.toDegrees(cartographic.longitude); 
const height = cartographic.height; 

屏幕坐标转经纬度

// 监听点击事件，拾取坐标
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  handler.setInputAction((e) => {
const clickPosition = viewer.scene.camera.pickEllipsoid(e.position);
const randiansPos = Cesium.Cartographic.fromCartesian(clickPosition);
console.log(
"经度：" +
Cesium.Math.toDegrees(randiansPos.longitude) +
", 纬度：" +
Cesium.Math.toDegrees(randiansPos.latitude)

    );

  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

屏幕坐标转空间直角坐标

var cartesian3 = viewer.scene.globe.pick(viewer.camera.getPickRay(windowPostion),    viewer.scene); 

世界坐标转屏幕坐标

windowPostion = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian3); 

结语

作者的Cesium系列课程**《Cesium从入门到实战》**即将完结，课程介绍：ww7rybwvygd.feishu.cn/docx/PG1TdA…

如果想自学Cesium的也可以参考我的【开源项目】：github.com/tingyuxuan2…

有需要进技术产品开发交流群(可视化&GIS)可以加我：brown_7778（备注来意），也欢迎数字孪生可视化领域的交流合作。

最后，如果觉得文章对你有帮助，也希望可以一键三连👏👏👏，支持我持续开源和分享~