Cesium实现右键弹出菜单

一、实现思路

1.创建菜单容器，设置好样式，并隐藏

2.监听鼠标右键事件，控制菜单的显隐性

二、实现代码

1.创建菜单

代码如下：

 <div id="menu" v-show="menuVisible" :style="{ left: menuX + 'px', top: menuY + 'px' }" style="position: absolute; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 10px;">
  <ul style="list-style-type: none; padding: 0;">
    <li style="padding: 5px;"><a href="javascript:void(0);" style="text-decoration: none; color: #333;"  @click="startRotateCamera()">绕点旋转</a></li>
    <li style="padding: 5px;"><a href="javascript:void(0)" style="text-decoration: none; color: #333;" @click="stopRotateCamera()">停止旋转</a></li>
    <li style="padding: 5px;"><a href="javascript:void(0);" style="text-decoration: none; color: #333;" @click="opendepthTestAgainstTerrain">开启地形深度监测</a></li>
    <li style="padding: 5px;"><a href="javascript:void(0);" style="text-decoration: none; color: #333;" @click="closedepthTestAgainstTerrain()">关闭地形深度监测</a></li>
  </ul>
</div>

2.设置菜单的显隐性

const menuVisible = ref(false);
const menuX = ref(0);
const menuY = ref(0);
const showMenu = (e) => {
  e.preventDefault();
  menuVisible.value = true;
  menuX.value = e.clientX;
  menuY.value = e.clientY;
};
const hideMenu = () => {
  menuVisible.value = false;
};

3.监听鼠标点击事件

  cesiumcontainer = document.getElementById('cesiumContainer');
  cesiumcontainer.addEventListener('contextmenu', showMenu);
  document.addEventListener('click', hideMenu);

三、实现效果

总结

本文是对自己学习过程的一个总结记录，大家相互学习。