Cesium 处理屏幕空间事件(鼠标点击、移动、滚轮)的示例

  • 鼠标点击事件通过LEFT_CLICK类型监听,使用drillPick方法获取点击的对象并打印其名称。
  • 鼠标移动事件通过MOUSE_MOVE类型监听,使用pickEllipsoid方法获取鼠标位置对应的经纬度并打印。
  • 鼠标滚轮事件通过WHEEL类型监听,通过调整相机的高度来实现缩放效果。
javascript 复制代码
const viewerDivRef = ref<HTMLDivElement>()
// 初始化Cesium Viewer
      viewer = new Cesium.Viewer(cesiumContainer.value, {
      timeline: true,
      animation: true,
      shouldAnimate: true,
      homeButton: false, // 是否显示Home按钮
      fullscreenButton: false, // 是否显示全屏按钮
      baseLayerPicker: true, // 是否显示图层选择控件
      geocoder: false, // 是否显示地名查找控件
      sceneModePicker: false, // 是否显示投影方式控件
      navigationHelpButton: false, // 是否显示帮助信息控件
      infoBox: false, // 是否显示点击要素之后显示的信息
      requestRenderMode: true, // 启用请求渲染模式
      scene3DOnly: false, // 每个几何实例将只能以3D渲染以节省GPU内存
      sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
      });
 // 鼠标点击事件
      viewer.screenSpaceEventHandler.setInputAction((movement) => {
        const pickedObjects = viewer.scene.drillPick(movement.position);
        if (pickedObjects.length > 0) {
          const pickedObject = pickedObjects[0];
          console.log('点击了:', pickedObject.name);
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      // 鼠标移动事件
      viewer.screenSpaceEventHandler.setInputAction((movement) => {
        const cartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
        if (cartesian) {
          const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
          const longitude = Cesium.Math.toDegrees(cartographic.longitude);
          const latitude = Cesium.Math.toDegrees(cartographic.latitude);
          console.log('鼠标移动到经纬度:', longitude, latitude);
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 鼠标滚轮事件
      viewer.screenSpaceEventHandler.setInputAction((wheel) => {
        const camera = viewer.camera;
        const distance = camera.positionCartographic.height;
        const newDistance = distance * (1 - wheel.delta * 0.1);
        camera.setView({
          destination: Cesium.Cartesian3.fromRadians(camera.positionCartographic.longitude, camera.positionCartographic.latitude, newDistance)
        });
      }, Cesium.ScreenSpaceEventType.WHEEL);

// 强制刷新场景
        try {
          if (viewer && viewer.scene) {
            viewer.scene.requestRender()
            setTimeout(() => {
              if (viewer && viewer.scene) {
                viewer.scene.requestRender()
              }
            }, 0)
          }
        } catch (e) {
          console.warn('刷新场景时出错:', e)
        }
      }
相关推荐
时间的情敌2 分钟前
Cesium 流动管线、管道动画、管线流向仿真,管网、油气、水利孪生高频需求
前端·交互·cesium
yuyuxun14 分钟前
协同过滤的校园二手物品智能推荐系统的设计与实现 毕业设计-附源码40082
javascript·vue.js·spring boot·python·数据分析·django·课程设计
wangxiaoxuan2172 小时前
SLAM 的基本结构:前端、后端、回环与地图优化
前端·机器人·科沃斯八界
总要学点什么3 小时前
第105篇:三维特效-流动图片墙体效果——让箭头沿墙长滚,它俩竟是同一份代码
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
Agent世界5 小时前
用 CDP 做发布自动化:四道机器闸门与产物验收
前端·javascript
FungLeo5 小时前
成为全栈·Vue 管理后台篇·编辑器图片上传:从文件选择到文章附件关联
前端·vue.js·编辑器·markdown·文件上传·formdata·附件管理
总要学点什么5 小时前
第104篇:三维特效-流动墙体效果——让贴图沿墙流动,它却只肯走一条对角线
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
某哈压力大5 小时前
SSH 突然 Connection reset?不是密钥坏了,是 OpenSSL 把 sshd 干趴了
前端·node.js·命令行
程序员大阳5 小时前
副队长ES6+教程(3)--解构赋值
前端·javascript·es6·赋值·解构
神膘护体小月半5 小时前
css - 元素背景图由 hover 触发,初次加载时闪动的解决办法
前端·javascript·css