easy-three-utils 0.0.331 → 0.0.332

package/cesium/js/measure.js

@@ -0,0 +1,753 @@
+import * as Cesium from 'cesium'
+import * as turf from "@turf/turf";
+
+class MeasureDistance {
+    constructor(viewer) {
+        this.viewer = viewer;
+        this.initEvents();
+        this.positions = [];
+        this.tempPositions = [];
+        this.vertexEntities = [];
+        this.labelEntity = undefined;
+        this.measureDistance = 0;
+    }
+
+    initEvents() {
+        this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
+        this.MeasureStartEvent = new Cesium.Event();
+        this.MeasureEndEvent = new Cesium.Event();
+    }
+
+    activate() {
+        this.deactivate();
+        this.registerEvents();
+        this.viewer.enableCursorStyle = false;
+        this.viewer._element.style.cursor = 'default';
+        this.isMeasure = true;
+        this.measureDistance = 0;
+    }
+
+    deactivate() {
+        if (!this.isMeasure) return;
+        this.unRegisterEvents();
+        this.viewer._element.style.cursor = 'pointer';
+        this.viewer.enableCursorStyle = true;
+        this.isMeasure = false;
+        this.tempPositions = [];
+        this.positions = [];
+    }
+
+    clear() {
+        this.viewer.entities.remove(this.lineEntity);
+        this.lineEntity = undefined;
+
+        this.vertexEntities.forEach(item => {
+            this.viewer.entities.remove(item);
+        });
+        this.vertexEntities = [];
+    }
+
+    createLineEntity() {
+        this.lineEntity = this.viewer.entities.add({
+            polyline: {
+                positions: new Cesium.CallbackProperty(e => {
+                    return this.tempPositions;
+                }, false),
+                width: 2,
+                material: Cesium.Color.YELLOW,
+                depthFailMaterial: Cesium.Color.YELLOW
+            }
+        })
+    }
+
+    createVertex() {
+        let vertexEntity = this.viewer.entities.add({
+            position: this.positions[this.positions.length - 1],
+            id: "MeasureDistanceVertex" + this.positions[this.positions.length - 1],
+            type: "MeasureDistanceVertex",
+            label: {
+                text: spaceDistance(this.positions) + "米",
+                scale: 0.5,
+                font: 'normal 24px MicroSoft YaHei',
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
+                scaleByDistance: new Cesium.NearFarScalar(1000, 1, 3000, 0.4),
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                pixelOffset: new Cesium.Cartesian2(0, -30),
+                outlineWidth: 9,
+                outlineColor: Cesium.Color.WHITE
+            },
+            point: {
+                color: Cesium.Color.FUCHSIA,
+                pixelSize: 8,
+                disableDepthTestDistance: 500,
+            },
+        });
+        this.vertexEntities.push(vertexEntity);
+    }
+
+    createStartEntity() {
+        let vertexEntity = this.viewer.entities.add({
+            position: this.positions[0],
+            type: "MeasureDistanceVertex",
+            billboard: {
+                scaleByDistance: new Cesium.NearFarScalar(300, 1, 1200, 0.4),
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000),
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+            },
+            point: {
+                color: Cesium.Color.FUCHSIA,
+                pixelSize: 6,
+            },
+        });
+        this.vertexEntities.push(vertexEntity);
+    }
+
+    createEndEntity() {
+        let lastLabel = this.viewer.entities.getById("MeasureDistanceVertex" + this.positions[this.positions.length - 1]);
+        this.viewer.entities.remove(lastLabel);
+        this.viewer.entities.remove(this.moveVertexEntity);
+
+        let vertexEntity = this.viewer.entities.add({
+            position: this.positions[this.positions.length - 1],
+            type: "MeasureDistanceVertex",
+            label: {
+                text: "总距离：" + spaceDistance(this.positions) + "米",
+                scale: 0.5,
+                font: 'normal 26px MicroSoft YaHei',
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
+                scaleByDistance: new Cesium.NearFarScalar(1000, 1, 3000, 0.4),
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                pixelOffset: new Cesium.Cartesian2(0, -50),
+                outlineWidth: 9,
+                outlineColor: Cesium.Color.WHITE,
+                eyeOffset: new Cesium.Cartesian3(0, 0, -10)
+            },
+            billboard: {
+                image: "../../static/images/end.png",
+                scaleByDistance: new Cesium.NearFarScalar(300, 1, 1200, 0.4),
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000),
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+            },
+            point: {
+                color: Cesium.Color.FUCHSIA,
+                pixelSize: 6,
+            },
+        });
+        this.vertexEntities.push(vertexEntity);
+    }
+
+    registerEvents() {
+        this.leftClickEvent();
+        this.rightClickEvent();
+        this.mouseMoveEvent();
+    }
+
+    leftClickEvent() {
+        this.handler.setInputAction(e => {
+            this.viewer._element.style.cursor = 'default';
+            let position = this.viewer.scene.pickPosition(e.position);
+            if (!position) {
+                const ellipsoid = this.viewer.scene.globe.ellipsoid;
+                position = this.viewer.scene.camera.pickEllipsoid(e.position, ellipsoid);
+            }
+            if (!position) return;
+            this.positions.push(position);
+            if (this.positions.length == 1) { 
+                this.createLineEntity();
+                this.createStartEntity();
+                return;
+            }
+            this.createVertex();
+
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    }
+
+    mouseMoveEvent() {
+        this.handler.setInputAction(e => {
+            if (!this.isMeasure) return;
+            this.viewer._element.style.cursor = 'default';
+            let position = this.viewer.scene.pickPosition(e.endPosition);
+            if (!position) {
+                position = this.viewer.scene.camera.pickEllipsoid(e.startPosition, this.viewer.scene.globe.ellipsoid);
+            }
+            if (!position) return;
+            this.handleMoveEvent(position);
+        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+    }
+
+    handleMoveEvent(position) {
+        if (this.positions.length < 1) return;
+        this.tempPositions = this.positions.concat(position);
+    }
+
+    rightClickEvent() {
+        this.handler.setInputAction(e => {
+            if (!this.isMeasure || this.positions.length < 1) {
+                this.deactivate();
+                this.clear();
+            } else {
+                this.createEndEntity();
+                this.lineEntity.polyline = {
+                    positions: this.positions,
+                    width: 2,
+                    material: Cesium.Color.YELLOW,
+                    depthFailMaterial: Cesium.Color.YELLOW
+                };
+                this.measureEnd();
+            }
+
+        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+    }
+
+    measureEnd() {
+        this.deactivate();
+        this.MeasureEndEvent.raiseEvent(this.measureDistance);
+    }
+
+    unRegisterEvents() {
+        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+    }
+}
+
+class MeasureHeight {
+    constructor(viewer) {
+        this.viewer = viewer;
+        this.initEvents();
+        this.positions = [];
+        this.vertexEntities = [];
+        this.labelEntity = undefined;
+        this.measureHeight = 0;
+    }
+
+    initEvents() {
+        this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
+        this.MeasureStartEvent = new Cesium.Event();
+        this.MeasureEndEvent = new Cesium.Event();
+    }
+
+    activate() {
+        this.deactivate();
+        this.registerEvents();
+        this.viewer.enableCursorStyle = false;
+        this.viewer._element.style.cursor = 'default';
+        this.isMeasure = true;
+        this.circleRadius = 0.1;
+        this.measureHeight = 0;
+        this.positions = [];
+    }
+
+    deactivate() {
+        if (!this.isMeasure) return;
+        this.unRegisterEvents();
+        this.viewer._element.style.cursor = 'pointer';
+        this.viewer.enableCursorStyle = true;
+        this.isMeasure = false;
+    }
+
+    clear() {
+        this.viewer.entities.remove(this.lineEntity);
+        this.lineEntity = undefined;
+
+        this.viewer.entities.remove(this.labelEntity);
+        this.labelEntity = undefined;
+
+        this.removeCircleEntity();
+
+        this.vertexEntities.forEach(item => {
+            this.viewer.entities.remove(item);
+        });
+        this.vertexEntities = [];
+    }
+
+    createLineEntity() {
+        this.lineEntity = this.viewer.entities.add({
+            polyline: {
+                positions: new Cesium.CallbackProperty(e => {
+                    return this.positions;
+                }, false),
+                width: 3,
+                material: Cesium.Color.fromCssColorString("rgb(249, 157, 11)")
+            }
+        })
+    }
+
+    createVertex(index) {
+        const vertexEntity = this.viewer.entities.add({
+            position: new Cesium.CallbackProperty(e => {
+                return this.positions[index];
+            }, false),
+            type: "MeasureHeightVertex",
+            point: {
+                color: Cesium.Color.fromCssColorString("rgb(249, 157, 11)"),
+                outlineColor: Cesium.Color.WHITE,
+                outlineWidth: 2,
+                pixelSize: 10
+            }
+        });
+        this.vertexEntities.push(vertexEntity);
+    }
+
+    createLabel() {
+        this.labelEntity = this.viewer.entities.add({
+            position: new Cesium.CallbackProperty(e => {
+                return this.positions[1];
+            }, false),
+            label: {
+                text: "",
+                scale: 0.5,
+                font: 'normal 40px MicroSoft YaHei',
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
+                scaleByDistance: new Cesium.NearFarScalar(500, 1, 1500, 0.4),
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                pixelOffset: new Cesium.Cartesian2(0, -30),
+                outlineWidth: 9,
+                outlineColor: Cesium.Color.WHITE
+            }
+        })
+    }
+
+    createCircleEntitiy() {
+        this.circleEntity = this.viewer.entities.add({
+            position: new Cesium.CallbackProperty(e => {
+                return this.positions[this.positions.length - 1];
+            }, false),
+            ellipse: {
+                height: new Cesium.CallbackProperty(e => {
+                    return this.getPositionHeight(this.positions[this.positions.length - 1]);
+                }, false),
+                semiMinorAxis: new Cesium.CallbackProperty(e => {
+                    return this.circleRadius;
+                }, false),
+                semiMajorAxis: new Cesium.CallbackProperty(e => {
+                    return this.circleRadius;
+                }, false),
+                material: Cesium.Color.YELLOW.withAlpha(0.5)
+            },
+        });
+    }
+
+    getPositionHeight(position) {
+        const cartographic = Cesium.Cartographic.fromCartesian(position);
+        return cartographic.height;
+    }
+
+    removeCircleEntity() {
+        this.viewer.entities.remove(this.circleEntity);
+        this.circleEntity = undefined;
+    }
+
+    registerEvents() {
+        this.leftClickEvent();
+        this.rightClickEvent();
+        this.mouseMoveEvent();
+    }
+
+    leftClickEvent() {
+        this.handler.setInputAction(e => {
+            this.viewer._element.style.cursor = 'default';
+            let position = this.viewer.scene.pickPosition(e.position);
+            if (!position) {
+                const ellipsoid = this.viewer.scene.globe.ellipsoid;
+                position = this.viewer.scene.camera.pickEllipsoid(e.position, ellipsoid);
+            }
+            if (!position) return;
+
+            if (this.positions.length == 0) {
+                this.positions.push(position);
+                this.createVertex(0);
+                this.createLineEntity();
+                this.createCircleEntitiy();
+                this.createLabel();
+            } else {
+                this.measureEnd();
+                this.removeCircleEntity()
+            }
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    }
+
+    mouseMoveEvent() {
+        this.handler.setInputAction(e => {
+            if (!this.isMeasure) return;
+            this.viewer._element.style.cursor = 'default';
+            let position = this.viewer.scene.pickPosition(e.endPosition);
+            if (!position) {
+                position = this.viewer.scene.camera.pickEllipsoid(e.startPosition, this.viewer.scene.globe.ellipsoid);
+            }
+            if (!position) return;
+            this.handleMoveEvent(position);
+        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+    }
+
+    cartesian3Point3(pos) {
+        const ellipsoid = this.viewer.scene.globe.ellipsoid;
+        const cartographic = ellipsoid.cartesianToCartographic(pos);
+        const lng = Cesium.Math.toDegrees(cartographic.longitude);
+        const lat = Cesium.Math.toDegrees(cartographic.latitude);
+        const alt = cartographic.height;
+
+        return [lng, lat, alt]
+    }
+
+    getDistanceH(p1, p2) {
+        if (!p1 || !p2) return 2;
+        let distance = Cesium.Cartesian3.distance(p1, p2);
+        let p2Car = this.cartesian3Point3(p2);
+        let radius = Math.sqrt(Math.abs(Math.pow(distance, 2) - Math.pow(p2Car[2], 2)));
+        return radius;
+    }
+
+    handleMoveEvent(position) {
+        if (this.positions.length < 1) return;
+        let firstPoint = this.cartesian3Point3(this.positions[0])
+        let movePoint = this.cartesian3Point3(position)
+        const h = movePoint[2] - firstPoint[2];
+        firstPoint[2] = movePoint[2];
+        const twoPosition = Cesium.Cartesian3.fromDegrees(firstPoint[0], firstPoint[1], movePoint[2]);
+        if (this.positions.length < 2) {
+            this.positions.push(twoPosition, position);
+            this.createVertex(1);
+            this.createVertex(2);
+        } else {
+            this.positions[1] = twoPosition;
+            this.positions[2] = position;
+            this.measureHeight = h.toFixed(3);
+            this.labelEntity.label.text = "高度：" + this.measureHeight + " 米"
+        }
+
+        this.circleRadius = 20
+    }
+
+    rightClickEvent() {
+        this.handler.setInputAction(e => {
+            if (this.isMeasure) {
+                this.deactivate();
+                this.clear();
+            }
+        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+    }
+
+    measureEnd() {
+        this.deactivate();
+        this.MeasureEndEvent.raiseEvent(this.measureHeight);
+    }
+
+    unRegisterEvents() {
+        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+    }
+}
+
+class MeasureArea {
+    constructor(viewer) {
+        this.viewer = viewer;
+        this.initEvents();
+        this.positions = [];
+        this.tempPositions = [];
+        this.vertexEntities = [];
+        this.labelEntity = undefined;
+        this.measureArea = 0;
+    }
+
+    initEvents() {
+        this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
+        this.MeasureStartEvent = new Cesium.Event();
+        this.MeasureEndEvent = new Cesium.Event();
+    }
+
+    activate() {
+        this.deactivate();
+        this.registerEvents();
+        this.viewer.enableCursorStyle = false;
+        this.viewer._element.style.cursor = 'default';
+        this.isMeasure = true;
+        this.measureArea = 0;
+    }
+
+    deactivate() {
+        if (!this.isMeasure) return;
+        this.unRegisterEvents();
+        this.viewer._element.style.cursor = 'pointer';
+        this.viewer.enableCursorStyle = true;
+        this.isMeasure = false;
+        this.tempPositions = [];
+        this.positions = [];
+        this.height = undefined;
+    }
+
+    clear() {
+        this.viewer.entities.remove(this.polygonEntity);
+        this.polygonEntity = undefined;
+
+        this.vertexEntities.forEach(item => {
+            this.viewer.entities.remove(item);
+        });
+        this.vertexEntities = [];
+
+        this.viewer.entities.remove(this.mesureResultEntity);
+        this.mesureResultEntity = undefined;
+
+        this.height = undefined;
+    }
+
+    createPolygonEntity() {
+        this.polygonEntity = this.viewer.entities.add({
+            polygon: {
+                hierarchy: new Cesium.CallbackProperty(e => {
+                    return new Cesium.PolygonHierarchy(this.tempPositions);
+                }, false),
+                material: Cesium.Color.fromCssColorString("rgb(249, 157, 11,.6)")
+            },
+            polyline: {
+                clampToGround: true,
+                positions: new Cesium.CallbackProperty(e => {
+                    return this.tempPositions.concat(this.tempPositions[0]);
+                }, false),
+                width: 1,
+                material: new Cesium.PolylineOutlineMaterialProperty({
+                    outlineWidth: 2,
+                    outlineColor: Cesium.Color.WHITE,
+                })
+            }
+        })
+    }
+
+    createVertex() {
+        const vertexEntity = this.viewer.entities.add({
+            position: this.positions[this.positions.length - 1],
+            type: "MeasureAreaVertex",
+            point: {
+                color: Cesium.Color.fromCssColorString("rgb(249, 157, 11)"),
+                outlineColor: Cesium.Color.WHITE,
+                outlineWidth: 2,
+                pixelSize: 10,
+                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
+            }
+        });
+        this.vertexEntities.push(vertexEntity);
+    }
+
+    createResultLabel() {
+        this.mesureResultEntity = this.viewer.entities.add({
+            position: new Cesium.CallbackProperty(e => {
+                return this.getCenterPosition()
+            }, false),
+            type: "MeasureAreaResult",
+            label: {
+                text: new Cesium.CallbackProperty(e => {
+                    return "面积" + this.computeArea(this.tempPositions);
+                }, false),
+                scale: 0.5,
+                font: 'normal 28px MicroSoft YaHei',
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
+                scaleByDistance: new Cesium.NearFarScalar(1000, 1, 3000, 0.4),
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                pixelOffset: new Cesium.Cartesian2(0, -30),
+                outlineWidth: 9,
+                outlineColor: Cesium.Color.WHITE
+            }
+        });
+    }
+
+    getCenterPosition() {
+        let points = [];
+        if (this.tempPositions.length < 3) return this.tempPositions[0];
+        this.tempPositions.forEach(position => {
+            const point3d = this.cartesian3ToPoint3D(position);
+            points.push([point3d.x, point3d.y]);
+        })
+        let geo = turf.lineString(points);
+        let bbox = turf.bbox(geo);
+        let bboxPolygon = turf.bboxPolygon(bbox);
+        let pointOnFeature = turf.center(bboxPolygon);
+        let lonLat = pointOnFeature.geometry.coordinates;
+
+        return Cesium.Cartesian3.fromDegrees(lonLat[0], lonLat[1], this.height + 0.3);
+    }
+
+    registerEvents() {
+        this.leftClickEvent();
+        this.rightClickEvent();
+        this.mouseMoveEvent();
+    }
+
+    leftClickEvent() {
+        this.handler.setInputAction(e => {
+            this.viewer._element.style.cursor = 'default';
+            let position = this.viewer.scene.pickPosition(e.position);
+            if (!position) {
+                const ellipsoid = this.viewer.scene.globe.ellipsoid;
+                position = this.viewer.scene.camera.pickEllipsoid(e.position, ellipsoid);
+            }
+            if (!position) return;
+            this.positions.push(position);
+            this.height = this.unifiedHeight(this.positions, this.height);
+            if (this.positions.length == 1) {
+                this.createPolygonEntity();
+            }
+            this.createVertex();
+
+        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    }
+
+    mouseMoveEvent() {
+        this.handler.setInputAction(e => {
+            if (!this.isMeasure) return;
+            this.viewer._element.style.cursor = 'default';
+            let position = this.viewer.scene.pickPosition(e.endPosition);
+            if (!position) {
+                position = this.viewer.scene.camera.pickEllipsoid(e.startPosition, this.viewer.scene.globe.ellipsoid);
+            }
+            if (!position) return;
+            this.handleMoveEvent(position);
+        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+    }
+
+    handleMoveEvent(position) {
+        if (this.positions.length < 1) return;
+
+        this.height = this.unifiedHeight(this.positions, this.height);
+        this.tempPositions = this.positions.concat(position);
+        if (this.tempPositions.length >= 3 && !this.mesureResultEntity) {
+            this.createResultLabel();
+        }
+    }
+
+    unifiedHeight(positions, height) {
+        if (!height) height = this.getPositionHeight(positions[0]);
+        let point3d;
+        for (let i = 0; i < positions.length; i++) {
+            const element = positions[i];
+            point3d = this.cartesian3ToPoint3D(element);
+            positions[i] = Cesium.Cartesian3.fromDegrees(point3d.x, point3d.y, height)
+        }
+
+        return height;
+    }
+
+    getPositionHeight(position) {
+        const cartographic = Cesium.Cartographic.fromCartesian(position);
+        return cartographic.height;
+    }
+
+    cartesian3ToPoint3D(position) {
+        const cartographic = Cesium.Cartographic.fromCartesian(position);
+        const lon = Cesium.Math.toDegrees(cartographic.longitude);
+        const lat = Cesium.Math.toDegrees(cartographic.latitude);
+        return { x: lon, y: lat, z: cartographic.height };
+    }
+
+    Bearing(from, to) {
+        from = Cesium.Cartographic.fromCartesian(from);
+        to = Cesium.Cartographic.fromCartesian(to);
+
+        const lat1 = from.latitude;
+        const lon1 = from.longitude;
+        const lat2 = to.latitude;
+        const lon2 = to.longitude;
+        let angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));
+        if (angle < 0) {
+            angle += Math.PI * 2.0;
+        }
+        const degreesPerRadian = 180.0 / Math.PI;
+
+        angle = angle * degreesPerRadian;
+        return angle;
+    }
+
+    Angle(p1, p2, p3) {
+        const bearing21 = this.Bearing(p2, p1);
+        const bearing23 = this.Bearing(p2, p3);
+        let angle = bearing21 - bearing23;
+        if (angle < 0) {
+            angle += 360;
+        }
+        return angle;
+    }
+
+    distance(point1, point2) {
+        const point1cartographic = Cesium.Cartographic.fromCartesian(point1);
+        const point2cartographic = Cesium.Cartographic.fromCartesian(point2);
+        const geodesic = new Cesium.EllipsoidGeodesic();
+        geodesic.setEndPoints(point1cartographic, point2cartographic);
+        let s = geodesic.surfaceDistance;
+        s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));
+        return s;
+    }
+
+    computeArea(points) {
+        let res = 0;
+
+        for (let i = 0; i < points.length - 2; i++) {
+            const j = (i + 1) % points.length;
+            const k = (i + 2) % points.length;
+            const totalAngle = this.Angle(points[i], points[j], points[k]);
+
+            const dis_temp1 = this.distance(points[j], points[0]);
+            const dis_temp2 = this.distance(points[k], points[0]);
+
+            res += dis_temp1 * dis_temp2 * Math.sin(totalAngle) / 2;
+        }
+
+        if (res < 1000000) {
+            res = Math.abs(res).toFixed(4) + " 平方米";
+        } else {
+            res = Math.abs((res / 1000000.0).toFixed(4)) + " 平方公里";
+        }
+
+        return res;
+    }
+
+    rightClickEvent() {
+        this.handler.setInputAction(e => {
+            if (!this.isMeasure || this.positions.length < 3) {
+                this.deactivate();
+                this.clear();
+            } else {
+                this.tempPositions = [...this.positions];
+
+                this.polygonEntity.polyline = {
+                    clampToGround: true,
+                    positions: new Cesium.CallbackProperty(e => {
+                        return this.tempPositions.concat(this.tempPositions[0]);
+                    }, false),
+                    width: 1,
+                    material: new Cesium.PolylineOutlineMaterialProperty({
+                        color: Cesium.Color.ORANGE,
+                        outlineWidth: 2,
+                        outlineColor: Cesium.Color.WHITE
+                    })
+                }
+
+                this.polygonEntity.polygon.hierarchy = new Cesium.PolygonHierarchy(this.tempPositions);
+                this.mesureResultEntity.position = this.getCenterPosition();
+                this.mesureResultEntity.label.text = "总面积为" + this.computeArea(this.positions)
+                this.measureEnd();
+            }
+
+        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+    }
+
+    measureEnd() {
+        this.deactivate();
+        this.MeasureEndEvent.raiseEvent(this.measureArea);
+    }
+
+    unRegisterEvents() {
+        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+        this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+    }
+}
+
+export {
+    MeasureDistance,
+    MeasureHeight,
+    MeasureArea
+}