cesium动态创建圆和矩形

cesium鼠标动态绘制线、面、圆、矩形；其他entity类型依此原理

 var activeShapePoints = [];

        var activeShape;

        var floatingPoint;

        var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

        //双击鼠标左键清除默认事件

        viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(

            Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK

        );

        //绘制点

        function createPoint(worldPosition) {

            var point = viewer.entities.add({

                position: worldPosition,

                point: {

                    color: Cesium.Color.WHITE,

                    pixelSize: 5,

                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,

                },

            });

            return point;

        }

        //初始化为线

        var drawingMode = 'circle';

        //绘制图形

        function drawShape(positionData) {

            var shape;

            if (drawingMode === 'line') {

                shape = viewer.entities.add({

                    polyline: {

                        positions: positionData,

                        clampToGround: true,

                        width: 3,

                    },

                });

            } else if (drawingMode === 'polygon') {

                shape = viewer.entities.add({

                    polygon: {

                        hierarchy: positionData,

                        material: new Cesium.ColorMaterialProperty(

                            Cesium.Color.WHITE.withAlpha(0.7)

                        ),

                    },

                });

            } else if (drawingMode === 'circle') {

                //当positionData为数组时绘制最终图，如果为function则绘制动态图

                var value =

                    typeof positionData.getValue === 'function' ?

                    positionData.getValue(0) :

                    positionData;

                //var start = activeShapePoints[0];

                //var end = activeShapePoints[activeShapePoints.length - 1];

                //var r = Math.sqrt(Math.pow(start.x - end.x, 2) + Math.pow(start.y - end.y, 2));

                //r = r ? r : r + 1;

                shape = viewer.entities.add({

                    position: activeShapePoints[0],

                    name: 'circle',

                    ellipse: {

                        semiMinorAxis: new Cesium.CallbackProperty(function() {

                            //半径 两点间距离

                            var r = Math.sqrt(

                                Math.pow(value[0].x - value[value.length - 1].x, 2) +

                                Math.pow(value[0].y - value[value.length - 1].y, 2)

                            );

                            return r ? r : r + 1;

                        }, false),

                        semiMajorAxis: new Cesium.CallbackProperty(function() {

                            var r = Math.sqrt(

                                Math.pow(value[0].x - value[value.length - 1].x, 2) +

                                Math.pow(value[0].y - value[value.length - 1].y, 2)

                            );

                            return r ? r : r + 1;

                        }, false),

                        material: Cesium.Color.BLUE.withAlpha(0.5),

                        outline: true,

                    },

                });

            } else if (drawingMode === 'rectangle') {

                //当positionData为数组时绘制最终图，如果为function则绘制动态图

                var arr =

                    typeof positionData.getValue === 'function' ?

                    positionData.getValue(0) :

                    positionData;

                shape = viewer.entities.add({

                    name: 'rectangle',

                    rectangle: {

                        coordinates: new Cesium.CallbackProperty(function() {

                            var obj = Cesium.Rectangle.fromCartesianArray(arr);

                            //if(obj.west==obj.east){ obj.east+=0.000001};

                            //if(obj.south==obj.north){obj.north+=0.000001};

                            return obj;

                        }, false),

                        material: Cesium.Color.RED.withAlpha(0.5),

                    },

                });

            }

            return shape;

        }

        //鼠标左键

        handler.setInputAction(function(event) {

            var earthPosition = viewer.scene.pickPosition(event.position);

            if (Cesium.defined(earthPosition)) {

                if (activeShapePoints.length === 0) {

                    floatingPoint = createPoint(earthPosition);

                    activeShapePoints.push(earthPosition);

                    var dynamicPositions = new Cesium.CallbackProperty(function() {

                        if (drawingMode === 'polygon') {

                            return new Cesium.PolygonHierarchy(activeShapePoints);

                        }

                        return activeShapePoints;

                    }, false);

                    activeShape = drawShape(dynamicPositions); //绘制动态图

                }

                activeShapePoints.push(earthPosition);

                createPoint(earthPosition);

            }

        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        //鼠标移动

        handler.setInputAction(function(event) {

            if (Cesium.defined(floatingPoint)) {

                var newPosition = viewer.scene.pickPosition(event.endPosition);

                if (Cesium.defined(newPosition)) {

                    floatingPoint.position.setValue(newPosition);

                    activeShapePoints.pop();

                    activeShapePoints.push(newPosition);

                }

            }

        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        //清除事件

        function removeAll() {

            activeShapePoints.pop(); //去除最后一个动态点

            if (activeShapePoints.length) {

                drawShape(activeShapePoints); //绘制最终图

            }

            viewer.entities.remove(floatingPoint); //去除动态点图形（当前鼠标点）

            viewer.entities.remove(activeShape); //去除动态图形

            floatingPoint = undefined;

            activeShape = undefined;

            activeShapePoints = [];

        }

        //鼠标右键结束绘制动作

        handler.setInputAction(function(event) {

            removeAll();

        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

        function addxian() {

            drawingMode = 'line';

        }

        function addmian() {

            drawingMode = 'polygon';

        }

        function addyuan() {

            drawingMode = 'circle';

        }

        function addjuxing() {

            drawingMode = 'rectangle';

        }