超图（cesuim）基于vue绘制各种图形方法

import store from "../store/index"
class Draw {
   
    constructor(viewer, config) {
   
        /**cesium实例对象 */
        this.viewer = viewer
        /**绘制要素的相关配置
         * 默认配置
         * {
            borderColor: Cesium.Color.BLUE,  边框颜色
            borderWidth: 2, 边框宽度
            material: Cesium.Color.GREEN.withAlpha(0.5),填充材质
        }
        */
        this.config = config || {
   
            borderColor: Cesium.Color.BLUE,
            borderWidth: 5,
            material: Cesium.Color.GREEN.withAlpha(0.5),
        }
        /**存贮绘制的数据 坐标 */
        this.infoDetail = {
    point: [], line: [], rectangle: [], circle: [], planeSelf: [] }
        this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
    }
    /******* 
     * @function: function
     * @return {*}
     * @author: xfx
     * @description: 绘制点数据
     */
    drawPoint() {
   
        this.handler.destroy()

        this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
        this.handler.setInputAction((click) => {
   
            /**点击位置笛卡尔坐标 */
            let cartesian = this.viewer.camera.pickEllipsoid(click.position, this.viewer.scene.globe.ellipsoid)
            /**笛卡尔转弧度坐标 */
            let cartographic = Cesium.Cartographic.fromCartesian(cartesian, this.viewer.scene.globe.ellipsoid, new Cesium.Cartographic())
            /**点击位置经度 */
            let lng = Cesium.Math.toDegrees(cartographic.longitude)
            /**点击位置维度 */
            let lat = Cesium.Math.toDegrees(cartographic.latitude)
            /**实体的唯一标注 */
            let id = new Date().getTime()
            this.viewer.entities.add({
   
                position: Cesium.Cartesian3.fromDegrees(lng, lat, 0),
                name: 'point',
                id: id,
                point: {
   
                    color: this.config.material,
                    pixelSize: 12,
                    outlineColor: this.config.borderColor,
                    outlineWidth: this.config.borderWidth
                }
            })
            this.infoDetail.point.push({
    id: id, position: [lng, lat] })

        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

        this.handler.setInputAction((click) => {
   
            this.handler.destroy();
        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
    }

    /******* 
     * @function: function
     * @description: 绘制矩形区域
     * @return {*}
     * @author: xfx
     */
    drawRectangle() {
   
        this.handler.destroy()
        /**
         * 矩形四点坐标
         */
        let westSouthEastNorth = []
        /**实体的唯一标注 */
        let id = null
        /**地图点击对象 */
        this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
        this.handler.setInputAction((click) => {
   
            /**点击位置笛卡尔坐标 */
            // let cartesian = this.viewer.camera.pickEllipsoid(click.position, this.viewer.scene.globe.ellipsoid)
            /**笛卡尔转弧度坐标 */
            // let cartographic = Cesium.Cartographic.fromCartesian(cartesian, this.viewer.scene.globe.ellipsoid, new Cesium.Cartographic())
            var position = this.viewer.scene.pickPosition(click.position);
            var cartographic = Cesium.Cartographic.fromCartesian(position);
            // var longitude = Cesium.Math.toDegrees(cartographic.longitude);
            // var latitude = Cesium.Math.toDegrees(cartographic.latitude);
            /**点击位置经度 */
            let lng1 = Cesium.Math.toDegrees(cartographic.longitude)
            /**点击位置维度 */
            let lat1 = Cesium.Math.toDegrees(cartographic.latitude)
            /**边框坐标 */
            westSouthEastNorth = [lng1, lat1]
            id = new Date().getTime()+Math.round(Math.random()*1000000000)
            if (westSouthEastNorth) {
   
                this.handler.removeInputAction(Cesium