三维技术探索-Cesium.js学习(二)
2022-02-28 本文已影响0人
何小鹏
第二章、认识Cesium.js中的坐标系
Cesium项目中经常涉及到模型加载、定位、预览都需要用到坐标系,弄明白Cesium中采用的坐标系以及各个坐标系之间的转换,是做三维GIS场景的前提。
而在Cesium中常用的坐标有两种WGS84地理坐标系和笛卡尔空间坐标系。
一、WGS84地理坐标系
1、 WGS84经纬度坐标系
就是通俗的地图地理坐标经纬度
2、 WGS84弧度坐标系(Cartographic)
在数学上被称为球坐标系。

new Cesium.Cartographic(longitude, latitude, height)
以弧度表示在球体中的坐标点位
longitude:经度
latitude:纬度
height:弧度即角度对应弧长是半径的倍数【椭球上方的高度(以米为单位)】
返回一个球坐标类型

弧度和角度的转换公式

角度转弧度 π/180×角度
弧度变角度 180/π×弧度
二、笛卡尔空间坐标系
1、平面坐标系
平面坐标系也就是平面直角坐标系,是一个二维笛卡尔坐标系
new Cesium.Cartesian2(x, y)

一般表示canvas屏幕坐标位置,平面的点位坐标

2、空间直角坐标系
笛卡尔空间坐标的原点就是椭球的中心,我们在计算机上进行绘图时,不方便使用经纬度直接进行绘图,一般会将坐标系转换为笛卡尔坐标系,使用计算机图形学中的知识进行绘图
new Cesium.Cartesian3 ( x , y , z )

三、坐标系转换
1、经纬度坐标转弧度
方法一
// 将弧度转为度的十进制度表示,保留5位小数
const lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
console.log(`经度:${lon}, 纬度:${lat}`);
// 将经纬度转成弧度
const longitude = Cesium.Math.toRadians(lon).toFixed(5);
const latitude = Cesium.Math.toRadians(lat).toFixed(5);
console.log(`经弧度:${longitude}, 纬弧度:${latitude}`);

方法二
console.log(`经度:${lon}, 纬度:${lat}`);
const cartographic1 = Cesium.Cartographic.fromDegrees(
parseFloat(lon),
parseFloat(lat),
50
);
console.log(cartographic1);
console.log(
`经弧度:${cartographic.longitude}, 纬弧度:${cartographic.latitude}`
);
const cartographic2 = Cesium.Cartographic.fromRadians(
cartographic.longitude,
cartographic.latitude,
50
);
console.log(cartographic2);

2、平面坐标系转空间坐标系
const cartesian = viewer.camera.pickEllipsoid(click.position);
console.log(cartesian);

3、 三维坐标系转成球坐标系
const cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(
cartesian
);
console.log(cartographic);
