Cesium 实现Entity的拖拽
引入:有时候我们需要对我们在cesium上绘制的点,线,面等对象微调位置。如果可以直接拖拽对象到指定的位置最方便不过了。思路:1.覆写鼠标事件,其中:leftDownAction(),leftUpAction(),mouseMoveAction()是自定义的函数,有vm是因为使用了Vue。this.viewer.screenSpaceEventHandler.setInputAc...
·
引入:有时候我们需要对我们在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.这样就可以了,上面的代码只实现了基本功能,请结合你的场景做适当调整,如有不正确的地方,欢迎提出改正。
更多推荐
已为社区贡献2条内容
所有评论(0)