Cesium鼠标事件汇总

最新推荐文章于 2025-06-04 11:38:08 发布

原创最新推荐文章于 2025-06-04 11:38:08 发布 · 7.7k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#cesium #鼠标事件

Cesium 专栏收录该内容

4 篇文章

订阅专栏

博客围绕Cesium展开，介绍了对鼠标视图控制的限制，修改视图默认鼠标操作方式，还详细说明了添加自定义鼠标事件，包括实现点击、双击、右键点击等事件，且给出了两种不同写法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

限制鼠标的视图控制

// 禁用放大缩小和自由旋转视图
viewer.scene.screenSpaceCameraController.enableZoom = false;
viewer.scene.screenSpaceCameraController.enableTilt = false;

修改视图默认鼠标操作方式

// 修改默认的鼠标视图控制方式。
viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH];
viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.PINCH, Cesium.CameraEventType.RIGHT_DRAG];

添加自定义鼠标事件（1），实现点击、双击、右键点击等事件

// 添加鼠标点击事件。
// 可以通过Cesium.ScreenSpaceEventType类实现不同的触发条件
viewer.screenSpaceEventHandler.setInputAction(function(click) {
    // 处理鼠标按下事件，获取鼠标当前位置
    var feature = viewer.scene.pick(click.position);
    //选中某模型
    if (feature && feature instanceof Cesium.Cesium3DTileFeature) {
        console.log(feature);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

// 移除事件
viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);

添加自定义鼠标事件（2），实现点击、双击、右键点击等事件。本质来讲和上面是一样的，只是写法不同。

// 添加事件
// 可以通过Cesium.ScreenSpaceEventType类实现不同的触发条件
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click){
    console.log('左键单击事件：',click.position);     
},Cesium.ScreenSpaceEventType.LEFT_CLICK);

// 移除事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);