Cesium专栏-绕点飞行

关于绕点飞行

绕点飞行是三维场景中一种非常普通的动画效果，当场景中有某种业务逻辑，聚焦到了某一个中心点（地物或者建筑）时，需要围绕其中心点进行旋转浏览，在一些电影中，也会有这样的场景，无人机在高空，盘旋飞行，360度无死角的飞行展示。

效果图

Cesium中的绕点飞行

在cesium中，做绕点飞行的效果还是比较简单的，主要核心就是设置一个中心点，然后不停的改变相机的朝向即可。

1、创建/选择一个中心点（我们创建一个点来模拟）

var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(114, 30),
    point: {
        color: Cesium.Color.RED,
        pixelSize: 10
    }
});

2、聚焦该中心点，使用viewer的zoomTo方法

viewer.zoomTo(entity);

3、模拟绕点飞行

重点在于处理zoomTo方法的offset参数

var heading = 0; // 朝向
var offset = new Cesium.HeadingPitchRange(Cesium.Math.toRadians(heading), -Cesium.Math.toRadians(30), 1000);
viewer.zoomTo(entity, offset)

HeadingPitchRange用于改变相机的姿态，HeadingPitchRange跟HeadingPitchRoll的使用方式差不多，不同的是，HeadingPitchRoll只能在原点进行姿态调整，HeadingPitchRange可以对距离目标点进行远近调整，这里我们设置的是1km距离，同时有个30度的俯角。

4、改变朝向

当entity所代表的对象加载完成后，我们就可以进行无死角旋转了。

viewer.zoomTo(entity, offset).then(function () {
    viewer.clock.onTick.addEventListener(function () {
        heading += 0.1;
        offset = new Cesium.HeadingPitchRange(Cesium.Math.toRadians(heading), -Cesium.Math.toRadians(30), 1000);
        viewer.zoomTo(entity, offset);
        viewer.scene.screenSpaceCameraController.enableInputs = false;
    });
});

注册一个clock对象的onTick事件，在方法体内，不断修改heading即可，并同时修改相机的姿态。

10.12 补充评论中关于如何取消旋转

// 抽出渲染方法
function rotate() {
  heading += 0.1;
  offset = new Cesium.HeadingPitchRange(Cesium.Math.toRadians(heading), -Cesium.Math.toRadians(30), 1000);
  viewer.zoomTo(entity, offset);
  viewer.scene.screenSpaceCameraController.enableInputs = false;
}
// 修改旋转的方法
viewer.zoomTo(entity, offset).then(function () {
  viewer.clock.onTick.addEventListener(rotate);
});

//====取消旋转======
viewer.clock.onTick.removeEventListener(rotate);
viewer.scene.screenSpaceCameraController.enableInputs = true

link==>