main

分支 (1)

管理

管理

main

cesium_pdf
/
4.3事件汇总篇_相机事件_修改默认操作.html

<!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">
    <title>相机事件_修改默认操作</title>
    <script src="./Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer">
    </div>

    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NGM4MDcxOS05Zjk3LTQ2YmMtYjAxYi0zYTczNWFkYzFlN2EiLCJpZCI6NzY0NTcsImlhdCI6MTYzOTQ2ODI2NH0.Zsp28WnnCpj4wlAIQwIwcSob228zSaz510QE3zKQN58';
        var viewer = new Cesium.Viewer("cesiumContainer", {
            geocoder: true,  //是否显示地名查找工具
            homeButton: true,    //是否显示首页位置工具
            sceneModePicker: true,   //是否显示视角模式切换工具
            baseLayerPicker: true,   //是否显示默认图层选择工具
            navigationHelpButton: true,  //是否显示导航帮助工具
            animation: true, //是否显示动画工具
            timeline: true,  //是否显示时间轴工具
            fullscreenButton: true,  //是否显示全屏按钮工具
        });

        // 修改了相机的控制方式，允许用户通过右键拖动、按住Ctrl键的左键或右键拖动（这三种方式都可以）来倾斜相机
        //修改鼠标右键为相机旋转 倾斜视角
        viewer.scene.screenSpaceCameraController.tiltEventTypes = [
            Cesium.CameraEventType.RIGHT_DRAG,
            Cesium.CameraEventType.PINCH,
            {
                eventType: Cesium.CameraEventType.LEFT_DRAG,
                modifier: Cesium.KeyboardEventModifier.CTRL,
            },
            {
                eventType: Cesium.CameraEventType.RIGHT_DRAG,
                modifier: Cesium.KeyboardEventModifier.CTRL,
            },
        ];
        //修改鼠标中键为相机缩放  ，通过鼠标中键拖动、滚轮滚动或捏合来缩放相机
        viewer.scene.screenSpaceCameraController.zoomEventTypes = [
            Cesium.CameraEventType.MIDDLE_DRAG,
            Cesium.CameraEventType.WHEEL,
            Cesium.CameraEventType.PINCH,
        ];

    </script>
</body>

</html>