Cesium场景的保存与恢复

需求

保存当前场景，后面可恢复到当前一模一样的场景下。

主要步骤

// 保存场景信息
this.options.position = viewer.camera.positionWC.clone();
this.options.up = viewer.camera.up.clone();
this.options.direction = viewer.camera.direction.clone();



var camera = this.options;
// 恢复场景信息
viewer.camera.setView({
    destination: camera.position,
    orientation: {
        direction: camera.direction,
        up: camera.up
    }
});

其他知识积累

// 代表画图中三维框的宽度，前端知识
viewer.canvas.clientWidth

// 创建二维下的 笛卡尔积 坐标
new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2)


// 计算屏幕坐标到世界坐标的方法
// windowPosition: The x and y coordinates of a pixel.
// ellipsoid: The ellipsoid to pick. 椭球体 Ellipsoid.WGS84

// 得到当前三维场景的椭球体
var ellipsoid = viewer.scene.globe.ellipsoid;
var cartesian = viewer.camera.pickEllipsoid(windowPosition, ellipsoid)

if (cartesian) {
	//将笛卡尔坐标转换为地理坐标
    var cartographic = ellipsoid.cartesianToCartographic(cartesian);
    //将经纬度、弧度转为度的十进制度表示
    longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
    latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
}

// 定义当前场景的画布元素的事件处理
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
//设置鼠标移动事件的处理函数，这里负责监听x,y坐标值变化
handler.setInputAction(function(movement) {
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

//设置鼠标滚动事件的处理函数，这里负责监听高度值变化
handler.setInputAction(function(wheelment) {
}, Cesium.ScreenSpaceEventType.WHEEL);



// 获取当前相机的高度
height = Math.ceil(viewer.camera.positionCartographic.height)


// 矩形框
var rect = viewer.camera.computeViewRectangle();

console.log(rect)



// 默认角度坐标
Cesium.Camera.DEFAULT_OFFSET
// 默认矩形坐标框
Cesium.Camera.DEFAULT_VIEW_RECTANGLE

viewer.camera.flyTo({
    destination: Cesium.Camera.DEFAULT_VIEW_RECTANGLE,
    orientation: Cesium.Camera.DEFAULT_OFFSET
});


// 自定义位置
var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(111.5652101, 38.70350851, 100.500143), 143.6271004);

摄像机飞到某个地点：

viewer.camera.flyTo({
    destination : this.rectangle,                    
    orientation : {
        heading : this.orientation.heading,
        pitch : this.orientation.pitch,
        roll : this.orientation.roll
    }
});

参考资料

cesium保存与恢复摄像机
https://blog.csdn.net/qq_38937839/article/details/73277920
从参考资料中，可以看到此方法仅仅局限于 3D 下的视图保存，如果在其他模式下，还需要保存和加载另外的参数才能做到