cesium api放大缩小地图

AF01

已于 2023-11-15 14:04:49 修改

阅读量736

点赞数

文章标签： javascript

于 2023-11-15 14:04:37 首次发布

本文链接：https://blog.csdn.net/songJunFeng1/article/details/134418740

版权

方法缩小地图封装api

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium Zoom API</title>
    <style>
        #cesiumContainer {
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        #buttonCss {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 10px;
            cursor: pointer;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <div id="buttonCss">
        <button id="zoomInButton">Zoom In</button>
        <button id="zoomOutButton">Zoom Out</button>
    </div>

    <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="https://cdn.bootcdn.net/ajax/libs/Turf.js/6.5.0/turf.min.js"></script> -->
    <script>

        const viewer = new Cesium.Viewer('cesiumContainer');


        document.getElementById('zoomInButton').addEventListener('click', () => {
            zoomMap(-0.5);
        });

        document.getElementById('zoomOutButton').addEventListener('click', () => {
            zoomMap(0.5);
        });

        function zoomMap(direction) {
            const camera = viewer.camera;
            const position = camera.positionWC.clone();
            const directionVector = camera.directionWC.clone();
            const height = viewer.scene.globe.ellipsoid.cartesianToCartographic(position).height;

            // 根据相机高度调整缩放的比例
            // const scale = Math.ceil(height / 1000.0);
            // console.log(scale,'scale');
            // let dire = scale>1?scale*direction * 100:direction * 100
            // console.log(dire,'dire');
            const scale = Math.ceil(height / 1.0);
            let dire = scale * direction

            // 方向矢量与缩放量的乘积
            const zoomVector = Cesium.Cartesian3.multiplyByScalar(directionVector, dire, new Cesium.Cartesian3());

            // 新位置为当前位置加上缩放后的矢量
            const newPosition = Cesium.Cartesian3.add(position, zoomVector, new Cesium.Cartesian3());
            const heading = camera.heading;
            const pitch = camera.pitch;
            camera.flyTo({
                destination: newPosition,
                orientation: {
                    heading: heading,
                    pitch: pitch,
                },
                duration: 0.5, // 调整飞行动画的持续时间
            });
        }
    </script>
</body>

</html>