Cesium实战系列文章总目录
:
传送门
1. 实现效果
2. 实现方法
2.1 实现思路
相机绕地旋转
,只需要动态更改相机的heading
属性值即可。
不断使用camera
类的setView
方法进行更改,API:传送门
2.2 具体代码
(1)代码调用
引入下面的核心代码JS文件后,简单调用即可。
let aroundViewer = new AroundView(viewer, 0.2);
aroundViewer.start();
(2)核心代码
核心实现代码如下:
/*
* @Description: 相机绕地旋转
* @Version: 1.0
* @Author: Julian
* @Date: 2022-05-06 10:15:20
* @LastEditors: Julian
* @LastEditTime: 2022-05-06 10:43:02
*/
class AroundView {
constructor(viewer, amount) {
this._viewer = viewer;
this._amount = amount;
}
// 绑定事件
_bindEvent() {
this._viewer.clock.onTick.addEventListener(this._aroundView, this);
}
// 解除绑定
_unbindEvent() {
this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
this._viewer.clock.onTick.removeEventListener(this._aroundView, this);
}
// 开始
start() {
this._viewer.clock.shouldAnimate = true;
this._unbindEvent();
this._bindEvent();
return this;
}
// 停止
stop() {
this._unbindEvent();
return this;
}
// 相机绕地旋转函数
_aroundView() {
let heading = this._viewer.camera.heading;
let pitch = this._viewer.camera.pitch;
let roll = this._viewer.camera.roll;
heading += Cesium.Math.toRadians(this._amount);
if (heading >= Math.PI * 2 || heading <= -Math.PI * 2) {
heading = 0;
}
this._viewer.camera.setView({
orientation: {
heading: heading,
pitch: pitch,
roll: roll
}
})
}
}