Cesium之鼠标事件绑定和移除

最新推荐文章于 2024-09-30 02:09:07 发布

leemraz

最新推荐文章于 2024-09-30 02:09:07 发布

阅读量2.1k

点赞数 2

分类专栏： AboutCesium

本文链接：https://blog.csdn.net/Tmraz/article/details/115317072

版权

AboutCesium 专栏收录该内容

38 篇文章 33 订阅

订阅专栏

本文介绍了Cesium地图中如何绑定和移除鼠标事件监听，包括LEFT_CLICK、RIGHT_CLICK、MOUSE_MOVE等事件类型。提供了两种方法，一种是通过ScreenSpaceEventHandler实例，另一种直接在viewer上添加。注意移除事件时要区分不同方式以避免清除其他事件。

摘要由CSDN通过智能技术生成

背景

绑定的事件需要移除，否则会一直监听。基于此整理相关方法。

方案

1 鼠标事件类型

在这里插入图片描述

// 为整型数据
Cesium.ScreenSpaceEventType.LEFT_CLICK //鼠标左击事件
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK //鼠标左键双击事件
Cesium.ScreenSpaceEventType.LEFT_DOWN //左键鼠标按下事件
Cesium.ScreenSpaceEventType.LEFT_UP //左键鼠标抬起事件
Cesium.ScreenSpaceEventType.MIDDLE_CLICK //中键单机
Cesium.ScreenSpaceEventType.MIDDLE_DOWN //中键按下
Cesium.ScreenSpaceEventType.MIDDLE_UP //中键抬起
Cesium.ScreenSpaceEventType.MOUSE_MOVE //鼠标移动
Cesium.ScreenSpaceEventType.PINCH_END //表示两指事件在触摸面上的结束。
Cesium.ScreenSpaceEventType.PINCH_MOVE //两指移动
Cesium.ScreenSpaceEventType.PINCH_START //表示在触摸面上发生两指事件的开始。
Cesium.ScreenSpaceEventType.RIGHT_CLICK //鼠标右击事件
Cesium.ScreenSpaceEventType.RIGHT_DOWN  //鼠标右键按下
Cesium.ScreenSpaceEventType.RIGHT_UP    //鼠标右键抬起
Cesium.ScreenSpaceEventType.WHEEL //鼠标滚轮事件

2 绑定和移除方法


//方式1 推荐，每次都创建一个实例，可以多个共存且根据名字（变量比如：下面的handler）可以清除指定事件
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);//获取地图对象
 handler.setInputAction(function(event) { //设置监听方法
 var height = viewer.camera.positionCartographic.height;//e.g 点击鼠标左键获取当前高度
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 方法1 移除方法
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)//移除事件

 
//方式2 直接在viewer实例上添加,清除事件会污染整个viewer实例且当前实例存在其它鼠标事件会一并清除（适合一键清除地图上事件）
viewer.screenSpaceEventHandler.setInputAction(function (wheelment) {
        var height = viewer.camera.positionCartographic.height;//e.g 点击鼠标左键获取当前高
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 方法2 移除方法
viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);