cesium初识坐标系

cesium# 系列文章目录
在了解坐标之前，我们先画两条线，赤道和本初子午线。

Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4ZDY4YzllMy0xNjdjLTQ5NjYtOTA5MS1jNGQzZDliZWY2YzciLCJpZCI6MjE4NTcyLCJpYXQiOjE3MTY5NTEyNjV9.mHlGpeGDQFqqCcdETdvvefvOOXACQQMwlK8CrVgWcEg";
  var viewer = new Cesium.Viewer("cesiumContainer", {
  });
  //绘制赤道
  viewer.entities.add({
    name: '123',
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        0,
        0,
        90,
        0,
        180,
        0,
        270,
        0,
        360,
        0
      ]),
      width: 2,
      arcType: Cesium.ArcType.RHUMB, //多边形边缘必须遵循的线型
      material: Cesium.Color.RED,
    },
  });
  //绘制本初子午线
  viewer.entities.add({
    name: '456',
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        0,
        90,
        0,
        0,
        0,
        -90,
      ]),
      width: 2,
      arcType: Cesium.ArcType.RHUMB,
      material: Cesium.Color.YELLOW,
    },
  });

结果如下：
红色线条为赤道，黄色线条为本初子午线，也叫0度经线

然后就可以开始我们今天的主题了。
cesium中的坐标系有5种：

• WGS84经纬度坐标系 (没有实际的对象)

• WGS84弧度坐标系 (Carttographic)

  Cesium.Cartographic.fromDegrees(lon经度,lat纬度, h)
  

• 笛卡尔空间直角坐标系 (Cartesian3)

  //3D笛卡尔点
  const position = new Cesium.Cartesian3(6378137, 0, 0) //(x分量，y分量，x分量)
  

• 平面坐标系 (Cartesian2)

• 4D笛卡尔坐标系（Cartesian4）

笛卡尔空间直角坐标系 (Cartesian3) 即为世界坐标系

也称做右手坐标系，以球中心为圆点的空间直角坐标系，在cesium中用Cartesian3 3D笛卡尔坐标系表示。

• 指向赤道与本初子午线交点为X
• 指向北极的为Z轴
• 指向赤道90度的为Y轴

用法：
new Cesium.Cartesian3(x, y, z)
如下图参考：
我们先用笛卡尔点绘制几个特殊的点来看对比下效果：

1. 本初子午线与赤道交点上的球

   const position = new Cesium.Cartesian3(6378137, 0, 0)
   viewer.entities.add({
       position: position,
       ellipsoid: {
         radii: new Cesium.Cartesian3(600000.0, 600000.0, 600000.0),
         fill: true,
         material: Cesium.Color.GREEN,
       }
   })
   

效果如下：

2. 北极点

const position = new Cesium.Cartesian3(0, 0, 6356752)

从上面的两个例子看到有两个特殊的值6378137和6356752，这两值怎么来的呢？
其实我们平常用的时候很少这么直接使用分量去设置一个位置，一般都会用经纬度去表示，比如第一个例子的交点，用经纬度表示就是(0, 0, 0)，在cesium的换算下会自动转成世界坐标系。
用经纬度在cesium中使用就是：

const position1 = Cesium.Cartesian3.fromDegrees(0, 0, 0)
viewer.entities.add({
  position: position1,
  ellipsoid: {
    radii: new Cesium.Cartesian3(600000.0, 600000.0, 600000.0),
    fill: true,
    material: Cesium.Color.GREEN,
  }
})

也就是Cesium.Cartesian3.fromDegrees(0, 0, 0)和new Cesium.Cartesian3(6378137, 0, 0)表示的时同一个点！
直接使用Cartesian3一定要new！
fromDegrees这个方法会将经纬度坐标转换成世界坐标，也就是笛卡尔坐标，这里涉及到了坐标转换，下篇文章会讲到。
言归正传，我们可以从控制台打印下position1，就能看到这样一个结果：

就能拿到上面两个例子里面的特殊的值了！这就是笛卡尔坐标系。

WGS84经纬度坐标系

上面两个例子其实已经用到了，(0,0,0)表示的就是经纬度坐标系，(经度， 纬度， 高度)，经度，纬度的单位都是角度，其中高度的单价是米。
要记住的是在cesium中，没有实际的对象来描述WGS84经纬度坐标系的，都是通过弧度的方式来进行运用。
弧度和角度的转换公式：

• 角度转换为弧度：弧度=角度×(π÷180)。
• 弧度转换为角度：角度=弧度×(180÷π)。

WGS84弧度坐标系 (Cartographic)

用法：new Cesium.Cartographic(经度, 纬度, 高度)，单位分别是：(弧度，弧度，米)
new Cesium.Cartographic(0, 1.5707963267948966, 0)这个点表示的就是北极点。
里面的数值怎么算的呢？可以根据上面的公式90度所对应弧度为1.5707963267948966,，当然cesium也提供 了更为方便的转换方法：

• 经纬度转弧度：

  Cesium.Math.toRadians(90)
  

• 弧度转经纬度：

  Cesium.Math.toDegrees(1.5707963267948966)
  

这样表示北极点就有了三种方法：

1. 笛卡尔坐标：new Cesium.Cartesian3(0, 0, 6356752)
2. 经纬度坐标：Cesium.Cartesian3.fromDegrees(0, 90, 0)
3. 弧度坐标：new Cesium.Cartographic(0, 1.5707963267948966, 0)

这样比对下来，也能发现经纬度坐标系是最简单表示一个位置的坐标系了。
Cartographic可以通过Cesium.Cartographic.toCartesian(position)将一个弧度坐标转为笛卡尔坐标。

平面坐标系

用过canvas的都应该清楚，在canvas中，坐标原点是在屏幕左上角，往右x递增，往下y递增。

4D笛卡尔坐标系（Cartesian4）

还没研究，这里先不介绍了。

关于cesium中坐标系简单的知识就到这里了，欢迎讨论。

学习视频