cesium 实现鼠标中键拖动地图

发布于:2023-08-24 ⋅ 阅读:(264) ⋅ 点赞:(0)

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


网站公告

今日签到

点亮在社区的每一天
去签到