cesium 实现鼠标中键拖动地图

最新推荐文章于 2025-05-03 08:30:00 发布

ZH_CS

最新推荐文章于 2025-05-03 08:30:00 发布

阅读量845

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/ZH_CS/article/details/132470590

前端专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何在Cesium地图应用中修改默认交互方式，将左键用于选点，中键设置为拖动地图，通过自定义事件处理器实现平滑的缩放和移动控制。

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

cesium默认左键拖动地图，中键旋转，再绘图时带来诸多不便。所以改成鼠标中键按下拖动地图，鼠标左键选点。代码如下：【感谢chatGPT】

  //改为中建拖动
  // 假设 viewer 是你的 Cesium Viewer 实例
  const cameraController = viewer.scene.screenSpaceCameraController;

// 关闭默认的左键旋转操作
  cameraController.enableRotate = false;

// 禁用中键的默认倾斜操作
  cameraController.enableTilt = false;

// 创建一个新的事件处理器
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

  let isMiddleDown = false;
  let lastPosition;

  let scale = 0;
  handler.setInputAction((movement) => {
    isMiddleDown = true;
    lastPosition = Cesium.Cartesian3.clone(movement.position);
    const height = viewer.camera.positionCartographic.height;
    const canvas = viewer.scene.canvas;
    // 使用经验公式获取米/(像素值*每米弧度值)
    scale = (height * 0.5) / (canvas.clientHeight * 6371000);
  }, Cesium.ScreenSpaceEventType.MIDDLE_DOWN);

  handler.setInputAction((movement) => {
    isMiddleDown = false;
  }, Cesium.ScreenSpaceEventType.MIDDLE_UP);
  

  handler.setInputAction((movement) => {
    if (isMiddleDown) {
      const dx = movement.endPosition.x - lastPosition.x;
      const dy = movement.endPosition.y - lastPosition.y;

      const deltaPhi = dx * scale;
      const deltaTheta = dy * scale;
      console.log(`dx:${dx};dy${dy};scale:${scale};deltaPhi:${deltaPhi};deltaTheta:${deltaTheta}`)
      viewer.camera.rotateRight(-deltaPhi);
      viewer.camera.rotateUp(-deltaTheta);

      lastPosition = Cesium.Cartesian3.clone(movement.endPosition);
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);