Cesium.js（6）：Cesium相机系统

Camera表示观察场景的视角。通过操作摄像机，可以控制视图的位置、方向和角度。

帮助文档：Camera - Cesium Documentation

1 setView

setView 方法允许你指定相机的目标位置和姿态。你可以通过 Cartesian3 对象来指定目标位置，并通过 orientation 对象来设置相机的航向、俯仰和翻滚角。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相机</title><script src="../../libs/Cesium/Cesium.js"></script><link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body {margin: 0px;padding: 0px;}</style>
</head>
<body><div id="puiedu-cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你的key';const viewer = new Cesium.Viewer('puiedu-cesiumContainer');const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,400);viewer.camera.setView({destination:position,orientation:{heading:Cesium.Math.toRadians(0),pitch:Cesium.Math.toRadians(-90),roll:0}})</script>
</body>
</html>

destination：接受两种类型，一个是Cartesian3，我们这里用鼠标点击获取到经纬度之后，转换成笛卡尔坐标系传递。另一个类型是Rectangle，这个我们在下边讲解。

orientation（欧拉角）：调整相机视角方向的；它有3个参数：heading、pitch、roll

heading 值为 0 时，指向正北方，随着数值变大，顺时针旋转（模型左右摆动），航向角，代表飞机的航向。
pitch 值为 0 时，相机前后保持水平，改变数值（模型上下摆动），负值时俯视，负得越大，越向下俯视，正值时仰视，正得越大，越向上仰视，这就是为什么用-180°-180°的角度范围，而不是0°-360°，很方便记忆和理解，俯仰角，俯（向下）为负，仰（向上）为正。
roll 值为 0 时，相机左右保持水平，改变数值（模型左右摆动），roll和pitch的表现类似，只是将前后变成了左右，左为负，右为正，用-180°-180°也很方便记忆和理解。

duration：飞行时间，单位秒；

您可以修改控件上的值，然后看每个值被修改后，相机是如何变化的，您会得出以下结论。

效果如下：

2 flyTo

flyTo 方法会让相机以动画的方式飞到指定的位置，你可以设置飞行时间和其他动画参数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相机</title><script src="../../libs/Cesium/Cesium.js"></script><link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body {margin: 0px;padding: 0px;}</style>
</head>
<body><div id="puiedu-cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你的key';const viewer = new Cesium.Viewer('puiedu-cesiumContainer');const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,400);viewer.camera.flyTo({destination:position,orientation: {heading: Cesium.Math.toRadians(0),pitch: Cesium.Math.toRadians(-90),roll: 0},duration:5,})</script>
</body>
</html>

这里的参数和setView中的一致，这里就不讲解了。

效果如下：

启动后，会发现相机通过飞行的方式到底制定位置。

3 lookAt

lookAt 方法允许相机以某个位置为中心来确定位置和姿态。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相机</title><script src="../../libs/Cesium/Cesium.js"></script><link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body {margin: 0px;padding: 0px;}</style>
</head>
<body><div id="puiedu-cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你的key';const viewer = new Cesium.Viewer('puiedu-cesiumContainer');const center = Cesium.Cartesian3.fromDegrees(116.39,39.91);const heading = Cesium.Math.toRadians(50);const pitch = Cesium.Math.toRadians(-90);const range = 2500;viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading,pitch,range));</script>
</body>
</html>

效果如下：

4 viewBoundingSphere

它的视角切换效果也是和setView方法一样，没有飞行过渡效果，直接切换视口到指定目的地。优点是可以指定玩目标点后，可以从多个角度更好的观测。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相机</title><script src="../../libs/Cesium/Cesium.js"></script><link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body {margin: 0px;padding: 0px;}</style>
</head>
<body><div id="puiedu-cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你的key';const viewer = new Cesium.Viewer('puiedu-cesiumContainer');const position = Cesium.Cartesian3.fromDegrees(116.39,39.91,1500);var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(-90,0,0));var entity = viewer.entities.add({position:position,orientation:orientation,model:{uri:"../../libs/models/Cesium_Air.glb",minimumPixelSize:100,maximumScale:10000,show:true}});viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(position,20),new Cesium.HeadingPitchRange(0,0,0));</script>
</body>
</html>

效果如下：