Cesium 设置空白处菜单和右键菜单

Glen 997

已于 2024-08-23 11:17:57 修改

阅读量2.4k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： cesium web前端文章标签： cesium 右键菜单右键事件 javascript 事件监听

于 2021-06-01 10:16:04 首次发布

本文链接：https://blog.csdn.net/qq_33302004/article/details/117436322

cesium 同时被 2 个专栏收录

4 篇文章

订阅专栏

web前端

4 篇文章

订阅专栏

本文展示了如何在Cesium中添加右键菜单，包括在空白处和三维场景中的右键事件监听，通过HTML样式定义菜单，并结合JavaScript实现菜单显示与交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、先看效果

二、代码实现

1. 先在html页面中实现两个右键菜单的样式。

2. 设置ceisum中的鼠标右键监听事件

//鼠标右键事件监听
function EventListener_MouseRightClick (handler) {
    handler.setInputAction(function (evt) {

        
        //设置监听方法
        var scene = viewer.scene;
        pick = scene.pick(evt.position);

        // cartesian = scene.pickPosition(evt.position);    // 获取鼠标位置
        // cameraHeight = Math.ceil(viewer.camera.positionCartographic.height);     // 获取相机高度

        if (pick == undefined) {
            console.log("空白处右键菜单");
            document.getElementById("hamburger_example").style.display = ""; //显示div
            //调用页面菜单
            $(document).ready(function () {
                $("body").gizmoMenu({
                menu: "gizmoBurger",
                });
            });
        } else {
            console.log("实体处右键菜单，实体ID为：",pick.id.id);
            document.getElementById("modelRightMenu").innerHTML = "XX" + (pick.id.id).substring(0, 6);
            //显示模型菜单
            document.getElementById("gizmo").style.display = ""; //显示div
            //调用模型菜单
            $(document).ready(function () {
                // MODEL的菜单
                $("body").gizmoMenu({
                menu: "gizmoDropDown",
                });
            });
            viewer.trackedEntity = undefined;
        }

    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
EventListener_MouseRightClick(handler);