SuperMap iClient3D for WebGL修改鼠标操作习惯

kele

前言

在三维场景中，鼠标的交互是必不可少的，合适的鼠标操作习惯会让浏览场景更加方便。对于刚刚接触超图三维的小伙伴来说，可能还不太习惯超图WebGL的鼠标操作习惯，下面咱们就来看下如何修改成符合自己的操作方式吧

一、接口介绍

鼠标操作通过改变相机方位角度来实现三维场景的浏览，我们常用的操作方式有点击鼠标左键、点击鼠标中键、滚动鼠标中键、点击鼠标右键。

 

SuperMap WebGL默认以鼠标左键点击为选择对象、鼠标左键按下拖拽平移场景，鼠标中键按下拖拽旋转场景，鼠标右键按下拖拽缩放场景，我们可以在new

Cesium.ScreenSpaceCameraController(scene)相机方位类中去修改鼠标的操作模式。

1.lookEventTypes:允许用户更改相机观看方向，仅适用于3D和Columbus视图模式。默认为Shift+鼠标左键

2.rotateEventTypes:允许用户绕地球或其他物体旋转，仅适用于3D和Columbus视图模式。默认为鼠标左键

3.tiltEventTypes:允许用户在3D和Columbus视图中倾斜。默认为鼠标中键按下拖动、Ctrl+鼠标左键、Ctrl+鼠标右键

4.translateEventTypes：允许用户在地图周围平移，仅适用于二维和Columbus视图模式。默认为鼠标左键按下拖动

5.zoomEventTypes：允许用户放大/缩小。默认为鼠标右键按下拖动，鼠标中键滚动

二、实现代码

单按键事件：[CameraEventType.LEFT_DRAG] 鼠标左键按下拖拽触发

组合键事件：[{ eventType : CameraEventType.LEFT_DRAG, modifier : KeyboardEventModifier.CTRL }] 鼠标左键按下+Ctrl键同时按下触发

下面实现将鼠标左键和右键功能互调

viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);   //清除鼠标左键单击事件
viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK );  //禁用鼠标左键双击事件
viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);  //禁用鼠标右键单击事件
viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.LEFT_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH];//左键缩放
viewer.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.RIGHT_DRAG];  //右键平移

viewer.screenSpaceEventHandler.setInputAction(function (e) {
    var building = scene.pick(e.position);
    console.log(building.id)
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);   //注册鼠标右键事件，改为右键点击选中模型，获取模型id

---

总结

小伙伴们还可以根据自己的喜好去设置键盘+鼠标的组合操作方式