cesium 相机运镜相关处理

AF01
于 2024-09-13 16:59:58 发布
阅读量61
点赞数 1
文章标签： javascript
本文链接：https://blog.csdn.net/songJunFeng1/article/details/142215202
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet"
        href="https://cesium.com/downloads/cesiumjs/releases/1.80/Build/Cesium/Widgets/widgets.css" /> -->
    <script src="/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="/Cesium/Widgets/widgets.css" />
    <script src="/static/js/cesium.map.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>

    <title>cesium初始化加载底图</title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .lonLat {
            position: fixed;
            width: 100%;
            top: 0;
            /* left: 50%; */
            color: aliceblue;
            text-align: center;
        }

        .slider-container {
            display: inline-block;
            width: 300px;
            margin: 20px;
        }

        .slider {
            width: 100%;
        }

        .value {
            margin-top: 10px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <div class="lonLat">
        <button id="add">add</button>
        <button id="pause">pause</button>
        <button id="continue">continue</button>
        <button id="remove">remove</button>
        <div class="slider-container">
            <input type="range" min="0" max="100" value="50" class="slider" id="myRange">
            speed<div class="value" id="sliderValue">50</div>
        </div>
        <div class="slider-container">
            <input class="slider" id="myRangepitch">
            pitch<div class="value" id="sliderValuepitch">50</div>
            <button id="addPitch">addPitch</button>
            <button id="cutPitch">cutPitch</button>
        </div>
        <div class="slider-container">
            <input type="range" min="0" max="1000" value="50" class="slider" id="myRangedistance">
            distance<div class="value" id="sliderValuedistance">50</div>
        </div>
    </div>
    <script>
        // 设置默认的视角为中国
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
            // 西边经度
            89.5,
            // 南边维度
            20.4,
            // 东边经度
            110.4,
            // 北边维度
            61.2
        );
        var viewer = new Cesium.Viewer("cesiumContainer", {
            geocoder: false, // 位置查找工具
            timeline: false, // 底部时间线
            homeButton: false, // 视角返回初始位置
            fullscreenButton: false, // 全屏
            animation: false, // 左下角仪表盘（动画器件）
            sceneModePicker: false, // 选择视角的模式（球体、平铺、斜视平铺）
            navigationHelpButton: false, //导航帮助按钮
            targetFrameRate: 30,
            imageryProvider: new Cesium.SingleTileImageryProvider({
                url: "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",
            }),
            baseLayerPicker: false,
        });

        viewer.cesiumWidget.creditContainer.style.display = "none";

        // 高德
        var optionsG = {
            style: 'img', // style: img、elec、cva//地标 网路
            crs: 'WGS84' // 使用84坐标系，默认为：GCJ02
        }
        viewer.imageryLayers.add(new Cesium.ImageryLayer(new AmapImageryProvider(optionsG)))

        var optionsGcva = {
            style: 'cva', // style: img、elec、cva//地标 网路
            crs: 'WGS84' // 使用84坐标系，默认为：GCJ02
        }
        viewer.imageryLayers.add(new Cesium.ImageryLayer(new AmapImageryProvider(optionsGcva)))
        // // 腾讯
        // var optionsT = {
        //     style: 'img' //style: img、1：经典
        // }
        // viewer.imageryLayers.add(new Cesium.ImageryLayer(new TencentImageryProvider(optionsT)))
        // 百度
        // var optionsBI = {
        //     style: 'img', // style: img、vec//地标 网路、normal、dark
        //     crs: 'WGS84' // 使用84坐标系，默认为：BD09
        // }
        // viewer.imageryLayers.add(new Cesium.ImageryLayer(new BaiduImageryProvider(optionsBI)))
        // var optionsB = {
        //     style: 'vec', // style: img、vec//地标 网路、normal、dark
        //     crs: 'WGS84' // 使用84坐标系，默认为：BD09
        // }
        // viewer.imageryLayers.add(new Cesium.ImageryLayer(new BaiduImageryProvider(optionsB)))

        let pointDestination = Cesium.Cartesian3.fromDegrees(111.34799463, 25.23324843, 3489816.88);//视野点
        setTimeout(() => {
            viewer.scene.camera.flyTo({
                destination: pointDestination,
                orientation: {
                    heading: 6.138253237417791,
                    pitch: -1.1495947833628821,
                    roll: 0.00010390645642743834
                },
                duration: 1,
                complete: () => {

                }
            })
        }, 1000);
        viewer.screenSpaceEventHandler.setInputAction(movement => {
            // 方式 1
            var cartesian = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
            if (cartesian) {
                var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(8);
                var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(8);
                let height = this.viewer.camera.positionCartographic.height.toFixed(2);
                // var point = GPS.bd09_To_Gcj02(latitudeString,longitudeString)
                // this.nowPosition = point.lon + ',' +  point.lat + "," + height
                // console.log(this.nowPosition,'this.nowPosition');
                this.nowPosition = longitudeString + ',' + latitudeString + "," + height
                this.nowPositionheight = height
                console.log("LongitudeAndLatitude: " + longitudeString + "," + latitudeString + "," + height);
                var h = this.viewer.scene.camera.heading;
                var p = this.viewer.scene.camera.pitch;
                var r = this.viewer.scene.camera.roll;
                console.log("headingPitchRoll: " + h + "," + p + "," + r);
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        document.querySelector("#add").addEventListener("click", () => {
            if (!window.cameraSet) {
                window.cameraSet = new CameraRotation(viewer)
                window.cameraSet.start()
                const slider = document.getElementById('myRange');
                const output = document.getElementById('sliderValue');

                // 初始化值
                output.textContent = slider.value;
                output.textContent = window.cameraSet.step * 100
                // 当滑块值发生变化时更新显示的值
                slider.addEventListener('input', () => {
                    output.textContent = slider.value / 100;
                    window.cameraSet.step = slider.value / 100
                });

         

                const sliderpitch = document.getElementById('addPitch');
                const sliderpitchCut = document.getElementById('cutPitch');

                const outputpitch = document.getElementById('myRangepitch');

                // 初始化值
                // outputpitch.textContent = sliderpitch.value;
                outputpitch.value = window.cameraSet.pitch
                // 当滑块值发生变化时更新显示的值

                let intervalId = null;
                const pressInterval = 30; // 触发间隔时间，以毫秒为单位
                sliderpitch.addEventListener('mousedown', () => {
                    intervalId = setInterval(() => {
                        outputpitch.value = (outputpitch.value - 0) - Cesium.Math.toRadians(0.1)
                        window.cameraSet.pitch = outputpitch.value
                    }, pressInterval);

                });
                sliderpitch.addEventListener('mouseup', () => {
                    clearInterval(intervalId);
                });

                sliderpitch.addEventListener('mouseleave', () => {
                    clearInterval(intervalId);
                });

                sliderpitchCut.addEventListener('mousedown', () => {
                    intervalId = setInterval(() => {
                        outputpitch.value = (outputpitch.value - 0) + Cesium.Math.toRadians(0.1)
                        window.cameraSet.pitch = outputpitch.value
                    }, pressInterval);
                });

                sliderpitchCut.addEventListener('mouseup', () => {
                    clearInterval(intervalId);
                });

                sliderpitchCut.addEventListener('mouseleave', () => {
                    clearInterval(intervalId);
                });

                const sliderdistance = document.getElementById('myRangedistance');
                const outputdistance = document.getElementById('sliderValuedistance');

                // 初始化值
                outputdistance.textContent = sliderdistance.value;
                outputdistance.textContent = window.cameraSet.distance / 1000
                // 当滑块值发生变化时更新显示的值
                sliderdistance.addEventListener('input', () => {
                    outputdistance.textContent = sliderdistance.value;
                    window.cameraSet.distance = sliderdistance.value * 1000
                });
            }

        })
        document.querySelector("#pause").addEventListener("click", () => {
            window.cameraSet.pause()
            window.cameraSet.clockwise = !window.cameraSet.clockwise
        })
        document.querySelector("#continue").addEventListener("click", () => {
            window.cameraSet.start()
        })


        document.querySelector("#remove").addEventListener("click", () => {
            window.cameraSet.stop()
            window.cameraSet = null
        })


        class CameraRotation {
            constructor(viewer, clockwise = true) {
                this.viewer = viewer;
                this.scene = viewer.scene;
                this.setIntervalID = null;
                this.entity = null;
                this.step = 0.1; // 旋转步长
                this.distance = this.getDistance();
                this.pitch = this.viewer.camera.pitch;
                this.clockwise = clockwise; // 旋转方向，默认顺时针\
                this.timeIntervalCreent = 30
            }

            getDistance() {
                let position1 = this.getScreenCenterPosition(); // 高度为1000米
                let position2 = this.viewer.camera.position;
                return Cesium.Cartesian3.distance(position1, position2);
            }

            getScreenCenterPosition() {
                const canvasWidth = document.body.clientWidth;
                const canvasHeight = document.body.clientHeight;
                return this.viewer.camera.pickEllipsoid(new Cesium.Cartesian2(canvasWidth / 2, canvasHeight / 2), this.viewer.scene.globe.ellipsoid);
            }

            start() {
                if (this.setIntervalID) {
                    return
                }
                this.distance = this.getDistance();
                this.pitch = this.viewer.camera.pitch;
                this.entity = this.viewer.entities.add({
                    position: this.getScreenCenterPosition(),
                    point: {
                        color: Cesium.Color.WHITE.withAlpha(0.01),
                        pixelSize: 0.1
                    },
                });

                let initialHeading = Cesium.Math.toDegrees(this.viewer.camera.heading);

                this.setIntervalID = setInterval(() => {
                    console.log(initialHeading, 'initialHeading');
                    if (initialHeading >= 360) {
                        initialHeading = 0;
                    }
                    if (initialHeading <= -360) {
                        initialHeading = 0;
                    }

                    var offset = new Cesium.HeadingPitchRange(
                        Cesium.Math.toRadians(initialHeading), // 水平方向的旋转角 0-360度
                        this.pitch, // 垂直平面俯仰角 0-90度
                        this.distance // 相机距离地球球心的距离
                    );
                    this.viewer.zoomTo(this.entity, offset);
                    if (this.clockwise) {
                        initialHeading += this.step; // 顺时针旋转
                    } else {
                        initialHeading -= this.step; // 逆时针旋转
                    }

                }, this.timeIntervalCreent);
            }
            pause() {
                clearInterval(this.setIntervalID);
                this.setIntervalID = null
            }
            stop() {
                this.viewer.entities.remove(this.entity);
                clearInterval(this.setIntervalID);
                this.setIntervalID = null
            }
        }


    </script>

</body>

</html>