Bootstrap

Cesium-鼠标交互

学习方法

看沙盒,看API,单页面测试
沙盒:Picking
API:ScreenSpaceEventHandler

翻译

new Cesium.ScreenSpaceEventHandler(element)
处理用户输入事件。可以添加自定义函数,以便在用户输入时对其执行。

使用方法举例

//构建场景
var scene = viewer.scene;
//判断浏览器是否支持
if (!scene.pickPositionSupported) {
    console.log('This browser does not support pickPosition.');
}
//声明控制器
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
控制器方法
handler.setInputAction(function(movement) {
//二维坐标转三维
var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
        if (cartesian) {
        //转经纬度
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
            var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

方法总结

API: ScreenSpaceEventHandler

destroy() 销毁Handle
getInputAction(type, modifier)  得到交互事件
isDestroyed() 判断是否销毁
removeInputAction(type, modifier) 移除事件
setInputAction(action, type, modifier) 设置事件

事件总结

API:ScreenSpaceEventType

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 两指开始触碰
;