ceisum 鼠标拖拽移动实体

# 效果

完整代码请看下面封装栏

# 基本思路

鼠标拖拽主要化分为3步，分别为鼠标按下事件，鼠标移动事件，鼠标抬起事件。当鼠标按下时获取该实体，当鼠标移动时动态改变实体经纬度，当鼠标抬起时，销毁事件，听起来很简单，现在我们来进行实现

# 实现方法

handlers(){
		this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
		// 鼠标左键按下
        this.leftDownAction()
        // 鼠标移动
        this.mouseMoveAction()
        // 鼠标抬起
        this.leftUpAction()
    }

第一步 ，先来做鼠标按下事件，用cesium中提供的Cesium.ScreenSpaceEventType.LEFT_DOWN 鼠标按下方法。

leftDownAction(){
	let _this = this
	_this.handler.setInputAction(function (movement) {
	  	console.log("鼠标按下")
	 }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
}

当鼠标按下时获取实体，我们现在只拿到了经纬度，这时可以用viewer.scene.pick 来进行获取实体，并锁定相机（需加判断如果不是实体不能锁定相机）

leftDownAction(){
	let _this = this
	_this.handler.setInputAction(function (movement) {
	  	let pick = _this.viewer.scene.pick(movement.position);
	  	if (Cesium.defined(pick) && (pick.id.id) ) {
	  		// 将获取的实体储存起来
	         _this.pick = pick;
	         _this.leftDownFlag = true;
	         // 锁定相机
	         _this.viewer.scene.screenSpaceCameraController.enableRotate = false;//锁定相机
	    }
	 }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
}

现在我们完成了左键按下事件

第二步，我们来完成鼠标移动事件，我们先用ceisum中提供的 Cesium.ScreenSpaceEventType.MOUSE_MOVE 将鼠标移动事件写出来

mouseMoveAction() {
    let _this = this
    _this.handler.setInputAction(function (movement) {
        console.log("鼠标移动事件")
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); 
}

鼠标移动时，我们需要给刚刚左键按下获取的实体动态赋值新的经纬度，这样实体才能跟随鼠标移动，具体实现

mouseMoveAction() {
    let _this = this
    _this.handler.setInputAction(function (movement) {
        if (_this.leftDownFlag === true && _this.pick != null) {
            let ray = _this.viewer.camera.getPickRay(movement.endPosition);
            let cartesian = _this.viewer.scene.globe.pick(ray, _this.viewer.scene);
            //此处根据具体entity来处理，也可能是_this.pick.position=cartesian;看你获取的实体
            _this.pick.id.position=cartesian;/
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); 
}

第三步，我们来完成最后一件，鼠标抬起事件，运用cesium中 Cesium.ScreenSpaceEventType.LEFT_UP来完成

leftUpAction(){
   let _this = this
   _this.handler.setInputAction(function (movement) {
       console.log("鼠标抬起事件")
   }, Cesium.ScreenSpaceEventType.LEFT_UP); 
}

这一步大家都能看懂

leftUpAction(){
   let _this = this
   _this.handler.setInputAction(function (movement) {
       if (_this.leftDownFlag === true && _this.pick != null) {
           _this.leftDownFlag = false;
           _this.pointDraged=null;
           _this.viewer.scene.screenSpaceCameraController.enableRotate = true;//解锁相机
       }
   }, Cesium.ScreenSpaceEventType.LEFT_UP); 
}

# 封装（完整代码）

我们来用es6中class 来进行封装

/**
 * @param {Viewer} viewer
 * 
*/
export default class DragEntity{
    constructor(val){
        this.viewer = val.viewer,
        this.leftDownFlag = false
        this.pick = null;//储存实体
        this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
        this.handlers()
    }
    handlers(){
        this.leftDownAction()
        this.mouseMoveAction()
        this.leftUpAction()
    }
    leftDownAction(){
        let _this = this
        _this.handler.setInputAction(function (movement) {
            let pick = _this.viewer.scene.pick(movement.position); 
            if (Cesium.defined(pick) && (pick.id.id) ) {
                _this.pick = pick
                _this.leftDownFlag = true;
                _this.viewer.scene.screenSpaceCameraController.enableRotate = false;//锁定相机
            }
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
    }

    mouseMoveAction() {
        let _this = this
        _this.handler.setInputAction(function (movement) {
            if (_this.leftDownFlag === true && _this.pick != null) {
                let ray = _this.viewer.camera.getPickRay(movement.endPosition);
                let cartesian = _this.viewer.scene.globe.pick(ray, _this.viewer.scene);
                _this.pick.id.position=cartesian;//此处根据具体entity来处理，也可能是pointDraged.id.position=cartesian;
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); 
    }
    leftUpAction(){
        let _this = this
        _this.handler.setInputAction(function (movement) {
            if (_this.leftDownFlag === true && _this.pick != null) {
                _this.leftDownFlag = false;
                _this.pointDraged=null;
                _this.viewer.scene.screenSpaceCameraController.enableRotate = true;//解锁相机
            }
        }, Cesium.ScreenSpaceEventType.LEFT_UP); 
    }
    //清楚鼠标事件
    updataAction(){
        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);
        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);
        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    }
}

直接调用即可

import DragEntity from './dragentity.js'
let drag = new DragEntity({
    viewer:this.$store.state.viewer, 
})