cesium 实现鼠标中键拖动地图

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZH_CS

随缘吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值