引入有时候我们需要对我们在cesium上绘制的点,线,面等对象微调位置。如果可以直接拖拽对象到指定的位置最方便不过了。

思路

1.覆写鼠标事件,其中:leftDownAction(),leftUpAction(),mouseMoveAction()是自定义的函数,有vm是因为使用了Vue。

 this.viewer.screenSpaceEventHandler
.setInputAction(vm.leftDownAction, Cesium.ScreenSpaceEventType.LEFT_DOWN);
      this.viewer.screenSpaceEventHandler
.setInputAction(vm.leftUpAction, Cesium.ScreenSpaceEventType.LEFT_UP);
      this.viewer.screenSpaceEventHandler
.setInputAction(vm.mouseMoveAction, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

2.定义一个全局变量:var  isLeftDown=false;来标识是否鼠标左键已经按下,定义一个全局变量:var  pointDraged;来表示拖拽的对象。

3.下面详细说下三个自定义函数:

  • leftDownAction():
    leftDownAction(e) {
            console.log("左键按下");
            pointDraged = this.viewer.scene.pick(e.position);//选取当前的entity
            leftDownFlag = true;
            if (pointDraged) {
              this.viewer.scene.screenSpaceCameraController.enableRotate = false;//锁定相机
            }
          }

     

  • leftUpAction():
     leftUpAction(e) {
            console.log("左键抬起");
            leftDownFlag = false;
            pointDraged=null;
            this.viewer.scene.screenSpaceCameraController.enableRotate = true;//解锁相机
          }
  • mouseMoveAction():
    mouseMoveAction(e) {
            if (leftDownFlag === true && pointDraged != null) {
              console.log("鼠标移动");
              let ray = this.viewer.camera.getPickRay(e.endPosition);
              let cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
                console.log(cartesian);
                pointDraged .position=cartesian;//此处根据具体entity来处理,也可能是pointDraged.id.position=cartesian;
              }

     

 

4.这样就可以了,上面的代码只实现了基本功能,请结合你的场景做适当调整,如有不正确的地方,欢迎提出改正。

Logo

前往低代码交流专区

更多推荐