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)
    };