Cesium实现Entity的拖拽功能

 我的一篇博客Cesium动态绘制实体（点、标注、面、线、圆、矩形）中绘制的Entity绘制完成后会有要拖拽的需求，本文根据我对位置的理解写了一版动态拖拽的方法

 主要思路要点

     1、动态修改Entity的属性值，可以使用 new Cesium.CallbackProperty 方法，这样修改的好处是修改的时候不会出现闪的情况

····2、在Entity的外部属性中确实是有position属性的，但是在面对polygon、polyline、rectangle这些类型的Entity时，他构造的时候本身就不是用Entity的外部position构造的，它构造完全依赖于各自类型里面自己的属性，例如polygon的hierarchy、polyline的positions

此时就得进去识别改属性

 

 this.dragEntity = function(_view,_moveEndCallBack) {
        var MoveEntity = (function () {
            var leftDownFlag = false;
            var pointDraged = null;
            var viewer;
            var handler,cartesian;
            var startPoint;
            var polylinePreviousCoordinates;
            var polygonPreviousCoordinates;
            var rectanglePreviousCoordinates={};
            function ConstructMoveEntity(options,_moveEndCallBack) {
                viewer = options.viewer;
                handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                Init();
            }

            function Init() {
                // Select plane when mouse down
                handler.setInputAction(function (movement) {
                    pointDraged = viewer.scene.pick(movement.position);//选取当前的entity
                    leftDownFlag = true;
                    if (pointDraged) {
                        //记录按下去的坐标
                        startPoint = viewer.scene.pickPosition(movement.position);
                        viewer.scene.screenSpaceCameraController.enableRotate = false;//锁定相机
                        //当前实体Entity的polyline坐标属性信息暂存
                        if(pointDraged.id.polyline){
                            polylinePreviousCoordinates=pointDraged.id.polyline.positions.getValue();
                        }
                        if(pointDraged.id.polygon){
                            polygonPreviousCoordinates = pointDraged.id.polygon.hierarchy.getValue();
                        }
                        if(pointDraged.id.rectangle){
                            rectanglePreviousCoordinates=pointDraged.id.rectangle.coordinates.getValue();
                        }
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

                // Release plane on mouse up
                handler.setInputAction(function () {
                    leftDownFlag = false;
                    pointDraged = null;
                    viewer.scene.screenSpaceCameraController.enableInputs = true;
                    viewer.scene.screenSpaceCameraController.enableRotate = true;//锁定相机
                    if(_moveEndCallBack){
                        _moveEndCallBack(cartesian)
                    }
                    handler.destroy();
                }, Cesium.ScreenSpaceEventType.LEFT_UP);
                // Update plane on mouse move
                handler.setInputAction(function (movement) {
                    if (leftDownFlag === true && pointDraged != null) {
                        //记录尾随的坐标
                        let startPosition = viewer.scene.pickPosition(movement.startPosition);
                        let endPosition = viewer.scene.pickPosition(movement.endPosition);
                        pointDraged.id.position = new Cesium.CallbackProperty(function () {
                            return endPosition;
                        }, false);//防止闪烁，在移动的过程console.log(pointDraged.id);
                        //计算每次的偏差
                        let changed_x = endPosition.x-startPosition.x;
                        let changed_y = endPosition.y-startPosition.y;
                        let changed_z = endPosition.z-startPosition.z;

                        if(pointDraged.id.polyline){
                            let currentsPoint=[];
                            for(let i=0;i<polylinePreviousCoordinates.length;i++){
                                //与之前的算差 替换掉
                                polylinePreviousCoordinates[i].x=polylinePreviousCoordinates[i].x+changed_x;
                                polylinePreviousCoordinates[i].y=polylinePreviousCoordinates[i].y+changed_y;
                                polylinePreviousCoordinates[i].z=polylinePreviousCoordinates[i].z+changed_z;
                                currentsPoint.push(polylinePreviousCoordinates[i])
                            }
                            pointDraged.id.polyline.positions=new Cesium.CallbackProperty(function () {
                                return currentsPoint;
                            }, false);
                        }

                        if(pointDraged.id.polygon){
                            let currentsPoint=[];
                            for(let i=0;i<polygonPreviousCoordinates.length;i++){
                                polygonPreviousCoordinates[i].x=polygonPreviousCoordinates[i].x+changed_x;
                                polygonPreviousCoordinates[i].y=polygonPreviousCoordinates[i].y+changed_y;
                                polygonPreviousCoordinates[i].z=polygonPreviousCoordinates[i].z+changed_z;
                                currentsPoint.push(polygonPreviousCoordinates[i])
                            }
                            pointDraged.id.polygon.hierarchy=new Cesium.CallbackProperty(function () {
                                return currentsPoint;
                            }, false);
                        }

                        if(pointDraged.id.rectangle){
                            let storePoint={};

                            let position_start = startPosition;
                            let cartographic_start = Cesium.Cartographic.fromCartesian(position_start);
                            let longitude_start = Cesium.Math.toDegrees(cartographic_start.longitude);
                            let latitude_start = Cesium.Math.toDegrees(cartographic_start.latitude);
                            let height_start = cartographic_start.height;

                            let position_end = endPosition;
                            let cartographic_end = Cesium.Cartographic.fromCartesian(position_end);
                            let longitude_end = Cesium.Math.toDegrees(cartographic_end.longitude);
                            let latitude_end = Cesium.Math.toDegrees(cartographic_end.latitude);
                            let height_end = cartographic_end.height;

                            let changer_lng = longitude_end-longitude_start;
                            let changer_lat = latitude_end-latitude_start;


                            rectanglePreviousCoordinates.west = Cesium.Math.toRadians(Cesium.Math.toDegrees(rectanglePreviousCoordinates.west)+changer_lng);

                            rectanglePreviousCoordinates.east = Cesium.Math.toRadians(Cesium.Math.toDegrees(rectanglePreviousCoordinates.east)+changer_lng);

                            rectanglePreviousCoordinates.south = Cesium.Math.toRadians(Cesium.Math.toDegrees(rectanglePreviousCoordinates.south)+changer_lat);
                            rectanglePreviousCoordinates.north = Cesium.Math.toRadians(Cesium.Math.toDegrees(rectanglePreviousCoordinates.north)+changer_lat);
                            storePoint =  rectanglePreviousCoordinates;

                            pointDraged.id.rectangle.coordinates=new Cesium.CallbackProperty(function () {
                                // storePoint=new Cesium.Rectangle.fromDegrees(storePoint.west,storePoint.south,storePoint.east,storePoint.north);
                                // console.log(storePoint);
                                // console.log(rectanglePreviousCoordinates);
                                // console.log(Cesium.Rectangle.fromDegrees(rectanglePreviousCoordinates.west, rectanglePreviousCoordinates.south, rectanglePreviousCoordinates.east, rectanglePreviousCoordinates.north));
                                // console.log('-----------------');

                               return storePoint;
                                // return Cesium.Rectangle.fromDegrees(rectanglePreviousCoordinates.west, rectanglePreviousCoordinates.south, rectanglePreviousCoordinates.east, rectanglePreviousCoordinates.north);
                            }, false);
                            pointDraged.id.rectangle.height = new Cesium.CallbackProperty(function () {
                               return height_end;
                            }, false);


                        }

                        if(pointDraged.id.ellipse){
                            let position_end = endPosition;
                            let cartographic_end = Cesium.Cartographic.fromCartesian(position_end);
                            let height_end = cartographic_end.height;
                            pointDraged.id.ellipse.height = new Cesium.CallbackProperty(function () {
                                return height_end;
                            }, false);
                        }

                    }
                }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            }
            return ConstructMoveEntity;
        })();
        MoveEntity({'viewer': _view},_moveEndCallBack)
    };