Cesium 实现Entity的拖拽

引入：有时候我们需要对我们在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.这样就可以了，上面的代码只实现了基本功能，请结合你的场景做适当调整，如有不正确的地方，欢迎提出改正。