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)
        }
      }