cesium 相机视口

发布时间 2023-10-25 15:08:19作者: 1156740846
        function saveView2() {
            var viewJson = {
                // 世界坐标(不直观)
                ...viewer.camera.position,
                // 弧度值(不直观)
                "heading": viewer.camera.heading,
                "pitch": viewer.camera.pitch,
                "roll": viewer.camera.roll
            }
            console.log("viewJson", JSON.stringify(viewJson));

            // 经纬度 高度 角度 (常用且直观)
            let degrees = cartesianToDegrees(viewer.camera.position)
            var viewJson2 = {
                ...degrees,
                // 相机姿态 heading pitch roll
                "heading": Cesium.Math.toDegrees(viewer.camera.heading), // 朝向  朝东90度  朝北0度
                "pitch": Cesium.Math.toDegrees(viewer.camera.pitch), // 俯仰 向下是-90度  水平0度  向上90度
                "roll": Cesium.Math.toDegrees(viewer.camera.roll), // 旋转(为0即可,不影响视角)
            }
            console.log("viewJson2", JSON.stringify(viewJson2));
        }

        function backView2(viewJson) {
            console.log("开始返回视角", viewJson)
            // 经纬度转世界坐标
            let point = Cesium.Cartesian3.fromDegrees(viewJson.longitude, viewJson.latitude, viewJson.height)
            viewer.camera.flyTo({ // 定位到范围中心点
                destination: point,
                orientation: {
                    heading: Cesium.Math.toRadians(viewJson.heading),
                    pitch: Cesium.Math.toRadians(viewJson.pitch),
                    roll: 0
                },
            })
        }

        // {"longitude":117.21936682793581,"latitude":31.813278953515983,"height":1930.0811561075159,"heading":1.0177774980683254e-13,"pitch":-89.99997906948178,"roll":0}

        backView2({"longitude":117.219366,"latitude":31.813278,"height":1930,"heading":0,"pitch":-90,"roll":0})

        // 世界坐标转经纬度
        function cartesianToDegrees() {
            let radians = Cesium.Cartographic.fromCartesian(viewer.camera.position)
            return {
                longitude: Cesium.Math.toDegrees(radians.longitude),
                latitude: Cesium.Math.toDegrees(radians.latitude),
                height: radians.height
            }
        }

        // 与 cartesianToDegrees 结果一样
        function transformCartesianToWGS84(cartesian) {
            var ellipsoid = Cesium.Ellipsoid.WGS84;
            var cartographic = ellipsoid.cartesianToCartographic(cartesian);
            return {
                lng: Cesium.Math.toDegrees(cartographic.longitude),
                lat: Cesium.Math.toDegrees(cartographic.latitude),
                alt: cartographic.height,
            };
        }

 一般情况下直接使用不直观的值就可以了,因为使用者并不需要看到视角数据,只要能保存能返回保存的视角即可

        function saveView() {
            var viewJson = {
                "x": viewer.camera.position.x,
                "y": viewer.camera.position.y,
                "z": viewer.camera.position.z,
                "pitch": viewer.camera.pitch,
                "heading": viewer.camera.heading,
                "roll": viewer.camera.roll
            }
            console.log("viewJson", JSON.stringify(viewJson));
            if (!window.localStorage) {
                window.alert("该浏览器不支持LocalStorage")
            } else {
                window.localStorage.setItem("viewJson", JSON.stringify(viewJson));
                console.log("保存成功");
            }
        }

        function backView(viewJson) {
            if (!viewJson) {
                viewJson = window.localStorage.getItem("viewJson")
            }
            if (!viewJson) {
                viewJson = {x: -2458112.7618688047, y: 4760718.645741547, z: 3448779.8410891695, pitch: -0.05670309137107821, heading: 2.125839285083903, roll: 0}
            }
            console.log("开始返回视角", viewJson)
            viewer.camera.flyTo({ // 定位到范围中心点
                destination: {
                    x: viewJson.x,
                    y: viewJson.y,
                    z: viewJson.z
                },
                orientation: {
                    heading: viewJson.heading,
                    pitch: viewJson.pitch,
                    roll: viewJson.roll
                },
            })
        }