Cesium开发--保存当前视角和还原视角

body标签中放入两个按钮方便我们触发事件

<div id="cesiumContainer">
            <span style="font-size:24px;">
            <div id="latlng_show" style="width:340px;height:100px;position:absolute;bottom:40px;right:200px;z-index:1;font-size:15px;">  
                <div style="width:100px;height:30px;float:left;">  
                     <button onclick="test1()">获取当前视角</button>
                </div>  
                <div style="width:100px;height:30px;float:left;">  
                    <button onclick="test2()">返回视角</button>
               </div>  
            </div>
            </span>
        </div>

script中写入下面代码

var viewer = new Cesium.Viewer('cesiumContainer');
            //去掉版权
            viewer._cesiumWidget._creditContainer.style.display="none";  

            var testPitch;
            var testHeading;
            var x;
            var y;
            var z;
            var storage;
            function test1(){
                //获取当前视角的pitch
                var pitch = viewer.camera.pitch;
                //获取当前视角的heading
                var heading = viewer.camera.heading;
                //获取当前视角的postion(位置)
                var position = viewer.camera.position;
                x=position.x;
                y=position.y;
                z=position.z;
                testPitch = pitch;
                testHeading = heading;
                console.log("获取当前视角x,y,z",position.x,position.y,position.z,"pitch",pitch,"heading",heading);

                var ObjectJson={
                    "x":x,
                    "y":y,
                    "z":z,
                    "pitch":pitch,
                    "heading":heading
                }
                console.log("ObjectJson",ObjectJson);
                if(!window.localStorage){
                    window.alert("该浏览器不支持LocalStorage")
                }else{
                   storage = window.localStorage;
                   storage.setItem("positionJson",JSON.stringify(ObjectJson));
                   console.log("storage.positionJson",storage.positionJson);
                }
            }

            function test2(){
                console.log("开始返回视角");
                console.log("x:",x,"y:",y,"z:",z,"testPitch",testPitch,"testHeading",testHeading);
                var dataJson = storage.getItem("positionJson")
                Json=JSON.parse(dataJson);
                console.log("Json",Json)
                viewer.camera.flyTo({ //定位到范围中心点
                    destination: {
                        x:Json.x,
                        y:Json.y,
                        z:Json.z
                        // x: x,
                        // y: y,
                        // z: z
                    },
                    orientation: {
                        heading:Json.heading,
                        pitch:Json.pitch,
                        // heading: testHeading,//左右方向
                        // pitch: testPitch, //上下方向
                        roll: 0.0
                    },
                })
            }

这样可以实现一个基本的视角的保存以及还原,我这里是用了JSON保存数据和传入数据。当然也可以不用JSON存储的方法,单单用变量也行,这方面就看你自己怎么操作了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值