cesium 移动线条上的某个点

cesium 鼠标拖动点移动图形

效果图：

GlobalMap.prototype.movePoint = function(p,entity){
    //p 是点击点的位置  entity是点击时的点
    //p -> that.Viewer.entities.getById(entitiesId)._position._value    
    //entity -> that.Viewer.entities.getById(entitiesId)
    let that = this;
    //用矩阵计算移动后的位置
    function getPoint(x=0,y=0,z=0,point) {
        // x、y、z为三个方向要移动的距离，point是要移动的点
        let m =Cesium.Matrix4.fromArray([
            1.0,0,0,0,
            0,1.0,0,0,
            0,0,1.0,0,
            x,y,z,1
        ]);
        return  Cesium.Matrix4.multiplyByPoint(m,point,new Cesium.Cartesian3())
    }
    var startpos = p;
    //计算箭头的终点
    var result_x = getPoint(200000,0,0, p); //x 正方向
    var result_y = getPoint(0,200000,0, p);
    var result_z = getPoint(0,0,200000, p);
    var result_xN = getPoint(-200000,0,0, p); //x 负方向
    var result_yN = getPoint(0,-200000,0, p);
    var result_zN = getPoint(0,0,-200000, p);
    var direction;
    //绘制箭头
    arrow_x = this.Viewer.entities.add({
        polyline: {
            positions: new Cesium.CallbackProperty(()=>{
                return [startpos, result_x]
            },false),
            clampToGround: true,
            width: 20,
            followSurface: false,
            material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.GREEN)
        },
        name:'x+'
    });
    arrow_y = this.Viewer.entities.add({
        polyline: {
            positions: new Cesium.CallbackProperty(()=>{
                return [startpos, result_y]
            },false),
            clampToGround: true,
            width: 20,
            followSurface: false,
            material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED)
        },
        name:'y+'
    });
    arrow_z = this.Viewer.entities.add({
        polyline: {
            positions: new Cesium.CallbackProperty(()=>{
                return [startpos, result_z]
            },false),
            clampToGround: true,
            width: 20,
            followSurface: false,
            material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.BLUE)
        },
        name:'z+'
    });
    arrow_xN = this.Viewer.entities.add({
        polyline: {
            positions: new Cesium.CallbackProperty(()=>{
                return [startpos, result_xN]
            },false),
            clampToGround: true,
            width: 20,
            followSurface: false,
            material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.GREEN)
        },
        name:'x-'
    });
    arrow_yN = this.Viewer.entities.add({
        polyline: {
            positions: new Cesium.CallbackProperty(()=>{
                return [startpos, result_yN]
            },false),
            clampToGround: true,
            width: 20,
            followSurface: false,
            material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED)
        },
        name:'y-'
    });
    arrow_zN = this.Viewer.entities.add({
        polyline: {
            positions: new Cesium.CallbackProperty(()=>{
                return [startpos, result_zN]
            },false),
            clampToGround: true,
            width: 20,
            followSurface: false,
            material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.BLUE)
        },
        name:'z-'
    });


    function move(x=0,y=0,z=0){
        entity.position._value = startpos = getPoint(x,y,z,startpos);
            old_pos.splice(index,1,startpos);
        if(entityType == 'polyline'){
            that.Viewer.entities.getById(graphId).polyline.positions = new Cesium.CallbackProperty(()=>{
                return old_pos; //更新线条位置
            }, false)
        }else {
            that.Viewer.entities.getById(graphId).polygon.hierarchy = new Cesium.CallbackProperty(()=>{
                return new Cesium.PolygonHierarchy(old_pos);
            }, false)
        }
        // ---entity.position._value = startpos = Cesium.Matrix4.multiplyByPoint(getM(x,y,z),startpos,new Cesium.Cartesian3())
        //更新箭头位置
        result_x = getPoint(x,y,z,result_x);
        result_y = getPoint(x,y,z,result_y);
        result_z = getPoint(x,y,z,result_z);
        result_xN = getPoint(x,y,z,result_xN);
        result_yN = getPoint(x,y,z,result_yN);
        result_zN = getPoint(x,y,z,result_zN);

    }
    var leftDownFlag = false;
    var pointDraged;
    var index;
    var entityType;
    Handler = new Cesium.ScreenSpaceEventHandler(this.Viewer.scene.canvas);
    Handler.setInputAction(function (movement) {
        pointDraged = that.Viewer.scene.pick(movement.position);//选取当前的entity
        leftDownFlag = true;
        if (pointDraged) {
        //记录按下去的坐标
        //     startPoint = that.Viewer.scene.pickPosition(movement.position);
            that.Viewer.scene.screenSpaceCameraController.enableRotate = false;//锁定相机

            if(pointDraged.id._polyline && pointDraged.id._polyline._material){
                //判断点的是哪个方向的箭头
                if(pointDraged.id._name){
                    direction = pointDraged.id._name
                }
                //根据点id找图形id
                for(let key in dots){
                    dots[key].forEach(item =>{
                        if(item._id == entity._id){
                            graphId = key
                            return;
                        }
                    })
                }

                if(that.Viewer.entities.getById(graphId).polyline){//如果移动的是线条
                    //old位置
                    if(!old_pos){
                        old_pos = that.Viewer.entities.getById(graphId)._polyline._positions._value
                    }
                    entityType = 'polyline'
                    //记录按下去的点index
                    old_pos.forEach((item,i)=>{
                        var dis = Cesium.Cartesian3.distance (item, startpos)
                        if(dis<3000){
                            index = i  //得到应该移动的点的index
                        }
                    })

                }else if(that.Viewer.entities.getById(graphId).polygon){
                    //old位置
                    if(!old_pos){
                        old_pos = that.Viewer.entities.getById(graphId)._polygon._hierarchy._value.positions
                    }
                    entityType = 'polygon'
                    //记录按下去的点index
                    old_pos.forEach((item,i)=>{
                        var dis = Cesium.Cartesian3.distance (item, startpos)
                        if(dis<3000){
                            index = i
                        }
                    })
                    // coordinates
                }else if(that.Viewer.entities.getById(graphId).rectangle){
                    if(!old_pos){
                        old_pos = that.Viewer.entities.getById(graphId)._polygon._hierarchy._value.positions
                    }
                }


            }

        }
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
    Handler.setInputAction(function (movement) {
        if (leftDownFlag === true && pointDraged != null && direction  && entityType) {
            let x,y,z;
            x = y =z =0;
            let d = direction.substring(0,1);
            if(direction.includes('+')){
                d == 'x' ? x = 2000 : d == 'y'? y = 2000 : z = 2000
            }else {
                d == 'x' ? x = -2000 : d == 'y'? y = -2000 : z = -2000
            }
            move(x,y,z)
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    Handler.setInputAction(function (movement) {

        leftDownFlag = false;
        pointDraged=null;
        index = null;
        entityType = null;
        direction = null;
        that.Viewer.scene.screenSpaceCameraController.enableRotate = true;//解锁相机

    }, Cesium.ScreenSpaceEventType.LEFT_UP);
}