坐标系

Cesium常用坐标系:WGS84地理坐标系、笛卡尔空间坐标系

一、WGS84地理坐标系

1、WGS84经纬度坐标系

  • 1.1、以地球质心为原点,其经纬度范围分别为[-180,180]和[-90,90]
  • 1.2、这个坐标系的定义:longitude,经度(默认是东经);latitude(默认是北纬),纬度;height,高度(默认在地表面为0)

2、WGS84弧度坐标系(Cartographic):

二、笛卡尔空间坐标系(世界坐标系)

1、平面坐标系(Cartesian2)

2、空间直角坐标系(Cartesian3)

  • 2.1、笛卡尔空间坐标的原点就是椭球的中心,在计算机上进行绘图时,是将经纬度转换成笛卡尔坐标来进行绘图,我们在Cesium中使用的3D笛卡尔坐标类为Cartesian3,传递x,y,z进行初始化
  • 2.2、这个坐标系的定义,x,横轴(默认指向东经0度,北纬0度);y,纵轴(默认指向东经90度,北纬0度);z,竖轴(默认指向东经0度,北纬90度)

3、4D笛卡尔坐标系(Cartesian4)

三、坐标系转换

1、经纬度和弧度转换

var radians=Cesium.Math.toRadians(degrees); // 经纬度转弧度
var degrees=Cesium.Math.toDegrees(radians); // 弧度转经纬度

2、WGS84经纬度坐标和弧度坐标的转换

// 方法一:
var longitude = Cesium.Math.toRadians(longitude1); // 其中 longitude1为角度

var latitude= Cesium.Math.toRadians(latitude1); // 其中 latitude1为角度

var cartographic = new Cesium.Cartographic(longitude, latitude, height);

// 方法二:
var cartographic= Cesium.Cartographic.fromDegrees(longitude, latitude, height); // 其中,longitude和latitude为角度

// 方法三:
var cartographic= Cesium.Cartographic.fromRadians(longitude, latitude, height); // 其中,longitude和latitude为弧度

3、WGS84坐标系和笛卡尔空间坐标系的转换

  • 3.1、WGS84坐标系转笛卡尔坐标系(通过经纬度或弧度进行转换)
var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);// 其中,高度默认值为0,可以不用填写;longitude和latitude为角度

var positions = Cesium.Cartesian3.fromDegreesArray(coordinates); // 其中,coordinates格式为不带高度的数组。例如:[-115.0, 37.0, -107.0, 33.0]

var positions = Cesium.Cartesian3.fromDegreesArrayHeights(coordinates); // coordinates格式为带有高度的数组。例如:[-115.0, 37.0, 100000.0, -107.0, 33.0, 150000.0]

// 同理,通过弧度转换,用法相同,具体有Cesium.Cartesian3.fromRadians,Cesium.Cartesian3.fromRadiansArray,Cesium.Cartesian3.fromRadiansArrayHeights等方法
  • 3.2、WGS84坐标系转笛卡尔坐标系(通过过度进行转换)
var position = Cesium.Cartographic.fromDegrees(longitude, latitude, height);
var positions = Cesium.Ellipsoid.WGS84.cartographicToCartesian(position);
var positions = Cesium.Ellipsoid.WGS84.cartographicArrayToCartesianArray([position1,position2,position3]);

4、笛卡尔空间直角坐标系转换为WGS84

  • 4.1、直接转换
var cartographic= Cesium.Cartographic.fromCartesian(cartesian3);
  • 4.2、间接转换(转换得到WGS84弧度坐标系后再使用经纬度和弧度的转换)
var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian3);
var cartographics = Cesium.Ellipsoid.WGS84.cartesianArrayToCartographicArray([cartesian1,cartesian2,cartesian3]);

5、笛卡尔平面坐标系和空间坐标系的转换

  • 5.1、平面坐标系转笛卡尔空间直角坐标系

    • 这里注意的是当前的点(Cartesian2)必须在三维球上,否则返回的是undefined;通过ScreenSpaceEventHandler回调会取到的坐标都是Cartesian2。

    • 屏幕坐标转场景坐标-获取倾斜摄影或模型点击处的坐标

    • 这里的场景坐标是包含了地形、倾斜摄影表面、模型的坐标。

    • 通过viewer.scene.pickPosition(movement.position)获取,根据窗口坐标,从场景的深度缓冲区中拾取相应的位置,返回笛卡尔坐标。

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
     var position = viewer.scene.pickPosition(movement.position);
     console.log(position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  • 注:若屏幕坐标处没有倾斜摄影表面、模型时,获取的笛卡尔坐标不准,此时要开启地形深度检测(viewer.scene.globe.depthTestAgainstTerrain = true; //默认为false)。

  • 屏幕坐标转地表坐标-获取加载地形后对应的经纬度和高程

  • 这里是地球表面的世界坐标,包含地形,不包括模型、倾斜摄影表面。

  • 通过viewer.scene.globe.pick(ray, scene)获取,其中ray=viewer.camera.getPickRay(movement.position)。

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
     var ray = viewer.camera.getPickRay(movement.position);
     var position = viewer.scene.globe.pick(ray, viewer.scene);
     console.log(position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  • 注:通过测试,此处得到的坐标通过转换成wgs84后,height的为该点的地形高程值。

  • 屏幕坐标转椭球面坐标-获取鼠标点的对应椭球面位置

  • 这里的椭球面坐标是参考椭球的WGS84坐标(Ellipsoid.WGS84),不包含地形、模型、倾斜摄影表面。

  • 通过 viewer.scene.camera.pickEllipsoid(movement.position, ellipsoid)获取,可以获取当前点击视线与椭球面相交处的坐标,其中ellipsoid是当前地球使用的椭球对象:viewer.scene.globe.ellipsoid,默认为Ellipsoid.WGS84。

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
     var position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
     console.log(position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  • 5.2、笛卡尔空间坐标系转平面坐标系
var cartesian2= Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,cartesian3)

6、空间位置变换(平移、旋转、缩放)

  • 经纬度转换到笛卡尔坐标系后就能运用计算机图形学中的仿射变换知识进行空间位置变换如平移旋转缩放。

  • Cesium为我们提供了很有用的变换工具类:Cesium.Cartesian3(相当于Point3D)Cesium.Matrix3(3x3矩阵,用于描述旋转变换)Cesium.Matrix4(4x4矩阵,用于描述旋转加平移变换),Cesium.Quaternion(四元数,用于描述围绕某个向量旋转一定角度的变换)。

  • 下面举个例子:

  • 一个局部坐标为p1(x,y,z)的点,将它的局部坐标原点放置到loc(lng,lat,alt)上,局部坐标的z轴垂直于地表,局部坐标的y轴指向正北,并围绕这个z轴旋转d度,求此时p1(x,y,z)变换成全局坐标笛卡尔坐p2(x1,y1,z1)是多少?
var rotate = Cesium.Math.toRadians(d);//转成弧度
var quat = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, rotate); //quat为围绕这个z轴旋转d度的四元数
var rot_mat3 = Cesium.Matrix3.fromQuaternion(quat);//rot_mat3为根据四元数求得的旋转矩阵
var v = new Cesium.Cartesian3(x, y, z);//p1的局部坐标
var m = Cesium.Matrix4.fromRotationTranslation(rot_mat3, Cesium.Cartesian3.ZERO);//m为旋转加平移的4x4变换矩阵,这里平移为(0,0,0),故填个Cesium.Cartesian3.ZERO
m = Cesium.Matrix4.multiplyByTranslation(m, v);//m = m X v
var cart3 = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(lng, lat, alt)); //得到局部坐标原点的全局坐标
var m1 = Cesium.Transforms.eastNorthUpToFixedFrame(cart3);//m1为局部坐标的z轴垂直于地表,局部坐标的y轴指向正北的4x4变换矩阵
m = Cesium.Matrix4.multiplyTransformation(m, m1);//m = m X m1
var p2 = Cesium.Matrix4.getTranslation(m);//根据最终变换矩阵m得到p2
console.log('x=' + p2.x + ',y=' + p2.y + ',z=' + p2.z );
jS学习
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。