Cesium Vue（三）— 相机配置

1. 坐标系转换

1.1 cesium使用到的坐标系

屏幕坐标系，二维的笛卡尔坐标系，API => Cartesian2
地理空间坐标系，WGS-84坐标系， API => Cartographic(经度，维度，高度)
三维笛卡尔空间直角坐标系，API => Cartesian3

1.2 坐标转换具体实现

角度与弧度的转换

var radians=Cesium.Math.toRadians(90);
console.log("radians ==> "+radians);

弧度转角度

var degrees=Cesium.Math.toDegrees(2*Math.PI);
console.log("degrees ==> "+degrees);

将经纬度转成笛卡尔坐标系

var cartesian3=Cesium.Cartesian3.fromDegrees(89.5,//经度20.4,//纬度100//高度
);
console.log("cartesian3 ==> "+cartesian3);

将笛卡尔坐标系转换为经纬度

var cartographic=Cesium.Cartographic.fromCartesian(cartesian3);
console.log("cartographic ==> "+cartographic);
//得到结果弧度，转成角度
var longitude=Cesium.Math.toDegrees(cartographic.longitude);
var latitude=Cesium.Math.toDegrees(cartographic.latitude);
console.log("LonLat ==> "+longitude+","+latitude);

在这里插入图片描述

2. 设置相机的位置和视角

设置相机位置和视角

 // 设置相机视角瞬间到达指定位置，角度// （116.393428, 39.90923）生成position是天安门的位置var position = Cesium.Cartesian3.fromDegrees(116.393428, 39.90923, 100);viewer.camera.setView({// 指定相机位置destination: position,// 指定相机视角orientation: {// 指定相机的朝向,偏航角，相当于 X 角heading: Cesium.Math.toRadians(0),// 指定相机的俯仰角,0度是竖直向上,-90度是向下  相当于 y 角pitch: Cesium.Math.toRadians(-20),// 指定相机的滚转角,翻滚角   相当于 z 角roll: 0,},});

在这里插入图片描述

设置带相机动画的位置和视角

// flyto,让相机飞往某个地方
viewer.camera.flyTo({destination: position,orientation: {heading: Cesium.Math.toRadians(0),pitch: Cesium.Math.toRadians(-20),roll: 0,},
});

3. 使用键盘控制相机的位置和视角

// 通过按键移动相机document.addEventListener("keydown", (e) => {// console.log(e);// 获取相机离地面的高度var height = viewer.camera.positionCartographic.height;var moveRate = height / 100;if (e.key == "w") {// 设置相机向前移动viewer.camera.moveForward(moveRate);} else if (e.key == "s") {// 设置相机向后移动viewer.camera.moveBackward(moveRate);} else if (e.key == "a") {// 设置相机向左移动viewer.camera.moveLeft(moveRate);} else if (e.key == "d") {// 设置相机向右移动viewer.camera.moveRight(moveRate);} else if (e.key == "q") {// 设置相机向左旋转相机viewer.camera.lookLeft(Cesium.Math.toRadians(0.1));} else if (e.key == "e") {// 设置相机向右旋转相机viewer.camera.lookRight(Cesium.Math.toRadians(0.1));} else if (e.key == "r") {// 设置相机向上旋转相机viewer.camera.lookUp(Cesium.Math.toRadians(0.1));} else if (e.key == "f") {// 设置相机向下旋转相机viewer.camera.lookDown(Cesium.Math.toRadians(0.1));} else if (e.key == "g") {// 向左逆时针翻滚viewer.camera.twistLeft(Cesium.Math.toRadians(0.1));} else if (e.key == "h") {// 向右顺时针翻滚viewer.camera.twistRight(Cesium.Math.toRadians(0.1));}});