cesium导出截图

可封装js文件import引入，js文件导出

直接写在viewer初始化里面会导致直接截图变成黑屏

所以加一个延时器，或者异步调用该方法

//调用
  //导出
      setTimeout(() => {
        saveToImage(viewer)
      }, 3000);
/**
//====================================
 * @description: 场景导出
 * @param {*} _viewer
 * @return {*}
 */
function saveToImage(_viewer) {
    // 不写会导出为黑图
    _viewer.render();

    let canvas = _viewer.scene.canvas;
    let image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

    let link = document.createElement("a");
    let blob = dataURLtoBlob(image);
    let objurl = URL.createObjectURL(blob);
    link.download = "scene.png";
    link.href = objurl;
    link.click();
}

function dataURLtoBlob(dataurl) {
    let arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
        type: mime
    });
}

cesium实现相机绕地旋转效果

实现思路

相机绕地旋转，只需要动态更改相机的heading属性值即可。

不断使用camera类的setView方法进行更改，API：传送门

具体代码

（1）代码调用引入下面的核心代码JS文件后，简单调用即可。

三步骤导出=>引入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
            }
        })
    }
}

在这里插入图片描述

自定义背景

修改背景色

// 自定义背景色
viewer.scene.skyBox.show = false;
viewer.scene.backgroundColor = Cesium.Color.GREEN;

地球自转

1.实现方法

1.1官方参考

参考官方Camera中lookAtTransform方法的API：传送门使用变换矩阵和偏移量来更新相机的位置。

2具体实现

2.1核心代码

具体核心代码globeRotate.js如下：

/*
 * @Description: 地球自转效果
 * @Version: 1.0
 * @Author: Julian
 * @Date: 2022-02-25 15:14:20
 * @LastEditors: Julian
 * @LastEditTime: 2022-02-26 12:18:03
 */


/*
 * @description: 地球自转类
 */
class GlobeRotate {
    constructor(viewer) {
        this._viewer = viewer;
    }

    // 根据国际天体参考系计算旋转矩阵
    _icrf() {
        if (this._viewer.scene.mode !== Cesium.SceneMode.SCENE3D) {
            return ture;
        }
        console.log(this._viewer.camera.position);
        let icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(this._viewer.clock.currentTime);
        if (icrfToFixed) {
            let camera = this._viewer.camera;
            let offset = Cesium.Cartesian3.clone(camera.position);
            let transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
            // 偏移相机，否则会场景旋转而地球不转
            camera.lookAtTransform(transform, offset);
        }
    }

    // 绑定事件
    _bindEvent() {
        // 转动的速度设置
        this._viewer.clock.multiplier = 15 * 1000;
        // 初始化为单位矩阵
        this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        this._viewer.scene.postUpdate.addEventListener(this._icrf, this);
    }

    // 解除绑定
    _unbindEvent() {
        this._viewer.clock.multiplier = 1;
        this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        this._viewer.scene.postUpdate.removeEventListener(this._icrf, this);
    }

    // 开始旋转
    start() {
        this._viewer.clock.shouldAnimate = true;
        this._unbindEvent();
        this._bindEvent();
        return this;
    }

    // 停止旋转
    stop() {
        this._unbindEvent();
        return this;
    }
}
export{
  GlobeRotate
}

引用调用：

import { GlobeRotate } from './globeRotate'
// 地球球体自转
let globeRotate = new GlobeRotate(viewer);
globeRotate.start();

效果：