Cesium右键菜单功能实现

先上效果图：

1、右键菜单目录

 <div id="tabsMenu" class="easyui-menu" style="width:120px;">
        <div iconCls='icon-user' name="clearmap" onclick="clearMap()">清空地图</div>
        <div iconCls='icon-user' name="quanMap" onclick="quanMap()">全图</div>
        <div iconCls='icon-user' name="letfClickRotateCamera" onclick="letfClickRotateCamera()">环视</div>
        <div iconCls='icon-user' name="letfClickRotateCamera" onclick="stoprotateCamera()">stop环视</div>
        <div iconCls='icon-user' name="undergroundMode" onclick="undergroundMode()">地下模式
        </div>
    </div>

2、右键事件监听

//围绕point点坐标 旋转相机，默认是中心点，在高度height处，速度为rate，默认速度每个tick加0.01
function letfClickRotateCamera(){
    // tips.setVisible(true);
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function(event) { //设置监听方法
        console.log('event',event)
        var cartesian = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid);
        if (cartesian) {
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
            var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
            var heightString = cartographic.height;
            console.log(longitudeString, latitudeString, heightString);
            //在当前位置创建point实体
            var pointEntitie = viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(longitudeString, latitudeString, heightString),
                point: {
                    pixelSize: 5,
                    color: Cesium.Color.YELLOW,
                    outlineColor: Cesium.Color.WHITE,
                    outlineWidth: 2
                }
            });
            
            var height = document.getElementById("rotateheight").value;
            if(height == ''){
                height = 5000
            }
            handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
            // viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            tips.setVisible(false);
            
            rotateCamera(cartesian,height,rate=0.01)

        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    handler.setInputAction(function(event) { //设置监听方法
        // console.log('MOUSE_MOVE')
        // console.log('event.',event)
        tips.setVisible(true);
        tips.showAt(event.endPosition,'<p>选择旋转点</p>');
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}

function rotateCamera(point, height=5000, rate=0.01){
    //监听鼠标左键，获取当前坐标并创建一个point实体
    var camera = viewer.camera;
    var center = camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2));
    viewer.scene.screenSpaceCameraController.enableInputs = false
    var heading = viewer.scene.camera.heading;
    
    onTickevent = viewer.clock.onTick.addEventListener(function () {
            console.log('rotateCamera onTick')
            heading += rate;
            viewer.camera.lookAt(point, new Cesium.HeadingPitchRange(heading, viewer.scene.camera.pitch,height));
    });

}

技术交流请私信或请加qq群：570055603