Cesium 设置视角的两种方式

作为开源WebGIS三维可视化领域的翘楚，Cesium中可以可以添加不同的Entity实体数据，也可以添加各种各样的模型数据，那么当我们添加好数据之后，如何设置视角以便于观察呢，这里介绍两种不同的方式设置视角。一种是设置添加数据的orientation属性来设置视角，另一种是设置相机的角度来设置视角。

设置 orientation 属性

这个方法是通过数据实体的坐标position和欧拉角（heading，pitch， roll），计算出四元数，四元数是绕空间某一点旋转的参数，即可设置orientation。Cesium里面的Transforms类有headingPitchRollQuaternion(origin,headingPitchRoll) 方法。

var myEntity = null;
var position = Cesium.Cartesian3.fromDegrees(120, 39, 0);
myEntity = window.viewer.entities.add({
  position: position,
  model: {
    uri: "./data/Flamingo.glb",
    scale: 600,
    heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
  },
});
//设置 entity 的 orientation
//垂直屏幕转圈
var heading = Cesium.Math.toRadians(0);
//贴着屏幕转圈
var pitch = 0;
//原地翻转
var roll = 0;
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
//计算四元数
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
  position,
  hpr
);
myEntity.orientation = orientation;
//追踪
window.viewer.trackedEntity = myEntity;

通过此种方法即可设置实体类数据的视角。

设置相机角度

换个思路，当数据不动的时候，可以设置相机动，设置相机绕着数据旋转，这样，也可以通过不同的视角观察数据。Cesium里面的Camera中有lookAt(target, offset)方法。

其实设置相机的视角，还是通过欧拉角（heading，pitch， range），来设置相机的视角。

var center = Cesium.Cartesian3.fromDegrees(120, 39, 10000);
var heading = Cesium.Math.toRadians(0.0);
var pitch = Cesium.Math.toRadians(-60.0);
var range = 5000.0;
var i = 0;
viewer.camera.lookAt(cc, new Cesium.HeadingPitchRange(heading, pitch,range));
setInterval(() => {
  i--;
  if (i <= -30) {
    i = 0;
  }
  pitch = Cesium.Math.toRadians(-60.0 + i);
  viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));
}, 500);

通过此种方法，可以设置相机绕点旋转来设置视场，使用setInterval或者requestAnimationFrame函数循环让视角动起来。配上地形数据，大场景一下子就起来了。