cesium实现相机绕点旋转效果


Cesium实战系列文章总目录传送门

1. 实现效果

在这里插入图片描述

2. 实现方法

2.1 实现思路

相机绕点旋转,即相机指向中心点不变,不断更改heading属性即可,使用Camera类的lookAt方法,API:传送门

在这里插入图片描述

2.2 具体代码

(1)代码调用
引入下面的核心js后,简单调用即可。

 let aroundPoint = new AroundPoint(viewer, 0.2, new Cesium.Cartesian3.fromDegrees(103.62416890925606, 28.782654034074834, 1300));

 aroundPoint.start();

(2)核心代码

/*
 * @Description: 相机绕点旋转
 * @Version: 1.0
 * @Author: Julian
 * @Date: 2022-05-06 21:42:26
 * @LastEditors: Julian
 * @LastEditTime: 2022-05-08 16:32:25
 */
class AroundPoint {
    constructor(viewer, amount, position) {
        this._viewer = viewer;
        this._amount = amount;
        this._position = position;
    }

    _bindEvent() {
        this._viewer.clock.onTick.addEventListener(this._aroundPoint, this);
    }

    _unbindEvent() {
        this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        this._viewer.clock.onTick.removeEventListener(this._aroundPoint, this);
    }

    start() {
        this._viewer.clock.shouldAnimate = true;
        this._unbindEvent();
        this._bindEvent();
        return this;
    }

    stop() {
        this._unbindEvent();
        return this;
    }

    // 相机绕点旋转函数
    _aroundPoint() {
        let heading = this._viewer.camera.heading;
        let pitch = this._viewer.camera.pitch;


        heading += Cesium.Math.toRadians(this._amount);
        if (heading >= Math.PI * 2 || heading <= -Math.PI * 2) {
            heading = 0;
        }

        this._viewer.camera.lookAt(
            this._position,
            new Cesium.HeadingPitchRange(
                heading,
                pitch,
                5000.0,
            )
        )
    }
}
  • 5
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

右弦GISer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值