Cesium实现右键框选

思路

1、先取消地图的右键事件

2、右键框选事件，屏幕坐标转为经纬度坐标

取消地图的右键事件

//此处容易犯一个错误：以为右键事件绑定了缩放功能，伪代码即 Cesium.MouseEvent.右键事件 = 地图缩放()
//踩坑后才发现，正确的是缩放(平移...等)事件绑定按钮类型。

//cesium默认右键为放大缩小，此处给zoomEventTypes设置新值
viewer.scene.screenSpaceCameraController.zoomEventTypes=[Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK]

//earthsdk默认右键为改变视角，此处禁止。
viewer.scene.screenSpaceCameraController.lookEventTypes=[]

右键框选事件，屏幕坐标转为经纬度坐标

//右键按下标识
var flag = false
//起点终点x,y
var startX = null;
var startY = null;
var endX = null; 
var endY = null; 
//创建框选元素
var selDiv = document.createElement("div")
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
//右键按下事件，设置起点，div设置样式和位置，添加到页面
handler.setInputAction(function (event) {
    flag = true
    startX = event.position.x
    startY = event.position.y

    selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;"; 
    selDiv.id = "selectDiv"; 
    selDiv.style.left = startX + "px"; 
    selDiv.style.top = startY + "px"; 
    document.body.appendChild(selDiv); 
}, Cesium.ScreenSpaceEventType.RIGHT_DOWN);

//鼠标抬起事件，获取div坐上和右下的x,y 转为经纬度坐标
handler.setInputAction(function (event) {
    flag = false
    var l = parseInt(selDiv.style.left);
    var t = parseInt(selDiv.style.top);
    var w = parseInt(selDiv.style.width);
    var h = parseInt(selDiv.style.height);
    var earthPosition = _earth._viewer.camera.pickEllipsoid({x:l,y:t}, _earth._viewer.scene.globe.ellipsoid);
    var cartographic = Cesium.Cartographic.fromCartesian(earthPosition, _earth._viewer.scene.globe.ellipsoid, new Cesium.Cartographic());
    console.log("左上坐标为："+[Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude)])
    earthPosition = _earth._viewer.camera.pickEllipsoid({x:l+w,y:t+h}, _earth._viewer.scene.globe.ellipsoid);
    cartographic = Cesium.Cartographic.fromCartesian(earthPosition, _earth._viewer.scene.globe.ellipsoid, new Cesium.Cartographic());
    console.log("右下坐标为："+[Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude)])
    
    //根据业务确定是否删除框选div
    document.getElementById("selectDiv").parentNode.removeChild(document.getElementById("selectDiv"))
}, Cesium.ScreenSpaceEventType.RIGHT_UP);

//鼠标移动事件，处理位置css
handler.setInputAction(function (event) {
    if (flag) {
        endX = event.endPosition.x
        endY = event.endPosition.y

        selDiv.style.left = Math.min(endX, startX) + "px"; 
        selDiv.style.top = Math.min(endY, startY) + "px"; 
        selDiv.style.width = Math.abs(endX - startX) + "px"; 
        selDiv.style.height = Math.abs(endY - startY) + "px";
    } 
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);