cesium实现相机绕地旋转效果

最新推荐文章于 2025-05-28 06:39:31 发布

原创最新推荐文章于 2025-05-28 06:39:31 发布 · 3.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#gis #cesium

cesium 专栏收录该内容

122 篇文章

订阅专栏

该博客介绍了如何在Cesium中实现相机绕地旋转的效果。通过动态更改相机的heading属性并结合Cesium的setView方法，创建了一个名为AroundView的类来实现这一功能。在核心代码中，定义了绑定和解除绑定事件、开始和停止旋转的方法，并在_onroundView函数中更新相机的朝向，实现了平滑的3D地球旋转效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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
            }
        })
    }
}