引言

项目开发过程中遇到一个需求，通过一个按钮切换视角为顶视图。
分析了一下这个模糊的需求，首先没有给出切换顶视图后俯视的区域范围，其次没有给出俯视点的高度。
这里可以粗略的认为当前的侧俯视的角度下观看的范围即为俯视的区域范围，当前摄像机的高度为俯视点的高度，以这两点为基准开始编码。

整理编码思路

1. camera设置视角需要笛卡尔坐标系坐标，以及pitch、heading、roll三值。
2. 获取视野中心点坐标需要屏幕中心像素坐标转笛卡尔坐标转经纬度坐标，此时获取到中心点x，y坐标。
3. 以当前camera高度为准，获取z坐标。
4. 将视野中心的x，y结合camera当前的z，将经纬度转为笛卡尔坐标系。
5. 设置pitch为-1.5702046740690863，heading和roll取camera 当前值。
6. 以上组成的一组数据{x,y,z,heading,pitch,roll}设置camera视角

代码编写

获取中心点坐标

// 根据屏幕中心像素的坐标获取中心点笛卡尔坐标
const center = viewer.camera.pickEllipsoid(
	new Cesium.Cartesian2(
		viewer.canvas.clientWidth / 2,
		viewer.canvas.clientHeight / 2
		)
	);
//将笛卡尔坐标转化为经纬度坐标
const cartographic = Cesium.Cartographic.fromCartesian(center);
const longitude = Cesium.Math.toDegrees(cartographic.longitude);
const latitude = Cesium.Math.toDegrees(cartographic.latitude); 

以当前camera高度作为z坐标

const cameracartographic = Cesium.Cartographic.fromCartesian(
	scene.camera.position
	);
const height = cameracartographic.height;

结合中心点坐标和camera高度，转换笛卡尔坐标系

const position = Cesium.Cartesian3.fromDegrees(
	longitude,
	latitude,
	height
	);

组合一组camera视角参数，并设置camera

// 组合视角参数
const view = {
	...position,
	heading: scene.camera.heading,
	pitch: -1.5702046740690863,
	roll: scene.camera.roll,
	};
// 执行设置视角方法
setView(view);

//封装设置camera视角函数
const setView = （viewData, duration = 1.5）=>{
	viewer.scene.camera.flyTo({
		destination: new Cesium.Cartesian3(viewData.x, viewData.y, viewData.z),
		orientation: {
			heading: viewData.heading,
			pitch: viewData.pitch,
			roll: viewData.roll,
		},
		duration: duration,
	})
}	

实现效果

需要注意的点

• 笛卡尔坐标系的xyz中z坐标不可以随意组合，（不能将中心点笛卡尔坐标系的xy和camera笛卡尔坐标系的z结合）需要进行经纬度转换后再组合，然后再反转为笛卡尔坐标系。