Cesium切换视图模式时保持视图范围不变Keep view boundingbox when change scenemode in cesium.

最新推荐文章于 2025-08-18 22:05:58 发布

原创最新推荐文章于 2025-08-18 22:05:58 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

GIS 同时被 2 个专栏收录

97 篇文章

订阅专栏

通用

67 篇文章

订阅专栏

本文介绍了一个Cesium应用技巧，通过自定义类KeepView，在2D与3D场景模式间切换时，保持当前视图的框选范围不变。此方法适用于需要连续观察特定地理区域的应用场景。

Keep view boundingbox when change scenemode in cesium.在cesium中通过按钮切换视图的时候，保证视图范围不变。

Only keep when 2D to 3D or 3D to 2D.

var KeepView = Class.extend({
    init: function (viewer) {
        this._viewer = gviewer;
        this._2dPC = {time:Date.parse(new Date())};
        this._3dPC = {time:Date.parse(new Date())};
        this._t = undefined;

        let _nodes = this._viewer.sceneModePicker._wrapper.children;
        let _btn2D,_btn3D;
        if(_nodes[1].attributes["data-bind"].value.indexOf("SCENE2D") > -1){
            _btn2D = _nodes[1];
            _btn3D = _nodes[2];
        }
        else{
            _btn2D = _nodes[2];
            _btn3D = _nodes[1];
        }
        (function(obj,btnArr){
            for (let index = 0; index < btnArr.length; index++) {
                let _btn = btnArr[index];
                _btn.onmouseenter=function(){
                    obj.update();
                };
                _btn.onclick=function(){
                    obj.keep();
                };
            }
        })(this,[_btn2D,_btn3D]);
    },
    update:function(){
        let _pc = this._viewer.camera.positionCartographic.clone();
        let _curSceneMode = this._viewer.scene.mode;
        if(_curSceneMode == Cesium.SceneMode.SCENE2D ){
            this._2dPC = {
                pc:_pc,
                time:Date.parse(new Date())
            }
        }else if(_curSceneMode == Cesium.SceneMode.SCENE3D ){
            this._3dPC = {
                pc:_pc,
                time:Date.parse(new Date())
            }
        }
    },
    keep:function(){
        let _correctPC = this._3dPC;
        let _waitMode = undefined;
        if(this._2dPC.time > this._3dPC.time){
            _waitMode = Cesium.SceneMode.SCENE3D;
            _correctPC = this._2dPC.pc;
            this._3dPC = this._2dPC;
        }else if(this._2dPC.time < this._3dPC.time){
            _waitMode = Cesium.SceneMode.SCENE2D;
            _correctPC = this._3dPC.pc;
            this._2dPC = this._3dPC;
        }
        else{
            return;
        }
        this._waitMode = _waitMode;
        (function(obj,correctPC){
            if(obj._t != undefined) clearInterval(obj._t)
            obj._t = setInterval(function(){
                if(_waitMode === obj._viewer.scene.mode){
                    var c3 = new Cesium.Cartesian3.fromRadians(correctPC.longitude,correctPC.latitude,correctPC.height);
                    obj._viewer.camera.setView({destination: c3});
                    clearInterval(obj._t);
                }
            }, 100);})(this,_correctPC);
    }
});

调用,how to use:

var viewer = new Cesium.Viewer('cesiumContainer');
var _keepView = new KeepView(viewer);

一点说明note：

Class详见https://johnresig.com/blog/simple-javascript-inheritance/