Cesium實現右鍵框選

原帖地址

灑家廢物 - 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);

若右鍵框選完后彈出瀏覽器菜單

document.oncontextmenu = function() { return false;}

效果