三维模型编辑

shuishen

2023-03-29 1f48971edb82a95675552eb9563041b5aef3a306

三维模型编辑

 .gitignore

@@ -4,6 +4,7 @@
/dist.zip
/public/sd
/public/sryx
/public/mx

# local env files
.env.local

 public/images/circle_blue.png

 public/images/circle_red.png

 public/images/circle_yellow.png

 public/images/cloud.jpg

 public/images/fence.png

 public/images/lighting.png

 public/images/space_line.png

 public/img/icon/bhdx.png

 public/img/icon/ptqz.png

 public/img/icon/wxrw.png

 src/api/activity/index.js

@@ -6,19 +6,11 @@
 * @param {*}
 * @returns
 */
export const getSecurityList = (current, size, type, name, startTime, endTime, deptId) => {
export const getSecurityList = (params) => {
    return request({
        url: `/api/security/security/page`,
        method: 'get',
        params: {
            current,
            size,
            type,
            name,
            startTime,
            endTime,
            deptId
        }
        params: params
    })
}


 src/components/map/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-24 17:09:15
 * @LastEditTime: 2023-03-28 23:57:07
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -198,6 +198,7 @@
import activityPolicePopup from './components/activityPolicePopup.vue'
import videoListPopup from './components/videoListPopup.vue'
import yToolTip from './components/yToolTip.vue'
import createTools from '@/utils/tools/index'

export default {
    name: 'mapBox',
@@ -246,6 +247,20 @@
                    }
                }
            })

            const curTools = createTools()

            Object.keys(curTools).forEach(key => {
                curTools[key].install(global.viewer)
            })

            let curTilesetLayer = new global.DC.TilesetLayer('curTilesetLayer')
            global.viewer.addLayer(curTilesetLayer)
            let curTileset = new global.DC.Tileset(
                '/mx/tileset.json'
            )
            curTileset.setHeight(20)
            curTilesetLayer.addOverlay(curTileset)

            global.viewer.setPitchRange(-90, -45)

@@ -310,7 +325,7 @@
            // global.viewer.addTerrain(terrain)

            // 内网
            // that.switchImg()
            that.switchImg()

            // 外网
            global.viewer.imageryLayers.addImageryProvider(
@@ -459,6 +474,10 @@
            that.mapRemovePolygonLayer(params.layerName, params.polygonName, params.type)
        })

        this.$EventBus.$on('mapRemovePolygon', (params) => {
            that.mapRemovePolygon(params.layerName, params.overlay, params.type)
        })

        this.$EventBus.$on('mapClearLayer', (params) => {
            that.mapClearLayer(params.layerName, params.type)
        })
@@ -481,7 +500,7 @@
        })

        this.$EventBus.$on('layerWallAdd', (params) => {
            that.layerWallAdd(params.layerName, params.positions, params.imgUrl)
            that.layerWallAdd(params.layerName, params.positions)
        })

        this.$EventBus.$on('getOverLayerID', (params) => {
@@ -776,6 +795,16 @@
            }
        },

        mapRemovePolygon (layerName, overlay, type) {
            if (type == 'VectorLayer') {
                if (layersObjcect[layerName] && layersObjcect[layerName] != null) {

                    console.log(overlay, 555)
                    layersObjcect[layerName].removeOverlay(overlay)
                }
            }
        },

        /**
         * 清空图层
         * @param {*} layerName 图层名称
@@ -921,18 +950,16 @@
            layersObjcect[layerName].addOverlay(polyline)
        },

        layerWallAdd (layerName, positions, imgUrl) {
        layerWallAdd (layerName, positions) {
            if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
                this.mapAddLayer(layerName, 'VectorLayer')
            }

            let wall = new global.DC.Wall(positions)
            wall.setStyle({
                material: new global.DC.WallImageTrailMaterialProperty({
                    image: imgUrl,
                    color: global.DC.Namespace.Cesium.Color.fromBytes(255, 226, 97, 200),
                    repeat: { x: 3, y: 1 },
                    speed: 4
                material: new global.DC.WallTrailMaterialProperty({
                    color: global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 180),
                    speed: 10
                })
            })
            layersObjcect[layerName].addOverlay(wall)

 src/main.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-09-07 09:34:58
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-22 11:58:46
 * @LastEditTime: 2023-03-28 23:55:47
 * @FilePath: \srs-police-affairs\src\main.js
 * @Description: 
 * 
@@ -51,8 +51,10 @@
Vue.prototype.$turf = turf

global.DC = DC
global.DC
global.echarts = echarts
global.viewer = null


DC.DivForms = DivForms

@@ -60,7 +62,6 @@
DC.use(DcChart) //安装DC图标库，使用前确保echarts为全局函数
DC.use(DcMapv) //安装Mapv库
DC.use(DcS3M) //安装DcS3M库

Vue.config.productionTip = false
Vue.prototype.$EventBus = EventBus
Vue.use(ElementUI)

 src/styles/dc/index.scss

@@ -74,7 +74,7 @@

.over-look-btn.homebottom {
    left: 402px !important;
    bottom: 540px;
    bottom: 540px !important;
}

.over-look-btn.shrink-btn {
@@ -154,7 +154,7 @@

.image-switch-icon-btn.iconbottom {
    left: 402px;
    bottom: 476px;
    bottom: 474px;
}

.image-switch-icon-btn.shrink-btn {

 src/styles/media/index.scss

@@ -2585,6 +2585,7 @@

                .over-look-btn.shrink-btn {
                    left: countSizeVw(410, 1920) !important;
                    bottom: countSizeVh(220);
                }


@@ -2634,7 +2635,7 @@

                .image-switch-icon-btn {
                    left: countSizeVh(10);
                    bottom: countSizeVh(178);
                    bottom: countSizeVh(176);
                    width: countSizeVh(36);
                    height: countSizeVh(36);
                    font-size: countSizeVh(20);

 src/utils/event/Event.js

New file
@@ -0,0 +1,121 @@
/**
 * @Author: Caven
 * @Date: 2020-01-02 15:24:38
 */

class Event {
    constructor() {
        this._cache = {}
        this._registerEvent()
    }

    /**
     * Event registration
     * Subclasses need to override
     * @private
     */
    _registerEvent () { }

    /**
     * @param type
     * @param callback
     * @param context
     * @returns {any}
     * @private
     */
    _on (type, callback, context) {
        let event = this.getEvent(type)
        let removeCallback = undefined
        if (event && callback) {
            removeCallback = event.addEventListener(callback, context || this)
        }
        return removeCallback
    }

    /**
     * @param type
     * @param callback
     * @param context
     * @returns {boolean}
     * @private
     */
    _off (type, callback, context) {
        let event = this.getEvent(type)
        let removed = false
        if (event && callback) {
            removed = event.removeEventListener(callback, context || this)
        }
        return removed
    }

    /**
     * @param type
     * @param params
     * @private
     */
    _fire (type, params) {
        let event = this.getEvent(type)
        if (event) {
            event.raiseEvent(params)
        }
    }

    /**
     * Subscribe event
     * @param type
     * @param callback
     * @param context
     * @returns remove callback function
     */
    on (type, callback, context) {
        return this._on(type, callback, context)
    }

    /**
     * Subscribe once event
     * @param type
     * @param callback
     * @param context
     */
    once (type, callback, context) {
        let removeCallback = this._on(
            type,
            e => {
                callback(e)
                removeCallback && removeCallback()
            },
            context
        )
    }

    /**
     * Unsubscribe event
     * @param type
     * @param callback
     * @param context
     * @returns Boolean
     */
    off (type, callback, context) {
        return this._off(type, callback, context)
    }

    /**
     * Trigger subscription event
     * @param type
     * @param params
     */
    fire (type, params) {
        this._fire(type, params)
    }

    /**
     * Returns events by type
     * @param type
     * @returns Event
     */
    getEvent (type) {
        return this._cache[type] || undefined
    }
}

export default Event

 src/utils/event/PlotEvent.js

New file
@@ -0,0 +1,36 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-23 14:59:15
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-23 14:59:41
 * @FilePath: \forest-fire\src\utils\event\PlotEvent.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
/**
 * @Author: Caven
 * @Date: 2020-05-11 23:28:13
 */

import { PlotEventType } from './index'
import Event from './Event'

class PlotEvent extends Event {
    constructor() {
        super()
    }

    /**
     *
     * @private
     */
    _registerEvent () {
        Object.keys(PlotEventType).forEach(key => {
            let type = PlotEventType[key]
            this._cache[type] = new global.DC.Namespace.Cesium.Event()
        })
    }
}

export default PlotEvent

 src/utils/event/index.js

New file
@@ -0,0 +1,29 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-23 11:29:10
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-23 15:03:13
 * @FilePath: \forest-fire\src\utils\event\index.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */

const PlotEventType = {
    DRAW_START: 'drawStart',
    DRAW_STOP: 'drawStop',
    EDIT_START: 'editStart',
    EDIT_STOP: 'editEnd',
    DRAW_ANCHOR: 'drawAnchor',
    CREATE_ANCHOR: 'createAnchor',
    UPDATE_ANCHOR: 'updateAnchor',
    ANCHOR_MOVING: 'anchorMoving',
    EDIT_ANCHOR_STOP: 'editAnchorStop',
    CLEAR_ANCHOR: 'clearAnchor'
}

export {
    PlotEventType
}

export { default as PlotEvent } from './PlotEvent'

 src/utils/math/index.js

New file
@@ -0,0 +1,43 @@
// export default function midCartesian (start, end) {
//     let c1 = global.DC.Namespace.Cesium.Ellipsoid.WGS84.cartesianToCartographic(start)
//     let c2 = global.DC.Namespace.Cesium.Ellipsoid.WGS84.cartesianToCartographic(end)
//     let cm = new global.DC.Namespace.Cesium.EllipsoidGeodesic(c1, c2).interpolateUsingFraction(0.5)

//     let cc1 = global.DC.Transform.transformCartesianToWGS84(start)
//     let cc2 = global.DC.Transform.transformCartesianToWGS84(end)

//     let lng = (cc1.lng - cc2.lng) / 2 + cc1.lng
//     let lat = (cc1.lat - cc2.lat) / 2 + cc1.lat
//     let alt = (cc1.alt - cc2.alt) / 2 + cc1.alt
//     let cc3 = global.DC.Transform.transformWGS84ToCartesian({ lng, lat, alt })
//     return global.DC.Namespace.Cesium.Ellipsoid.WGS84.cartographicToCartesian(cm)
// }


export default function midCartesian (start, end) {
    let c1 = global.DC.Transform.transformCartesianToWGS84(start)
    let c2 = global.DC.Transform.transformCartesianToWGS84(end)
    let lng, lat, alt
    if (c1.lng >= c2.lng) {
        lng = c1.lng - (c1.lng - c2.lng) / 2
    } else {
        lng = c1.lng + (c2.lng - c1.lng) / 2
    }

    if (c1.lat >= c2.lat) {
        lat = c1.lat - (c1.lat - c2.lat) / 2
    } else {
        lat = c1.lat + (c2.lat - c1.lat) / 2
    }

    if (c1.alt >= c2.alt) {
        alt = c1.alt - (c1.alt - c2.alt) / 2
    } else {
        alt = c1.alt + (c2.alt - c1.alt) / 2
    }

    let c3 = global.DC.Transform.transformWGS84ToCartesian({ lng, lat, alt })

    return c3
}


 src/utils/plot/Plot.js

New file
@@ -0,0 +1,129 @@
/**
 * @Author: Caven
 * @Date: 2020-08-29 19:26:06
 */
import DrawPolygon from './draw/DrawPolygon'
import DrawPolyline from './draw/DrawPolyline'
import DrawBillboard from './draw/DrawBillboard'

import EditPolygon from './edit/EditPolygon'
import EditPolyline from './edit/EditPolyline'
import EditBillboard from './edit/EditBillboard'
class Plot {
    constructor(viewer, options = {}) {
        this._viewer = viewer
        this._options = options
        this._layer = new global.DC.Namespace.Cesium.CustomDataSource('cur-plot-layer')
        this._viewer.dataSources.add(this._layer)
        this._state = undefined
    }

    get viewer () {
        return this._viewer
    }

    get layer () {
        return this._layer
    }

    get state () {
        return this._state
    }

    /**
   *
   * @param type
   * @param style
   * @private
   */
    _createDrawWorker (type, style) {
        let drawWorker = undefined
        switch (type) {
            case global.DC.OverlayType.POLYGON:
                drawWorker = new DrawPolygon(style)
                break
            case global.DC.OverlayType.POLYLINE:
                drawWorker = new DrawPolyline(style)
                break
            case global.DC.OverlayType.BILLBOARD:
                drawWorker = new DrawBillboard(style)
                break
            default:
                break
        }
        return drawWorker
    }

    /**
   *
   * @param overlay
   * @private
   */
    _createEditWorker (overlay) {
        let editWorker = undefined
        switch (overlay.type) {
            case global.DC.OverlayType.POLYGON:
                editWorker = new EditPolygon(overlay)
                break
            case global.DC.OverlayType.POLYLINE:
                editWorker = new EditPolyline(overlay)
                break
            case global.DC.OverlayType.BILLBOARD:
                editWorker = new EditBillboard(overlay)
                break
            default:
                break
        }
        return editWorker
    }

    /**
     *
     * @param type
     * @param callback
     * @param style
     * @param clampToModel
     * @returns {Plot}
     */
    draw (type, callback, style = {}, clampToModel = false) {

        this._state = 'draw'

        this._createDrawWorker(type, style)?.start(this, {
            ...this._options,
            onDrawStop: callback,
            clampToModel: clampToModel ?? this._options.clampToModel
        })
        return this
    }


    /**
   *
   * @param overlay
   * @param callback
   * @param clampToModel
   * @returns {Plot}
   */
    edit (overlay, callback, clampToModel = false) {
        this._state = 'edit'
        this._createEditWorker(overlay)?.start(this, {
            ...this._options,
            onEditStop: callback,
            clampToModel: clampToModel ?? this._options.clampToModel
        })
        return this
    }

    /**
   *
   * @returns {Plot}
   */
    destroy () {
        this._viewer.dataSources.remove(this._layer)
        this._viewer = undefined
        return this
    }
}

export default Plot

 src/utils/plot/draw/Draw.js

New file
@@ -0,0 +1,103 @@
/**
 * @Author: Caven
 * @Date: 2020-01-31 19:45:32
 */

import { PlotEventType } from '@/utils/event/index.js'

class Draw {
    constructor(style) {
        this._style = style
        this._viewer = undefined
        this._layer = undefined
        this._delegate = undefined
        this._options = {}
        this._positions = []
    }

    get curDrawTool () {
        return this._viewer.curDrawTool
    }

    /**
     * The hook for mount viewer
     * Subclasses need to be overridden
     * @private
     */
    _mountedHook () { }

    /**
     * The hook for mount stop
     * Subclasses need to be overridden
     * @private
     */
    _stopdHook () { }

    /**
     *
     * @param position
     * @private
     */
    _onDrawAnchor (position) { }

    /**
     *
     * @param position
     * @private
     */
    _onAnchorMoving (position) {
        this._positions.pop()
        this._positions.push(position)
    }

    /**
     *
     * @private
     */
    _onDrawStop () {
        this._unbindEvent()
        this._viewer.curDrawTool.deactivate()
        this._layer.entities.remove(this._delegate)
        this._stopdHook()
    }

    /**
     *
     * @private
     */
    _bindEvent () {
        this.curDrawTool.on(PlotEventType.DRAW_ANCHOR, this._onDrawAnchor, this)
        this.curDrawTool.on(PlotEventType.ANCHOR_MOVING, this._onAnchorMoving, this)
        this.curDrawTool.on(PlotEventType.DRAW_STOP, this._onDrawStop, this)
    }

    /**
     *
     * @private
     */
    _unbindEvent () {
        this.curDrawTool.off(PlotEventType.DRAW_ANCHOR, this._onDrawAnchor, this)
        this.curDrawTool.off(PlotEventType.ANCHOR_MOVING, this._onAnchorMoving, this)
        this.curDrawTool.off(PlotEventType.DRAW_STOP, this._onDrawStop, this)
    }

    /**
     *
     * @param plot
     * @param options
     * @returns {Draw}
     */
    start (plot, options) {
        this._viewer = plot.viewer
        this._layer = plot.layer
        this._options = options
        this._viewer.editTool.deactivate()
        this._viewer.curDrawTool.activate(options)
        this._mountedHook()
        this._unbindEvent()
        this._bindEvent()
        return this
    }
}

export default Draw

 src/utils/plot/draw/DrawBillboard.js

New file
@@ -0,0 +1,80 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-24 17:24:45
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-27 22:43:01
 * @FilePath: \forest-fire\src\utils\plot\draw\DrawBillboard.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
/**
 * @Author: Caven
 * @Date: 2020-08-29 20:29:59
 */
import { PlotEventType } from '@/utils/event/index.js'

import Draw from './Draw'

const IMG_CIRCLE_RED = '/images/circle_red.png'

class DrawPoint extends Draw {
    constructor(style) {
        super()
        this._position = global.DC.Namespace.Cesium.Cartesian3.ZERO
        this._style = {
            image: style.billboardImage ?? IMG_CIRCLE_RED,
            ...style
        }
    }

    /**
     *
     * @private
     */
    _mountedHook () {
        this.curDrawTool.tooltipMess = '单击选择点位'
        this._delegate = new global.DC.Namespace.Cesium.Entity({
            position: new global.DC.Namespace.Cesium.CallbackProperty(() => {
                return this._position
            }, false),
            billboard: {
                ...this._style
            }
        })
        this._layer.entities.add(this._delegate)
    }

    /**
     *
     * @private
     */
    _stopdHook () {
        let billboard = new global.DC.Billboard(
            global.DC.Transform.transformCartesianToWGS84(this._position),
            this._style.image
        ).setStyle(this._style)
        this._options.onDrawStop && this._options.onDrawStop(billboard)
    }

    /**
     *
     * @param position
     * @private
     */
    _onDrawAnchor (position) {
        this._position = position
        this.curDrawTool.fire(PlotEventType.DRAW_STOP)
    }

    /**
     *
     * @param position
     * @private
     */
    _onAnchorMoving (position) {
        this._position = position
    }
}

export default DrawPoint

 src/utils/plot/draw/DrawPoint.js

New file
@@ -0,0 +1,73 @@
/**
 * @Author: Caven
 * @Date: 2020-01-31 16:25:29
 */

import { PlotEventType } from '@/utils/event/index.js'
import Draw from './Draw'

const DEF_STYLE = {
    pixelSize: 10,
    outlineColor: global.DC.Namespace.Cesium.Color.BLUE,
    outlineWidth: 5
}

class DrawPoint extends Draw {
    constructor(style) {
        super()
        this._position = global.DC.Namespace.Cesium.Cartesian3.ZERO
        this._style = {
            ...DEF_STYLE,
            ...style
        }
    }

    /**
     *
     * @private
     */
    _mountedHook () {
        this.curDrawTool.tooltipMess = '单击选择点位'
        this._delegate = new global.DC.Namespace.Cesium.Entity({
            position: new global.DC.Namespace.Cesium.CallbackProperty(() => {
                return this._position
            }, false),
            point: {
                ...this._style
            }
        })
        this._layer.entities.add(this._delegate)
    }

    /**
     *
     * @private
     */
    _stopdHook () {
        let point = new global.DC.Point(
            global.DC.Transform.transformCartesianToWGS84(this._position)
        ).setStyle(this._style)
        this._options.onDrawStop && this._options.onDrawStop(point)
    }

    /**
     *
     * @param position
     * @private
     */
    _onDrawAnchor (position) {
        this._position = position
        this.curDrawTool.fire(PlotEventType.DRAW_STOP, position)
    }

    /**
     *
     * @param position
     * @private
     */
    _onAnchorMoving (position) {
        this._position = position
    }
}

export default DrawPoint

 src/utils/plot/draw/DrawPolygon.js

New file
@@ -0,0 +1,79 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-23 11:22:18
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-24 10:02:32
 * @FilePath: \forest-fire\src\utils\plot\draw\DrawPolygon.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
/**
 * @Author: Caven
 * @Date: 2020-08-29 20:55:14
 */

import Draw from './Draw'
import { PlotEventType } from '@/utils/event/index.js'

const DEF_STYLE = {
    material: global.DC.Namespace.Cesium.Color.YELLOW.withAlpha(0.6),
    fill: true
}

class DrawPolygon extends Draw {
    constructor(style) {
        super()
        this._style = {
            ...DEF_STYLE,
            ...style
        }
    }

    /**
     *
     * @private
     */
    _mountedHook () {
        this.curDrawTool.tooltipMess = '左击选择点位,右击结束'
        this._delegate = new global.DC.Namespace.Cesium.Entity({
            polygon: {
                ...this._style,
                hierarchy: new global.DC.Namespace.Cesium.CallbackProperty(() => {

                    if (this._positions.length > 2) {
                        return new global.DC.Namespace.Cesium.PolygonHierarchy(this._positions)
                    } else {
                        return null
                    }
                }, false)
            }
        })

        this._layer.entities.add(this._delegate)

    }

    /**
     *
     * @private
     */
    _stopdHook () {
        let polygon = new global.DC.Polygon(
            global.DC.Transform.transformCartesianArrayToWGS84Array(this._positions)
        ).setStyle(this._style)
        this._options.onDrawStop && this._options.onDrawStop(polygon)
    }

    /**
     *
     * @param position
     * @private
     */
    _onDrawAnchor (position) {
        this._positions.push(position)
        this.curDrawTool.fire(PlotEventType.CREATE_ANCHOR, { position })
    }
}

export default DrawPolygon

 src/utils/plot/draw/DrawPolyline.js

New file
@@ -0,0 +1,73 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-24 16:00:08
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-24 16:26:17
 * @FilePath: \forest-fire\src\utils\plot\draw\DrawPolyline.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
/**
 * @Author: Caven
 * @Date: 2020-08-29 20:54:37
 */

import Draw from './Draw'
import { PlotEventType } from '@/utils/event/index.js'

const DEF_STYLE = {
    width: 3,
    material: global.DC.Namespace.Cesium.Color.YELLOW.withAlpha(0.6)
}

class DrawPolyline extends Draw {
    constructor(style) {
        super()
        this._style = {
            ...DEF_STYLE,
            ...style
        }
    }

    /**
     *
     * @private
     */
    _mountedHook () {
        this.curDrawTool.tooltipMess = '左击选择点位,右击结束'
        this._delegate = new global.DC.Namespace.Cesium.Entity({
            polyline: {
                ...this._style,
                positions: new global.DC.Namespace.Cesium.CallbackProperty(() => {
                    return this._positions
                }, false)
            }
        })
        this._layer.entities.add(this._delegate)
    }

    /**
     *
     * @private
     */
    _stopdHook () {
        let polyline = new global.DC.Polyline(
            global.DC.Transform.transformCartesianArrayToWGS84Array(this._positions)
        ).setStyle(this._style)
        this._options.onDrawStop && this._options.onDrawStop(polyline)
    }

    /**
     *
     * @param position
     * @returns {boolean}
     * @private
     */
    _onDrawAnchor (position) {
        this._positions.push(position)
        this.curDrawTool.fire(PlotEventType.CREATE_ANCHOR, { position })
    }
}

export default DrawPolyline

 src/utils/plot/edit/Edit.js

New file
@@ -0,0 +1,165 @@
/**
 * @Author: Caven
 * @Date: 2020-08-30 23:50:53
 */

import { PlotEventType } from '@/utils/event/index.js'

class Edit {
    constructor(overlay) {
        this._viewer = undefined
        this._layer = undefined
        this._overlay = overlay
        this._overlay.show = false
        this._delegate = new global.DC.Namespace.Cesium.Entity()
        this._delegate.merge(overlay.delegate)
        this._options = {}
        this._positions = []
    }

    get curEditTool () {
        return this._viewer.curEditTool
    }

    /**
   *
   * @private
   */
    _mountedHook () {
        this._overlay.positions = global.DC.Transform.transformCartesianArrayToWGS84Array(
            this._positions
        )
        this._overlay.show = true
        this._options.onEditStop && this._options.onEditStop(this._overlay)
    }

    /**
   *
   * @private
   */
    _stopedHook () {
        let position
        if (this._overlay.customType == 'polygon' || this._overlay.customType == 'polyline') {
            position = this._positions.filter((item, index) => index % 2 === 0)
        } else {
            position = this._positions
        }

        this._overlay.positions = global.DC.Transform.transformCartesianArrayToWGS84Array(
            position
        )

        this._overlay.show = true
        this._options.onEditStop && this._options.onEditStop(this._overlay)
    }

    /**
   *
   * @private
   */
    _mountAnchor () {
        this._positions = [].concat(
            global.DC.Transform.transformWGS84ArrayToCartesianArray(this._overlay.positions)
        )
        this._positions.forEach((item, index) => {
            this.curEditTool.fire(PlotEventType.CREATE_ANCHOR, {
                position: item,
                index: index
            })
        })
    }

    /**
   *
   * @param pickedAnchor
   * @param position
   * @returns {boolean}
   * @private
   */
    _onEditAnchorStop ({ pickedAnchor, position }) {
        let properties = pickedAnchor.properties.getValue(global.DC.Namespace.Cesium.JulianDate.now())
        this._positions[properties.index] = position
    }

    /**
   *
   * @param pickedAnchor
   * @param position
   * @private
   */
    _onAnchorMoving ({ pickedAnchor, position }) {
        let properties = pickedAnchor.properties.getValue(global.DC.Namespace.Cesium.JulianDate.now())
        this._positions[properties.index] = position
    }

    /**
   *
   * @param pickedAnchor
   * @param position
   * @private
   */
    _onEditStop ({ pickedAnchor, position }) {
        this._unbindEvent()
        this._viewer.curEditTool.deactivate()
        this._layer.entities.remove(this._delegate)
        this._stopedHook()
    }

    /**
   *
   * @returns {Edit}
   * @private
   */
    _bindEvent () {
        this.curEditTool.on(PlotEventType.ANCHOR_MOVING, this._onAnchorMoving, this)
        this.curEditTool.on(
            PlotEventType.EDIT_ANCHOR_STOP,
            this._onEditAnchorStop,
            this
        )
        this.curEditTool.on(PlotEventType.EDIT_STOP, this._onEditStop, this)
        return this
    }

    /**
   *
   * @private
   */
    _unbindEvent () {
        this.curEditTool.off(PlotEventType.ANCHOR_MOVING, this._onAnchorMoving, this)
        this.curEditTool.off(
            PlotEventType.EDIT_ANCHOR_STOP,
            this._onEditAnchorStop,
            this
        )
        this.curEditTool.off(PlotEventType.EDIT_STOP, this._onEditStop, this)
    }

    stop () {
        this._delegate &&
            this._viewer.scene.postProcessStages.remove(this._delegate)
        this._delegate = undefined
        return this
    }

    /**
   *
   * @param measure
   * @param options
   * @returns {Edit}
   */
    start (measure, options) {
        this._viewer = measure.viewer
        this._layer = measure.layer
        this._options = options
        this._viewer.curEditTool.tooltipMess = '点击锚点移动,右击结束编辑'
        this._viewer.curEditTool.activate(options)
        this._mountedHook()
        this._mountAnchor()
        this._unbindEvent()
        this._bindEvent()
        return this
    }
}

export default Edit

 src/utils/plot/edit/EditBillboard.js

New file
@@ -0,0 +1,48 @@
/**
 * @Author: Caven
 * @Date: 2020-08-30 22:04:36
 */

import Edit from './Edit'

class EditBillboard extends Edit {
    constructor(overlay) {
        super(overlay)
        this._position = undefined
    }

    /**
     *
     * @private
     */
    _mountedHook () {
        this.curEditTool.tooltipMess = '右击结束编辑'
        this._position = this._delegate.position.getValue(global.DC.Namespace.Cesium.JulianDate.now())
        this._delegate.position = new global.DC.Namespace.Cesium.CallbackProperty(() => {
            return this._position
        }, false)
        this._layer.entities.add(this._delegate)
    }

    /**
     *
     * @private
     */
    _stopedHook () {
        this._overlay.position = global.DC.Transform.transformCartesianToWGS84(this._position)
        this._overlay.show = true
        this._options.onEditStop && this._options.onEditStop(this._overlay)
    }

    /**
     *
     * @param pickedAnchor
     * @param position
     * @private
     */
    _onAnchorMoving ({ pickedAnchor, position }) {
        this._position = position
    }
}

export default EditBillboard

 src/utils/plot/edit/EditPoint.js

New file
@@ -0,0 +1,58 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-24 17:20:14
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-24 17:21:08
 * @FilePath: \forest-fire\src\utils\plot\edit\EditPoint.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
/**
 * @Author: Caven
 * @Date: 2020-08-30 22:04:36
 */

import Edit from './Edit'

class EditPoint extends Edit {
    constructor(overlay) {
        super(overlay)
        this._position = undefined
    }

    /**
     *
     * @private
     */
    _mountedHook () {
        this.curEditTool.tooltipMess = '右击结束编辑'
        this._position = this._delegate.position.getValue(global.DC.Namespace.Cesium.JulianDate.now())
        this._delegate.position = new global.DC.Namespace.Cesium.CallbackProperty(() => {
            return this._position
        })
        this._layer.entities.add(this._delegate)
    }

    /**
     *
     * @private
     */
    _stopedHook () {
        this._overlay.position = global.DC.Transform.transformCartesianToWGS84(this._position)
        this._overlay.show = true
        this._options.onEditStop && this._options.onEditStop(this._overlay)
    }

    /**
     *
     * @param pickedAnchor
     * @param position
     * @private
     */
    _onAnchorMoving ({ pickedAnchor, position }) {
        this._position = position
    }
}

export default EditPoint

 src/utils/plot/edit/EditPolygon.js

New file
@@ -0,0 +1,162 @@
/**
 * @Author: Caven
 * @Date: 2020-08-30 23:12:09
 */

import { PlotEventType } from '@/utils/event/index.js'
import midCartesian from '@/utils/math/index.js'
import Edit from './Edit'

class EditPolygon extends Edit {
    constructor(overlay) {
        super(overlay)
    }

    /**
     *
     * @private
     */
    _mountedHook () {
        this._delegate.polygon.hierarchy = new global.DC.Namespace.Cesium.CallbackProperty(time => {
            if (this._positions.length > 2) {
                return new global.DC.Namespace.Cesium.PolygonHierarchy(this._positions)
            } else {
                return null
            }
        }, false)

        this._layer.entities.add(this._delegate)
    }

    /**
     *
     * @private
     */
    _mountAnchor () {
        let positions = [].concat(
            this._overlay.delegate.polygon.hierarchy.getValue(global.DC.Namespace.Cesium.JulianDate.now())
                .positions
        )
        positions.push(positions[0])

        for (let i = 0; i < positions.length - 1; i++) {
            let mid = midCartesian(positions[i], positions[i + 1])
            this._positions.push(positions[i])
            this._positions.push(mid)
        }

        this._positions.forEach((item, index) => {
            this.curEditTool.fire(PlotEventType.CREATE_ANCHOR, {
                position: item,
                index: index,
                isMid: index % 2 !== 0
            })
        })
    }

    /**
     *
     * @param pickedAnchor
     * @param position
     * @returns {boolean}
     * @private
     */
    _onEditAnchorStop ({ pickedAnchor, position }) {
        let properties = pickedAnchor.properties.getValue(global.DC.Namespace.Cesium.JulianDate.now())
        let currentIndex = properties.index
        if (properties.isMid) {
            let preMidPosition
            let nextMidPosition
            let len = this._positions.length
            if (currentIndex === len - 1) {
                preMidPosition = midCartesian(
                    this._positions[currentIndex],
                    this._positions[currentIndex - 1]
                )
                nextMidPosition = midCartesian(
                    this._positions[currentIndex],
                    this._positions[0]
                )
            } else {
                preMidPosition = midCartesian(
                    this._positions[currentIndex],
                    this._positions[currentIndex - 1]
                )
                nextMidPosition = midCartesian(
                    this._positions[currentIndex],
                    this._positions[currentIndex + 1]
                )
            }
            this._positions.splice(
                currentIndex,
                1,
                preMidPosition,
                position,
                nextMidPosition
            )
            this.curEditTool.fire(PlotEventType.CLEAR_ANCHOR)
            this._positions.forEach((item, index) => {
                this.curEditTool.fire(PlotEventType.CREATE_ANCHOR, {
                    position: item,
                    index: index,
                    isMid: index % 2 !== 0
                })
            })
        }
    }

    /**
     *
     * @param pickedAnchor
     * @param position
     * @private
     */
    _onAnchorMoving ({ pickedAnchor, position }) {
        let properties = pickedAnchor.properties.getValue(global.DC.Namespace.Cesium.JulianDate.now())
        let currentIndex = properties.index
        this._positions[currentIndex] = position
        let len = this._positions.length
        if (!properties.isMid) {
            let preAnchorIndex = -1
            let preMidAnchorIndex = -1
            let nextAnchorIndex = -1
            let nextMidAnchorIndex = -1
            if (currentIndex === 0) {
                preAnchorIndex = len - 2
                preMidAnchorIndex = len - 1
                nextAnchorIndex = currentIndex + 2
                nextMidAnchorIndex = currentIndex + 1
            } else if (currentIndex === len - 2) {
                preAnchorIndex = currentIndex - 2
                preMidAnchorIndex = currentIndex - 1
                nextAnchorIndex = 0
                nextMidAnchorIndex = len - 1
            } else {
                preAnchorIndex = currentIndex - 2
                preMidAnchorIndex = currentIndex - 1
                nextAnchorIndex = currentIndex + 2
                nextMidAnchorIndex = currentIndex + 1
            }
            let preMidPosition = midCartesian(
                this._positions[preAnchorIndex],
                this._positions[currentIndex]
            )
            let nextMidPosition = midCartesian(
                this._positions[nextAnchorIndex],
                this._positions[currentIndex]
            )
            this._positions[preMidAnchorIndex] = preMidPosition
            this._positions[nextMidAnchorIndex] = nextMidPosition
            this.curEditTool.fire(PlotEventType.UPDATE_ANCHOR, {
                index: preMidAnchorIndex,
                position: preMidPosition
            })
            this.curEditTool.fire(PlotEventType.UPDATE_ANCHOR, {
                index: nextMidAnchorIndex,
                position: nextMidPosition
            })
        }
    }
}

export default EditPolygon

 src/utils/plot/edit/EditPolyline.js

New file
@@ -0,0 +1,149 @@
/**
 * @Author: Caven
 * @Date: 2020-08-30 22:39:34
 */

import { PlotEventType } from '@/utils/event/index.js'
import midCartesian from '@/utils/math/index.js'
import Edit from './Edit'

class EditPolyline extends Edit {
    constructor(overlay) {
        super(overlay)
    }

    /**
     *
     * @private
     */
    _mountedHook () {
        this._delegate.polyline.positions = new global.DC.Namespace.Cesium.CallbackProperty(() => {
            if (this._positions.length > 1) {
                return this._positions
            } else {
                return null
            }
        }, false)
        this._layer.entities.add(this._delegate)
    }

    /**
     *
     * @private
     */
    _mountAnchor () {
        let positions = [].concat(
            this._overlay.delegate.polyline.positions.getValue(
                global.DC.Namespace.Cesium.JulianDate.now()
            )
        )
        for (let i = 0; i < positions.length - 1; i++) {
            let mid = midCartesian(positions[i], positions[i + 1])
            this._positions.push(positions[i])
            this._positions.push(mid)
        }
        this._positions.push(positions[positions.length - 1])
        this._positions.forEach((item, index) => {
            this.curEditTool.fire(PlotEventType.CREATE_ANCHOR, {
                position: item,
                index: index,
                isMid: index % 2 !== 0
            })
        })
    }

    /**
     *
     * @param pickedAnchor
     * @param position
     * @returns {boolean}
     * @private
     */
    _onEditAnchorStop ({ pickedAnchor, position }) {
        let properties = pickedAnchor.properties.getValue(global.DC.Namespace.Cesium.JulianDate.now())
        let currentIndex = properties.index
        if (properties.isMid) {
            let preMidPosition = midCartesian(
                this._positions[currentIndex],
                this._positions[currentIndex - 1]
            )
            let nextMidPosition = midCartesian(
                this._positions[currentIndex],
                this._positions[currentIndex + 1]
            )
            this._positions.splice(
                currentIndex,
                1,
                preMidPosition,
                position,
                nextMidPosition
            )
            this.curEditTool.fire(PlotEventType.CLEAR_ANCHOR)
            this._positions.forEach((item, index) => {
                this.curEditTool.fire(PlotEventType.CREATE_ANCHOR, {
                    position: item,
                    index: index,
                    isMid: index % 2 !== 0
                })
            })
        }
    }

    /**
     *
     * @param pickedAnchor
     * @param position
     * @private
     */
    _onAnchorMoving ({ pickedAnchor, position }) {
        let properties = pickedAnchor.properties.getValue(global.DC.Namespace.Cesium.JulianDate.now())
        let currentIndex = properties.index
        this._positions[currentIndex] = position
        if (!properties.isMid && this._options.maxAnchorSize > 2) {
            let preAnchorIndex = -1
            let preMidAnchorIndex = -1
            let nextAnchorIndex = -1
            let nextMidAnchorIndex = -1
            let len = this._positions.length

            if (currentIndex === 0) {
                nextAnchorIndex = currentIndex + 2
                nextMidAnchorIndex = currentIndex + 1
            } else if (properties.index === len - 1) {
                preAnchorIndex = currentIndex - 2
                preMidAnchorIndex = currentIndex - 1
            } else {
                preAnchorIndex = currentIndex - 2
                preMidAnchorIndex = currentIndex - 1
                nextAnchorIndex = currentIndex + 2
                nextMidAnchorIndex = currentIndex + 1
            }

            if (preAnchorIndex > 0) {
                let preMidPosition = midCartesian(
                    this._positions[preAnchorIndex],
                    this._positions[currentIndex]
                )
                this._positions[preMidAnchorIndex] = preMidPosition
                this.curEditTool.fire(PlotEventType.UPDATE_ANCHOR, {
                    index: preMidAnchorIndex,
                    position: preMidPosition
                })
            }

            if (nextAnchorIndex > 0) {
                let nextMidPosition = midCartesian(
                    this._positions[nextAnchorIndex],
                    this._positions[currentIndex]
                )
                this._positions[nextMidAnchorIndex] = nextMidPosition
                this.curEditTool.fire(PlotEventType.UPDATE_ANCHOR, {
                    index: nextMidAnchorIndex,
                    position: nextMidPosition
                })
            }
        }
    }
}

export default EditPolyline

 src/utils/plot/graphics/AttackArrowGraphics.js

New file
@@ -0,0 +1,177 @@
/**
 * @Author: Caven
 * @Date: 2020-08-30 16:22:50
 */

import Parse from '@/utils/parse/Parse'
import PlotUtil from '@/utils/PlotUtil'

const HALF_PI = Math.PI / 2

class AttackArrowGraphics {
    constructor(options) {
        this._positions = options?.positions || []
        this.headHeightFactor = 0.18
        this.headWidthFactor = 0.3
        this.neckHeightFactor = 0.85
        this.neckWidthFactor = 0.15
        this.headTailFactor = 0.8
    }

    set positions (positions) {
        this._positions = positions
    }

    get positions () {
        return this._positions
    }

    get hierarchy () {
        return this._createHierarchy()
    }

    _getArrowHeadPoints (points, tailLeft, tailRight) {
        let len = PlotUtil.getBaseLength(points)
        let headHeight = len * this.headHeightFactor
        let headPnt = points[points.length - 1]
        len = PlotUtil.distance(headPnt, points[points.length - 2])
        let tailWidth = PlotUtil.distance(tailLeft, tailRight)
        if (headHeight > tailWidth * this.headTailFactor) {
            headHeight = tailWidth * this.headTailFactor
        }
        let headWidth = headHeight * this.headWidthFactor
        let neckWidth = headHeight * this.neckWidthFactor
        headHeight = headHeight > len ? len : headHeight
        let neckHeight = headHeight * this.neckHeightFactor
        let headEndPnt = PlotUtil.getThirdPoint(
            points[points.length - 2],
            headPnt,
            0,
            headHeight,
            true
        )
        let neckEndPnt = PlotUtil.getThirdPoint(
            points[points.length - 2],
            headPnt,
            0,
            neckHeight,
            true
        )
        let headLeft = PlotUtil.getThirdPoint(
            headPnt,
            headEndPnt,
            HALF_PI,
            headWidth,
            false
        )
        let headRight = PlotUtil.getThirdPoint(
            headPnt,
            headEndPnt,
            HALF_PI,
            headWidth,
            true
        )
        let neckLeft = PlotUtil.getThirdPoint(
            headPnt,
            neckEndPnt,
            HALF_PI,
            neckWidth,
            false
        )
        let neckRight = PlotUtil.getThirdPoint(
            headPnt,
            neckEndPnt,
            HALF_PI,
            neckWidth,
            true
        )
        return [neckLeft, headLeft, headPnt, headRight, neckRight]
    }

    _getArrowBodyPoints (points, neckLeft, neckRight, tailWidthFactor) {
        let allLen = PlotUtil.wholeDistance(points)
        let len = PlotUtil.getBaseLength(points)
        let tailWidth = len * tailWidthFactor
        let neckWidth = PlotUtil.distance(neckLeft, neckRight)
        let widthDif = (tailWidth - neckWidth) / 2
        let tempLen = 0
        let leftBodyPnts = []
        let rightBodyPnts = []
        for (let i = 1; i < points.length - 1; i++) {
            let angle =
                PlotUtil.getAngleOfThreePoints(
                    points[i - 1],
                    points[i],
                    points[i + 1]
                ) / 2
            tempLen += PlotUtil.distance(points[i - 1], points[i])
            let w = (tailWidth / 2 - (tempLen / allLen) * widthDif) / Math.sin(angle)
            let left = PlotUtil.getThirdPoint(
                points[i - 1],
                points[i],
                Math.PI - angle,
                w,
                true
            )
            let right = PlotUtil.getThirdPoint(
                points[i - 1],
                points[i],
                angle,
                w,
                false
            )
            leftBodyPnts.push(left)
            rightBodyPnts.push(right)
        }
        return leftBodyPnts.concat(rightBodyPnts)
    }

    _createHierarchy () {
        let pnts = Parse.parsePolygonCoordToArray(
            global.DC.Transform.transformCartesianArrayToWGS84Array(this._positions)
        )[0]
        let tailLeft = pnts[0]
        let tailRight = pnts[1]
        if (PlotUtil.isClockWise(pnts[0], pnts[1], pnts[2])) {
            tailLeft = pnts[1]
            tailRight = pnts[0]
        }
        let midTail = PlotUtil.mid(tailLeft, tailRight)
        let bonePnts = [midTail].concat(pnts.slice(2))
        // 计算箭头
        let headPnts = this._getArrowHeadPoints(bonePnts, tailLeft, tailRight)
        let neckLeft = headPnts[0]
        let neckRight = headPnts[4]
        let tailWidthFactor =
            PlotUtil.distance(tailLeft, tailRight) / PlotUtil.getBaseLength(bonePnts)
        // 计算箭身
        let bodyPnts = this._getArrowBodyPoints(
            bonePnts,
            neckLeft,
            neckRight,
            tailWidthFactor
        )

        // 整合
        let count = bodyPnts.length
        let leftPnts = [tailLeft].concat(bodyPnts.slice(0, count / 2))
        leftPnts.push(neckLeft)
        let rightPnts = [tailRight].concat(bodyPnts.slice(count / 2, count))
        rightPnts.push(neckRight)
        leftPnts = PlotUtil.getQBSplinePoints(leftPnts)
        rightPnts = PlotUtil.getQBSplinePoints(rightPnts)

        leftPnts = leftPnts.map(item => (item[2] = pnts[0][2], item))
        headPnts = headPnts.map(item => (item[2] = pnts[0][2], item))
        rightPnts = rightPnts.map(item => (item[2] = pnts[0][2], item))


        return new global.DC.Namespace.Cesium.PolygonHierarchy(
            global.DC.Transform.transformWGS84ArrayToCartesianArray(
                Parse.parsePositions(leftPnts.concat(headPnts, rightPnts.reverse()))
            )
        )
    }
}

export default AttackArrowGraphics

 src/utils/plot/graphics/DoubleArrowGraphics.js

New file
@@ -0,0 +1,243 @@
/**
 * @Author: Caven
 * @Date: 2020-08-30 16:27:29
 */

import { Cesium } from '@dc-modules/namespace'
import Parse from '@dc-modules/parse/Parse'
import { Transform } from '@dc-modules/transform'
import { PlotUtil } from '@dc-modules/utils'

const HALF_PI = Math.PI / 2

class DoubleArrowGraphics {
  constructor(options) {
    this._positions = options?.positions || []
    this.headHeightFactor = 0.25
    this.headWidthFactor = 0.3
    this.neckHeightFactor = 0.85
    this.neckWidthFactor = 0.15
  }

  set positions(positions) {
    this._positions = positions
  }

  get positions() {
    return this._positions
  }

  get hierarchy() {
    return this._createHierarchy()
  }

  _getArrowPoints(pnt1, pnt2, pnt3, clockWise) {
    let midPnt = PlotUtil.mid(pnt1, pnt2)
    let len = PlotUtil.distance(midPnt, pnt3)
    let midPnt1 = PlotUtil.getThirdPoint(pnt3, midPnt, 0, len * 0.3, true)
    let midPnt2 = PlotUtil.getThirdPoint(pnt3, midPnt, 0, len * 0.5, true)
    midPnt1 = PlotUtil.getThirdPoint(
      midPnt,
      midPnt1,
      HALF_PI,
      len / 5,
      clockWise
    )
    midPnt2 = PlotUtil.getThirdPoint(
      midPnt,
      midPnt2,
      HALF_PI,
      len / 4,
      clockWise
    )
    let points = [midPnt, midPnt1, midPnt2, pnt3]
    // 计算箭头部分
    let arrowPnts = this._getArrowHeadPoints(points)
    let neckLeftPoint = arrowPnts[0]
    let neckRightPoint = arrowPnts[4]
    // 计算箭身部分
    let tailWidthFactor =
      PlotUtil.distance(pnt1, pnt2) / PlotUtil.getBaseLength(points) / 2
    let bodyPnts = this._getArrowBodyPoints(
      points,
      neckLeftPoint,
      neckRightPoint,
      tailWidthFactor
    )
    let n = bodyPnts.length
    let lPoints = bodyPnts.slice(0, n / 2)
    let rPoints = bodyPnts.slice(n / 2, n)
    lPoints.push(neckLeftPoint)
    rPoints.push(neckRightPoint)
    lPoints = lPoints.reverse()
    lPoints.push(pnt2)
    rPoints = rPoints.reverse()
    rPoints.push(pnt1)
    return lPoints.reverse().concat(arrowPnts, rPoints)
  }

  _getArrowHeadPoints(points) {
    let len = PlotUtil.getBaseLength(points)
    let headHeight = len * this.headHeightFactor
    let headPnt = points[points.length - 1]
    let headWidth = headHeight * this.headWidthFactor
    let neckWidth = headHeight * this.neckWidthFactor
    let neckHeight = headHeight * this.neckHeightFactor
    let headEndPnt = PlotUtil.getThirdPoint(
      points[points.length - 2],
      headPnt,
      0,
      headHeight,
      true
    )
    let neckEndPnt = PlotUtil.getThirdPoint(
      points[points.length - 2],
      headPnt,
      0,
      neckHeight,
      true
    )
    let headLeft = PlotUtil.getThirdPoint(
      headPnt,
      headEndPnt,
      HALF_PI,
      headWidth,
      false
    )
    let headRight = PlotUtil.getThirdPoint(
      headPnt,
      headEndPnt,
      HALF_PI,
      headWidth,
      true
    )
    let neckLeft = PlotUtil.getThirdPoint(
      headPnt,
      neckEndPnt,
      HALF_PI,
      neckWidth,
      false
    )
    let neckRight = PlotUtil.getThirdPoint(
      headPnt,
      neckEndPnt,
      HALF_PI,
      neckWidth,
      true
    )
    return [neckLeft, headLeft, headPnt, headRight, neckRight]
  }

  _getArrowBodyPoints(points, neckLeft, neckRight, tailWidthFactor) {
    let allLen = PlotUtil.wholeDistance(points)
    let len = PlotUtil.getBaseLength(points)
    let tailWidth = len * tailWidthFactor
    let neckWidth = PlotUtil.distance(neckLeft, neckRight)
    let widthDif = (tailWidth - neckWidth) / 2
    let tempLen = 0
    let leftBodyPnts = []
    let rightBodyPnts = []
    for (let i = 1; i < points.length - 1; i++) {
      let angle =
        PlotUtil.getAngleOfThreePoints(
          points[i - 1],
          points[i],
          points[i + 1]
        ) / 2
      tempLen += PlotUtil.distance(points[i - 1], points[i])
      let w = (tailWidth / 2 - (tempLen / allLen) * widthDif) / Math.sin(angle)
      let left = PlotUtil.getThirdPoint(
        points[i - 1],
        points[i],
        Math.PI - angle,
        w,
        true
      )
      let right = PlotUtil.getThirdPoint(
        points[i - 1],
        points[i],
        angle,
        w,
        false
      )
      leftBodyPnts.push(left)
      rightBodyPnts.push(right)
    }
    return leftBodyPnts.concat(rightBodyPnts)
  }

  _getTempPoint4(linePnt1, linePnt2, point) {
    let midPnt = PlotUtil.mid(linePnt1, linePnt2)
    let len = PlotUtil.distance(midPnt, point)
    let angle = PlotUtil.getAngleOfThreePoints(linePnt1, midPnt, point)
    let symPnt, distance1, distance2, mid
    if (angle < HALF_PI) {
      distance1 = len * Math.sin(angle)
      distance2 = len * Math.cos(angle)
      mid = PlotUtil.getThirdPoint(linePnt1, midPnt, HALF_PI, distance1, false)
      symPnt = PlotUtil.getThirdPoint(midPnt, mid, HALF_PI, distance2, true)
    } else if (angle >= HALF_PI && angle < Math.PI) {
      distance1 = len * Math.sin(Math.PI - angle)
      distance2 = len * Math.cos(Math.PI - angle)
      mid = PlotUtil.getThirdPoint(linePnt1, midPnt, HALF_PI, distance1, false)
      symPnt = PlotUtil.getThirdPoint(midPnt, mid, HALF_PI, distance2, false)
    } else if (angle >= Math.PI && angle < Math.PI * 1.5) {
      distance1 = len * Math.sin(angle - Math.PI)
      distance2 = len * Math.cos(angle - Math.PI)
      mid = PlotUtil.getThirdPoint(linePnt1, midPnt, HALF_PI, distance1, true)
      symPnt = PlotUtil.getThirdPoint(midPnt, mid, HALF_PI, distance2, true)
    } else {
      distance1 = len * Math.sin(Math.PI * 2 - angle)
      distance2 = len * Math.cos(Math.PI * 2 - angle)
      mid = PlotUtil.getThirdPoint(linePnt1, midPnt, HALF_PI, distance1, true)
      symPnt = PlotUtil.getThirdPoint(midPnt, mid, HALF_PI, distance2, false)
    }
    return symPnt
  }

  _createHierarchy() {
    let count = this._positions.length
    let tempPoint4 = undefined
    let connPoint = undefined
    let pnts = Parse.parsePolygonCoordToArray(
      Transform.transformCartesianArrayToWGS84Array(this._positions)
    )[0]
    let pnt1 = pnts[0]
    let pnt2 = pnts[1]
    let pnt3 = pnts[2]
    if (count === 3) tempPoint4 = this._getTempPoint4(pnt1, pnt2, pnt3)
    else tempPoint4 = pnts[3]
    if (count === 3 || count === 4) connPoint = PlotUtil.mid(pnt1, pnt2)
    else connPoint = pnts[4]
    let leftArrowPnts, rightArrowPnts
    if (PlotUtil.isClockWise(pnt1, pnt2, pnt3)) {
      leftArrowPnts = this._getArrowPoints(pnt1, connPoint, tempPoint4, false)
      rightArrowPnts = this._getArrowPoints(connPoint, pnt2, pnt3, true)
    } else {
      leftArrowPnts = this._getArrowPoints(pnt2, connPoint, pnt3, false)
      rightArrowPnts = this._getArrowPoints(connPoint, pnt1, tempPoint4, true)
    }
    let m = leftArrowPnts.length
    let t = (m - 5) / 2
    let llBodyPnts = leftArrowPnts.slice(0, t)
    let lArrowPnts = leftArrowPnts.slice(t, t + 5)
    let lrBodyPnts = leftArrowPnts.slice(t + 5, m)
    let rlBodyPnts = rightArrowPnts.slice(0, t)
    let rArrowPnts = rightArrowPnts.slice(t, t + 5)
    let rrBodyPnts = rightArrowPnts.slice(t + 5, m)
    rlBodyPnts = PlotUtil.getBezierPoints(rlBodyPnts)
    let bodyPnts = PlotUtil.getBezierPoints(
      rrBodyPnts.concat(llBodyPnts.slice(1))
    )
    lrBodyPnts = PlotUtil.getBezierPoints(lrBodyPnts)
    return new Cesium.PolygonHierarchy(
      Transform.transformWGS84ArrayToCartesianArray(
        Parse.parsePositions(
          rlBodyPnts.concat(rArrowPnts, bodyPnts, lArrowPnts, lrBodyPnts)
        )
      )
    )
  }
}

export default DoubleArrowGraphics

 src/utils/plot/graphics/FineArrowGraphics.js

New file
@@ -0,0 +1,97 @@
/**
 * @Author: Caven
 * @Date: 2020-08-30 17:10:33
 */

import { Cesium } from '@dc-modules/namespace'
import Parse from '@dc-modules/parse/Parse'
import { Transform } from '@dc-modules/transform'
import { PlotUtil } from '@dc-modules/utils'

const HALF_PI = Math.PI / 2

class FineArrowGraphics {
  constructor(options) {
    this._positions = options?.positions || []
    this.tailWidthFactor = 0.15
    this.neckWidthFactor = 0.2
    this.headWidthFactor = 0.25
    this.headAngle = Math.PI / 8.5
    this.neckAngle = Math.PI / 13
  }

  set positions(positions) {
    this._positions = positions
  }

  get positions() {
    return this._positions
  }

  get hierarchy() {
    return this._createHierarchy()
  }

  _createHierarchy() {
    let pnts = Parse.parsePolygonCoordToArray(
      Transform.transformCartesianArrayToWGS84Array(this._positions)
    )[0]
    let pnt1 = pnts[0]
    let pnt2 = pnts[1]
    let len = PlotUtil.getBaseLength(pnts)
    let tailWidth = len * this.tailWidthFactor
    let neckWidth = len * this.neckWidthFactor
    let headWidth = len * this.headWidthFactor
    let tailLeft = PlotUtil.getThirdPoint(pnt2, pnt1, HALF_PI, tailWidth, true)
    let tailRight = PlotUtil.getThirdPoint(
      pnt2,
      pnt1,
      HALF_PI,
      tailWidth,
      false
    )
    let headLeft = PlotUtil.getThirdPoint(
      pnt1,
      pnt2,
      this.headAngle,
      headWidth,
      false
    )
    let headRight = PlotUtil.getThirdPoint(
      pnt1,
      pnt2,
      this.headAngle,
      headWidth,
      true
    )
    let neckLeft = PlotUtil.getThirdPoint(
      pnt1,
      pnt2,
      this.neckAngle,
      neckWidth,
      false
    )
    let neckRight = PlotUtil.getThirdPoint(
      pnt1,
      pnt2,
      this.neckAngle,
      neckWidth,
      true
    )
    return new Cesium.PolygonHierarchy(
      Transform.transformWGS84ArrayToCartesianArray(
        Parse.parsePositions([
          tailLeft,
          neckLeft,
          headLeft,
          pnt2,
          headRight,
          neckRight,
          tailRight
        ])
      )
    )
  }
}

export default FineArrowGraphics

 src/utils/plot/graphics/GatheringPlaceGraphics.js

New file
@@ -0,0 +1,78 @@
/**
 * @Author: Caven
 * @Date: 2020-08-30 17:17:52
 */

import { Cesium } from '@dc-modules/namespace'
import Parse from '@dc-modules/parse/Parse'
import { Transform } from '@dc-modules/transform'
import { PlotUtil } from '@dc-modules/utils'

const HALF_PI = Math.PI / 2

const FITTING_COUNT = 100

class GatheringPlaceGraphics {
  constructor(options) {
    this._positions = options?.positions || []
    this.t = 0.4
  }

  set positions(positions) {
    this._positions = positions
  }

  get positions() {
    return this._positions
  }

  get hierarchy() {
    return this._createHierarchy()
  }

  _createHierarchy() {
    let pnts = Parse.parsePolygonCoordToArray(
      Transform.transformCartesianArrayToWGS84Array(this._positions)
    )[0]
    if (this._positions.length === 2) {
      let mid = PlotUtil.mid(pnts[0], pnts[1])
      let d = PlotUtil.distance(pnts[0], mid) / 0.9
      let pnt = PlotUtil.getThirdPoint(pnts[0], mid, HALF_PI, d, true)
      pnts = [pnts[0], pnt, pnts[1]]
    }
    let mid = PlotUtil.mid(pnts[0], pnts[2])
    pnts.push(mid, pnts[0], pnts[1])
    let normals = []
    for (let i = 0; i < pnts.length - 2; i++) {
      let pnt1 = pnts[i]
      let pnt2 = pnts[i + 1]
      let pnt3 = pnts[i + 2]
      let normalPoints = PlotUtil.getBisectorNormals(this.t, pnt1, pnt2, pnt3)
      normals = normals.concat(normalPoints)
    }
    let count = normals.length
    normals = [normals[count - 1]].concat(normals.slice(0, count - 1))
    let pList = []
    for (let i = 0; i < pnts.length - 2; i++) {
      let pnt1 = pnts[i]
      let pnt2 = pnts[i + 1]
      pList.push(pnt1)
      for (let t = 0; t <= FITTING_COUNT; t++) {
        let pnt = PlotUtil.getCubicValue(
          t / FITTING_COUNT,
          pnt1,
          normals[i * 2],
          normals[i * 2 + 1],
          pnt2
        )
        pList.push(pnt)
      }
      pList.push(pnt2)
    }
    return new Cesium.PolygonHierarchy(
      Transform.transformWGS84ArrayToCartesianArray(Parse.parsePositions(pList))
    )
  }
}

export default GatheringPlaceGraphics

 src/utils/plot/graphics/TailedAttackArrowGraphics.js

New file
@@ -0,0 +1,76 @@
/**
 * @Author: Caven
 * @Date: 2020-08-30 17:26:34
 */

import { Cesium } from '@dc-modules/namespace'
import Parse from '@dc-modules/parse/Parse'
import { Transform } from '@dc-modules/transform'
import { PlotUtil } from '@dc-modules/utils'
import AttackArrowGraphics from './AttackArrowGraphics'

class TailedAttackArrowGraphics extends AttackArrowGraphics {
  constructor(options) {
    super(options)
    this.headHeightFactor = 0.18
    this.headWidthFactor = 0.3
    this.neckHeightFactor = 0.85
    this.neckWidthFactor = 0.15
    this.tailWidthFactor = 0.1
    this.headTailFactor = 0.8
    this.swallowTailFactor = 1
  }

  _createHierarchy() {
    let pnts = Parse.parsePolygonCoordToArray(
      Transform.transformCartesianArrayToWGS84Array(this._positions)
    )[0]
    let tailLeft = pnts[0]
    let tailRight = pnts[1]
    if (PlotUtil.isClockWise(pnts[0], pnts[1], pnts[2])) {
      tailLeft = pnts[1]
      tailRight = pnts[0]
    }
    let midTail = PlotUtil.mid(tailLeft, tailRight)
    let bonePnts = [midTail].concat(pnts.slice(2))
    let headPnts = this._getArrowHeadPoints(bonePnts, tailLeft, tailRight)
    let neckLeft = headPnts[0]
    let neckRight = headPnts[4]
    let tailWidth = PlotUtil.distance(tailLeft, tailRight)
    let allLen = PlotUtil.getBaseLength(bonePnts)
    let len = allLen * this.tailWidthFactor * this.swallowTailFactor
    let swallowTailPnt = PlotUtil.getThirdPoint(
      bonePnts[1],
      bonePnts[0],
      0,
      len,
      true
    )
    let factor = tailWidth / allLen
    let bodyPnts = this._getArrowBodyPoints(
      bonePnts,
      neckLeft,
      neckRight,
      factor
    )
    let count = bodyPnts.length
    let leftPnts = [tailLeft].concat(bodyPnts.slice(0, count / 2))
    leftPnts.push(neckLeft)
    let rightPnts = [tailRight].concat(bodyPnts.slice(count / 2, count))
    rightPnts.push(neckRight)
    leftPnts = PlotUtil.getQBSplinePoints(leftPnts)
    rightPnts = PlotUtil.getQBSplinePoints(rightPnts)
    return new Cesium.PolygonHierarchy(
      Transform.transformWGS84ArrayToCartesianArray(
        Parse.parsePositions(
          leftPnts.concat(headPnts, rightPnts.reverse(), [
            swallowTailPnt,
            leftPnts[0]
          ])
        )
      )
    )
  }
}

export default TailedAttackArrowGraphics

 src/utils/tools/DrawTool.js

New file
@@ -0,0 +1,216 @@
/**
 * @Author: Caven
 * @Date: 2021-07-14 20:28:14
 */

import { PlotEventType, PlotEvent } from '@/utils/event/index.js'

const IMG_CIRCLE_RED = '/images/circle_red.png'

const IMG_CIRCLE_YELLOW = '/images/circle_yellow.png'

const DEF_OPTS = {
    icon_center: IMG_CIRCLE_YELLOW,
    icon_anchor: IMG_CIRCLE_RED,
    icon_size: [12, 12],
    clampToModel: false
}

class DrawTool {
    constructor() {
        this._viewer = undefined
        this._anchorLayer = new global.DC.Namespace.Cesium.CustomDataSource('draw-anchor-layer')
        this._floatingAnchor = undefined
        this._options = {}
        this._plotEvent = new PlotEvent()
        this._tooltipMess = undefined
    }

    set tooltipMess (tooltipMess) {
        this._tooltipMess = tooltipMess
        return this
    }

    /**
     *
     * @param e
     * @returns {boolean}
     * @private
     */
    _onClick (e) {
        let position =
            this._options.clampToModel && e.position ? e.position : e.surfacePosition
        if (!position) {
            return false
        }

        if (!this._floatingAnchor) {
            this._floatingAnchor = this._onCreateAnchor({ position })
        }

        this._plotEvent.fire(PlotEventType.DRAW_ANCHOR, position)
    }

    /**
     *
     * @param e
     * @private
     */
    _onMouseMove (e) {
        e.windowPosition.x = e.windowPosition.x + 20
        this._viewer.tooltip.showAt(e.windowPosition, this._tooltipMess)
        let position =
            this._options.clampToModel && e.position ? e.position : e.surfacePosition
        if (!position) {
            return false
        }
        this._floatingAnchor && this._floatingAnchor.position.setValue(position)
        this._plotEvent.fire(PlotEventType.ANCHOR_MOVING, position)
    }

    /**
     *
     * @param e
     * @private
     */
    _onRightClick (e) {
        this._plotEvent.fire(
            PlotEventType.DRAW_STOP,
            this._options.clampToModel && e.position ? e.position : e.surfacePosition
        )
    }

    /**
     *
     * @param position
     * @param isCenter
     * @returns {*}
     * @private
     */
    _onCreateAnchor ({ position, isCenter = false }) {
        return this._anchorLayer.entities.add({
            position: position,
            billboard: {
                image: isCenter ? this._options.icon_center : this._options.icon_anchor,
                width: this._options.icon_size[0],
                height: this._options.icon_size[1],
                // eyeOffset: new global.DC.Namespace.Cesium.Cartesian3(0, 0, -100),
                heightReference:
                    this._viewer.scene.mode === global.DC.Namespace.Cesium.SceneMode.SCENE3D &&
                        !this._options.clampToModel
                        ? global.DC.Namespace.Cesium.HeightReference.CLAMP_TO_GROUND
                        : global.DC.Namespace.Cesium.HeightReference.NONE
            }
        })
    }

    /**
     *
     * @private
     */
    _onClearAnchor () {
        this._anchorLayer.entities.removeAll()
    }

    /**
     *
     * @private
     */
    _bindEvent () {
        this._viewer.on(global.DC.MouseEventType.CLICK, this._onClick, this)
        this._viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this._onMouseMove, this)
        this._viewer.on(global.DC.MouseEventType.RIGHT_CLICK, this._onRightClick, this)
        this._plotEvent.on(PlotEventType.CREATE_ANCHOR, this._onCreateAnchor, this)
        this._plotEvent.on(PlotEventType.CLEAR_ANCHOR, this._onClearAnchor, this)
    }

    /**
     *
     * @private
     */
    _unbindEvent () {
        this._viewer.off(global.DC.MouseEventType.CLICK, this._onClick, this)
        this._viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this._onMouseMove, this)
        this._viewer.off(global.DC.MouseEventType.RIGHT_CLICK, this._onRightClick, this)
        this._plotEvent.off(PlotEventType.CREATE_ANCHOR, this._onCreateAnchor, this)
        this._plotEvent.off(PlotEventType.CLEAR_ANCHOR, this._onClearAnchor, this)
    }

    /**
     *
     * @param type
     * @param callback
     * @param context
     * @returns {DrawTool}
     */
    on (type, callback, context) {
        this._plotEvent.on(type, callback, context || this)
        return this
    }

    /**
     *
     * @param type
     * @param callback
     * @param context
     * @returns {DrawTool}
     */
    off (type, callback, context) {
        this._plotEvent.off(type, callback, context || this)
        return this
    }

    /**
     *
     * @param type
     * @param parmas
     * @returns {DrawTool}
     */
    fire (type, parmas) {
        this._plotEvent.fire(type, parmas)
        return this
    }

    /**
     *
     * @param options
     * @returns {DrawTool}
     */
    activate (options = {}) {
        this._viewer.tooltip.enable = true
        this._options = { ...DEF_OPTS, ...options }
        this._unbindEvent()
        this._bindEvent()
        this.fire(PlotEventType.DRAW_START, this._options)
        return this
    }

    /**
     *
     * @returns {DrawTool}
     */
    deactivate () {
        this._unbindEvent()
        this._viewer.tooltip.enable = false
        this._anchorLayer.entities.removeAll()
        this._floatingAnchor = undefined
        return this
    }

    /**
     *
     * @param viewer
     */
    install (viewer) {
        this._viewer = viewer
        this._viewer.dataSources.add(this._anchorLayer)
        Object.defineProperty(this._viewer, 'curDrawTool', {
            value: this,
            writable: true,
            configurable: true,
            enumerable: true
        })
    }
}

export default DrawTool

 src/utils/tools/EditTool.js

New file
@@ -0,0 +1,284 @@
/**
 * @Author: Caven
 * @Date: 2021-07-14 20:28:10
 */

import { PlotEventType, PlotEvent } from '@/utils/event/index.js'

const IMG_CIRCLE_RED = '/images/circle_red.png'

const IMG_CIRCLE_BLUE = '/images/circle_blue.png'

const IMG_CIRCLE_YELLOW = '/images/circle_yellow.png'

const DEF_OPTS = {
    icon_center: IMG_CIRCLE_YELLOW,
    icon_anchor: IMG_CIRCLE_RED,
    icon_midAnchor: IMG_CIRCLE_BLUE,
    icon_size: [12, 12],
    clampToModel: true
}

class EditTool {
    constructor() {
        this._viewer = undefined
        this._anchorLayer = new global.DC.Namespace.Cesium.CustomDataSource('edit-anchor-layer')
        this._options = {}
        this._plotEvent = new PlotEvent()
        this._tooltipMess = undefined
        this._pickedAnchor = undefined
        this._isMoving = false
        this._anchors = []
    }

    set tooltipMess (tooltipMess) {
        this._tooltipMess = tooltipMess
        return this
    }

    /**
     *
     * @param e
     * @returns {boolean}
     * @private
     */
    _onClick (e) {
        if (this._isMoving) {
            let position =
                this._options.clampToModel && e.position
                    ? e.position
                    : e.surfacePosition
            if (!position) {
                return false
            }
            if (
                this._pickedAnchor &&
                this._pickedAnchor.position &&
                this._pickedAnchor.properties
            ) {
                this._pickedAnchor.position.setValue(position)
                this._plotEvent.fire(PlotEventType.EDIT_ANCHOR_STOP, {
                    pickedAnchor: this._pickedAnchor,
                    position
                })
            }
            this._isMoving = false
        } else {
            if (!e.target || !e.target.id) {
                return false
            }
            this._pickedAnchor = e.target.id
            this._isMoving = true
        }
    }

    /**
     *
     * @param e
     * @private
     */
    _onMouseMove (e) {
        e.windowPosition.x = e.windowPosition.x + 20
        this._viewer.tooltip.showAt(e.windowPosition, this._tooltipMess)
        if (!this._isMoving && this._anchors.length !== 0) {
            return false
        }
        let position =
            this._options.clampToModel && e.position ? e.position : e.surfacePosition
        if (!position) {
            return false
        }
        if (
            this._pickedAnchor &&
            this._pickedAnchor.position &&
            this._pickedAnchor.properties
        ) {
            this._pickedAnchor.position.setValue(position)
            this._plotEvent.fire(PlotEventType.ANCHOR_MOVING, {
                pickedAnchor: this._pickedAnchor,
                position
            })
        } else if (this._anchors.length === 0) {
            this._plotEvent.fire(PlotEventType.ANCHOR_MOVING, {
                position
            })
        }
    }

    /**
     *
     * @param e
     * @private
     */
    _onRightClick (e) {
        let position =
            this._options.clampToModel && e.position ? e.position : e.surfacePosition
        this._plotEvent.fire(PlotEventType.EDIT_STOP, {
            pickedAnchor: this._pickedAnchor,
            position
        })
    }

    /**
     *
     * @param position
     * @param index
     * @param isCenter
     * @param isMid
     * @private
     */
    _onCreateAnchor ({ position, index, isCenter = false, isMid = false }) {
        let image = isMid
            ? this._options.icon_midAnchor
            : isCenter
                ? this._options.icon_center
                : this._options.icon_anchor
        let anchor = this._anchorLayer.entities.add({
            position: position,
            billboard: {
                image: image,
                width: 12,
                height: 12,
                eyeOffset: new global.DC.Namespace.Cesium.Cartesian3(0, 0, -100),
                heightReference:
                    this._viewer.scene.mode === global.DC.Namespace.Cesium.SceneMode.SCENE3D &&
                        !this._options.clampToModel
                        ? global.DC.Namespace.Cesium.HeightReference.CLAMP_TO_GROUND
                        : global.DC.Namespace.Cesium.HeightReference.NONE
            },
            properties: {
                isMid: isMid,
                index: index
            }
        })
        this._anchors.push(anchor)
    }

    /**
     *
     * @param index
     * @param position
     * @private
     */
    _onUpdateAnchor ({ index, position }) {
        this._anchors[index] && this._anchors[index].position.setValue(position)
    }

    /**
     *
     * @private
     */
    _onClearAnchor () {
        this._anchorLayer.entities.removeAll()
        this._anchors = []
    }

    /**
     *
     * @private
     */
    _bindEvent () {
        this._viewer.on(global.DC.MouseEventType.CLICK, this._onClick, this)

        this._viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this._onMouseMove, this)

        this._viewer.on(global.DC.MouseEventType.RIGHT_CLICK, this._onRightClick, this)

        this._plotEvent.on(PlotEventType.CREATE_ANCHOR, this._onCreateAnchor, this)

        this._plotEvent.on(PlotEventType.UPDATE_ANCHOR, this._onUpdateAnchor, this)

        this._plotEvent.on(PlotEventType.CLEAR_ANCHOR, this._onClearAnchor, this)
    }

    /**
     *
     * @private
     */
    _unbindEvent () {
        this._viewer.off(global.DC.MouseEventType.CLICK, this._onClick, this)
        this._viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this._onMouseMove, this)
        this._viewer.off(global.DC.MouseEventType.RIGHT_CLICK, this._onRightClick, this)
        this._plotEvent.off(PlotEventType.CREATE_ANCHOR, this._onCreateAnchor, this)
        this._plotEvent.off(PlotEventType.UPDATE_ANCHOR, this._onUpdateAnchor, this)
        this._plotEvent.off(PlotEventType.CLEAR_ANCHOR, this._onClearAnchor, this)
    }

    /**
     *
     * @param type
     * @param callback
     * @param context
     * @returns {EditTool}
     */
    on (type, callback, context) {
        this._plotEvent.on(type, callback, context || this)
        return this
    }

    /**
     *
     * @param type
     * @param callback
     * @param context
     * @returns {EditTool}
     */
    off (type, callback, context) {
        this._plotEvent.off(type, callback, context || this)
        return this
    }

    /**
     *
     * @param type
     * @param parmas
     * @returns {EditTool}
     */
    fire (type, parmas) {
        this._plotEvent.fire(type, parmas)
        return this
    }

    /**
     *
     * @param options
     * @returns {EditTool}
     */
    activate (options = {}) {
        this._viewer.tooltip.enable = true
        this._options = { ...DEF_OPTS, ...options }
        this._unbindEvent()
        this._bindEvent()
        this.fire(PlotEventType.EDIT_START, this._options)
        return this
    }

    /**
     *
     * @returns {EditTool}
     */
    deactivate () {
        this._unbindEvent()
        this._viewer.tooltip.enable = false
        this._anchorLayer.entities.removeAll()
        this._anchors = []
        return this
    }

    /**
     *
     * @param viewer
     */
    install (viewer) {
        this._viewer = viewer
        this._viewer.dataSources.add(this._anchorLayer)
        Object.defineProperty(this._viewer, 'curEditTool', {
            value: this,
            writable: true,
            configurable: true,
            enumerable: true
        })
    }
}

export default EditTool

 src/utils/tools/index.js

New file
@@ -0,0 +1,24 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-23 14:51:01
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-23 15:34:18
 * @FilePath: \forest-fire\src\utils\tools\index.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
/**
 * @Author: Caven
 * @Date: 2021-07-14 20:25:41
 */

import DrawTool from './DrawTool'
import EditTool from './EditTool'

export default function createTools () {
    return {
        curDrawTool: new DrawTool(),
        curEditTool: new EditTool()
    }
}

 src/views/activity/components/drawBtnBox copy.vue

New file
@@ -0,0 +1,1005 @@
<template>
    <div v-show="dialogVisible && isShowActivityEditBox" class="draw-btn-box">
        <div class="left">
            <h3>预案布置</h3>
            <div>
                <span>要素资源：</span>
                <ul>
                    <li>
                        <button @click="draw('billboard', 'policeman')" title="警员">
                            <img src="/img/icon/police-people-btn.png" style="height:100%" />
                        </button>
                    </li>
                    <li>
                        <button @click="draw('billboard', 'policecar')" title="警车">
                            <img src="/img/icon/car-btn.png" style="height:100%" />
                        </button>
                    </li>
                    <li>
                        <button @click="drawArrow('billboard', 'icon1')" title="普通群众">普通群众</button>
                    </li>
                    <li>
                        <button @click="drawArrow('billboard', 'icon2')" title="保护对象">保护对象</button>
                    </li>
                    <li>
                        <button @click="drawArrow('billboard', 'icon3')" title="危险人物">危险人物</button>
                    </li>
                </ul>
            </div>
            <div>
                <span>作战标绘：</span>

                <ul>
                    <li>
                        <button @click="drawArrow('attack_arrow')" title="进攻箭头">进攻箭头</button>
                    </li>
                    <li>
                        <button @click="drawArrow('double_arrow')" title="双箭头">双箭头</button>
                    </li>
                    <li>
                        <button @click="drawArrow('fine_arrow')" title="直箭头">直箭头</button>
                    </li>
                    <li>
                        <button @click="drawArrow('tailed_attack_arrow')" title="燕尾箭头">燕尾箭头</button>
                    </li>
                    <li>
                        <button @click="drawArrow('polygon')" title="多边形">多边形</button>
                    </li>
                    <li>
                        <button @click="drawArrowLabel" title="文字标注">文字标注</button>
                    </li>
                </ul>
            </div>
            <div>
                <span>巡逻路线：</span>
                <ul>
                    <li>
                        <!-- <el-button
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ></el-button>-->
                        <button @click="draw('polyline', 'policecar')" title="巡逻路线">
                            <img src="/img/icon/route1.png" style="height:100%" />
                        </button>
                    </li>
                </ul>
            </div>
        </div>

        <el-dialog :title="labelPopupTitle" :modal="false" :visible.sync="addLabelVisible" :close-on-click-modal="true"
            class="add-label-box" :before-close="cancelSaveLabel">
            <div>
                <div class="value-name-box">文字内容：</div>
                <div class="input-width-box">
                    <input type="text" v-model="labelInput" placeholder="请输入..." />
                </div>
            </div>
            <div>
                <div class="value-name-box">字体大小：</div>
                <div class="input-fontsize-box">
                    <el-input-number v-model="labelInputFontSize" :step="2" :min="12" max="72"
                        step-strictly></el-input-number>
                </div>
            </div>
            <div>
                <div class="value-name-box">字体颜色：</div>
                <div class="pick-color-box">
                    <el-color-picker v-model="labelInputFontColor" :predefine="predefineColors" size="small">
                    </el-color-picker>
                </div>
            </div>
            <div class="btn-box">
                <el-button @click="lableBoxSave">保存</el-button>
                <el-button @click="lableBoxDelete">删除</el-button>
                <el-button @click="cancelSaveLabel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    updateActivityCar, updateActivityPolice,
    updateSecurityPlot
} from '@/api/activity/index.js'

let plotDrawEmit = undefined

let drawArrowLayers = null
let isAddLabel = false

let curLabelOverLayer = null
let drawLabelStatus = 'end'
let labelPositionChange = false

let labelOverLayerID = []

let eventLast = 0
let addPlotOverlayData = null
let addPoliceIconOverlayData = null
let lableOverlayData = null

export default {
    props: [
        'dialogVisible', 'isShowActivityEditBox', 'showingSecurityId',
        'policeSwitch', 'polylineBtnSwitch',
        'arrowBtnSwitch', 'policeIconId', 'lineWidth'],

    data () {
        return {
            addLabelVisible: false,// 文字标注的窗口（内容是名称）
            labelInput: '',
            addLabelPosition: null,
            labelPopupTitle: '添加文字标注',
            labelId: '',
            labelInputFontSize: '40',
            labelInputFontColor: '#FFFFFF',
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, )',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%)',
                '#c7158577'
            ],
        }
    },

    mounted () {
        drawLabelStatus = 'end'

        this.$nextTick(() => {
            plotDrawEmit = new global.DC.Plot(global.viewer, {
                clampToModel: true
            })

            if (drawArrowLayers == null) {
                drawArrowLayers = new global.DC.VectorLayer('drawArrowLayers')
                global.viewer.addLayer(drawArrowLayers)
            }

            global.viewer.on(global.DC.MouseEventType.CLICK, this.viewerClick)
            global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.viewerLableMove)
            global.viewer.on(global.DC.MouseEventType.LEFT_UP, this.labelUp)

            // global.viewer.scene.globe.depthTestAgainstTerrain = true
        })

    },

    methods: {
        // 地图元素绘制
        draw (poltType, policeType) {

            labelPositionChange = false
            drawLabelStatus = 'end'
            isAddLabel = false

            let flag = false

            const that = this

            global.viewer.tooltip.enable = true

            plotDrawEmit && plotDrawEmit.draw(poltType, overlay => {
                if (isAddLabel) return

                if (poltType == 'billboard' && policeType == 'policeman') {
                    overlay.icon = '/img/icon/man3.png'
                } else if (poltType == 'billboard' && policeType == 'policecar') {
                    overlay.icon = '/img/icon/car3.png'
                }

                if (overlay) {
                    addPoliceIconOverlayData = overlay

                    if (poltType == 'polyline' && 'policecar' == policeType) {
                        that.$parent.addLineLayer(overlay)
                    } else {
                        that.$parent.addPointCircleCarLayer(overlay)
                    }

                    plotDrawEmit.edit(overlay, (e) => {
                        flag = true

                        e.drawType = poltType

                        e.policeType = policeType

                        that.$emit('setOverlayObj', e)

                        document.oncontextmenu = function () {
                            if (flag == true && poltType == 'billboard') {
                                flag == true && that.$parent.addSaveNewDrawPoint(policeType)

                                flag = false
                            } else if (flag == true && poltType == 'polyline') {
                                let position = ''
                                e._positions.forEach(item => {
                                    position += item._lng + ' ' + item._lat + ','
                                })
                                position = position.slice(0, position.length - 1)

                                flag == true && that.$parent.addSaveNewDrawLine(position)

                                flag = false
                            }
                        }
                    })
                }
            }, { material: global.DC.Namespace.Cesium.Color.fromBytes(28, 160, 133, 122) })
        },

        drawArrow (type, iconType) {
            labelPositionChange = false
            drawLabelStatus = 'end'
            isAddLabel = false

            global.viewer.tooltip.enable = true

            const that = this
            let flag = false

            if (type == 'polygon') {
                plotDrawEmit && plotDrawEmit.draw(type, overlay => {
                    if (isAddLabel) return

                    if (overlay) {
                        addPlotOverlayData = overlay

                        that.$parent.addArrowsListLayer(overlay)

                        plotDrawEmit.edit(overlay, (e) => {
                            flag = true

                            let positionStr = ''
                            overlay._positions.forEach(item => {
                                positionStr += item._lng + ' ' + item._lat + ','
                            })
                            positionStr = positionStr.slice(0, positionStr.length - 1)

                            document.oncontextmenu = function () {
                                flag == true && that.$parent.addSaveNewDraw(positionStr, 5)

                                flag = false
                            }
                        })
                    }
                }, { material: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 122) })
            } else if (type == 'billboard') {
                plotDrawEmit && plotDrawEmit.draw(type, overlay => {
                    if (isAddLabel) return

                    if (iconType == 'icon1') {
                        overlay.size = [24, 24]
                    } else if (iconType == 'icon2') {
                        overlay.size = [32, 32]
                    }
                    overlay.icon = `/img/icon/${iconType}.png`
                    if (overlay) {
                        addPlotOverlayData = overlay

                        that.$parent.addPointCircleCarLayer(overlay)

                        plotDrawEmit.edit(overlay, (e) => {
                            flag = true

                            document.oncontextmenu = function () {
                                if (flag) {
                                    flag == true && that.$parent.addPointPopupShow(iconType, `${e._position._lng} ${e._position._lat}`)

                                    flag = false
                                }
                            }
                        })
                    }
                })
            } else {
                plotDrawEmit && plotDrawEmit.draw(type, overlay => {
                    if (isAddLabel) return

                    if (overlay) {
                        let plotType = ''
                        if (type == 'attack_arrow') {
                            plotType = 1
                        } else if (type == 'double_arrow') {
                            plotType = 2
                        } else if (type == 'fine_arrow') {
                            plotType = 3
                        } else if (type == 'tailed_attack_arrow') {
                            plotType = 4
                        }

                        addPlotOverlayData = overlay

                        that.$parent.addArrowsListLayer(overlay)

                        plotDrawEmit.edit(overlay, (e) => {
                            flag = true
                            let positionStr = ''
                            overlay._positions.forEach(item => {
                                positionStr += item._lng + ' ' + item._lat + ','
                            })
                            positionStr = positionStr.slice(0, positionStr.length - 1)

                            document.oncontextmenu = function () {
                                flag == true && that.$parent.addSaveNewDraw(positionStr, plotType)

                                flag = false
                            }
                        })
                    }
                }, { material: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 122) })
            }
        },

        // 删除所有地图绘制元素
        removeDraw () {
            addPoliceIconOverlayData != null && !addPoliceIconOverlayData.attrParams && addPoliceIconOverlayData.remove()
        },

        removeDrawArrow () {
            addPlotOverlayData != null && addPlotOverlayData.remove()
            labelOverLayerID = []
        },

        clearDrawArrow () {
            drawArrowLayers != null && drawArrowLayers.clear()
        },

        // 编辑标绘位置
        plotEdit (overlayData, type) {
            if (type == "arrow") {
                if ('pointOverlayData' in overlayData.attrParams) {
                    overlayData.attrParams.pointOverlayData.remove()
                }

                plotDrawEmit.edit(overlayData, (e) => {
                    let position = ''
                    if ('_positions' in overlayData) {
                        overlayData._positions.forEach((item, index) => {
                            position += item._lng + ' ' + item._lat + ','
                        })
                        position = position.slice(0, position.length - 1)
                    } else {
                        overlayData.position = {
                            lng: Number(overlayData._position._lng),
                            lat: Number(overlayData._position._lat),
                            alt: 0.5,
                        }
                        position = overlayData._position._lng + ' ' + overlayData._position._lat + ',' + overlayData._position._lng + ' ' + overlayData._position._lat
                        let pointPosition = new global.DC.Position(Number(overlayData._position._lng), Number(overlayData._position._lat), 0)
                        let point = new global.DC.Point(pointPosition)
                        drawArrowLayers.addOverlay(point)
                        point.attrParams = { 'id': overlayData.attrParams.id, 'color': overlayData.attrParams.color, 'item': overlayData.attrParams }
                        let r = parseInt(overlayData.attrParams.color.slice(1, 3), 16)
                        let g = parseInt(overlayData.attrParams.color.slice(3, 5), 16)
                        let b = parseInt(overlayData.attrParams.color.slice(5, 7), 16)
                        let a = Math.floor(Number(overlayData.attrParams.color.split(',')[1]) * 2.55)
                        let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
                        point.setStyle({
                            "color": color, //颜色
                            "outlineColor": color, //边框颜色
                            "outlineWidth": 0, //边框大小，
                            "pixelSize": 32,
                        })
                        overlayData.attrParams.pointOverlayData = point
                    }
                    this.updateSecurityPlot({ id: overlayData.attrParams.id, position: position })
                })
            } else if (type == "line") {
                let lineOverlayData = overlayData.attrParams.lineObj

                plotDrawEmit.edit(lineOverlayData, (e) => {
                    let position = ''
                    let lineNewPositions = []
                    lineOverlayData._positions.forEach((item, index) => {
                        if (index % 2 == 0) {
                            position += item._lng + ' ' + item._lat + ','
                            lineNewPositions.push(item)
                        }
                    })
                    overlayData.attrParams.lineObj.positions = lineNewPositions
                    position = position.slice(0, position.length - 1)

                    this.updateActivityCar({
                        id: overlayData.attrParams.id,
                        color: overlayData.attrParams.color,
                        width: overlayData.attrParams.width,
                        type: 1,
                        position: position
                    }, overlayData)
                })
            }
        },

        // 保存新增标绘样式修改
        addNewPlot (item) {
            let r = parseInt(item.color.slice(1, 3), 16)
            let g = parseInt(item.color.slice(3, 5), 16)
            let b = parseInt(item.color.slice(5, 7), 16)
            let a = Math.floor(Number(item.color.split(',')[1]) * 2.55) ? Math.floor(Number(item.color.split(',')[1]) * 2.55) : 255
            let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
            if (item.type == 9) {
                let position = item.position.slice(12, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
                position = position.split(';')[0].split(',')
                position = new global.DC.Position(Number(position[0]), Number(position[1]))
                let label = new global.DC.Label(position, item.name)
                label.attrParams = { 'id': item.id, item }
                label.setStyle({
                    'fillColor': color,
                    "font": `${item.width}px sans-serif`,
                })
                this.lableAllEvent(label)

                this.$parent.addArrowsListLayer(label)
                return
            }

            addPlotOverlayData.attrParams = { 'id': item.id, 'color': item.color, item }
            addPlotOverlayData.setStyle({
                "material": color
            })
            addPlotOverlayData.on(global.DC.MouseEventType.CLICK, this.$parent.reeditArrowClick)
            if (item.type == 6 || item.type == 7 || item.type == 8) {
                let position = item.position.slice(12, item.position.length - 2).split(',')[0].split(' ')
                let pointPosition = new global.DC.Position(Number(position[0]), Number(position[1]))
                addPlotOverlayData.position = {
                    lng: Number(position[0]),
                    lat: Number(position[1]),
                    alt: 0.5,
                }
                let point = new global.DC.Point(pointPosition)

                this.$parent.addPointCircleCarLayer(point)

                point.attrParams = { 'id': item.id, 'color': item.color, item }
                //    point.on(global.DC.MouseEventType.CLICK, this.$parent.reeditArrowClick)
                point.setStyle({
                    "color": color, //颜色
                    "outlineColor": color, //边框颜色
                    "outlineWidth": 0, //边框大小，
                    "pixelSize": 32,
                })
                addPlotOverlayData.attrParams.pointOverlayData = point
            }
            if (item.type == 5 && item.areaType == 2) {
                let addPlotPositionArr = []
                addPlotOverlayData._positions.forEach(inItem => {
                    addPlotPositionArr.push([Number(inItem._lng), Number(inItem._lat)])
                })
                addPlotPositionArr.push([Number(addPlotOverlayData._positions[0]._lng), Number(addPlotOverlayData._positions[0]._lat)])
                let cachePolygon = this.$turf.polygon([addPlotPositionArr])
                let arrowsListLayerOverlayList = this.$parent.getArrowsListLayerOverlayList()
                arrowsListLayerOverlayList.push(...drawArrowLayers.getOverlays())
                arrowsListLayerOverlayList.forEach(inItem => {
                    if (inItem.attrParams.item.type == 5 && inItem.attrParams.item.areaType == 1) {
                        let savePlotPositionArr = []
                        let savePlotPositionStr = []
                        inItem._positions.forEach(ininItem => {
                            savePlotPositionArr.push([Number(ininItem._lng), Number(ininItem._lat)])
                            savePlotPositionStr += ininItem._lng + ',' + ininItem._lat + ';'
                        })
                        savePlotPositionArr.push([Number(inItem._positions[0]._lng), Number(inItem._positions[0]._lat)])
                        let carePolygon = this.$turf.polygon([savePlotPositionArr])
                        let isContains = this.$turf.booleanContains(cachePolygon, carePolygon)
                        // 如果完全包含就作为洞面扣去
                        if (isContains) {
                            addPlotOverlayData.holes = [savePlotPositionStr]
                        }

                    }
                })
            }
        },

        // 保存新增警力资源
        addNewPolice (data, type, carType) {
            // 巡逻路线添加
            if (type == 'policecar' && carType == 1) {
                // 线坐标字符串
                let positionNewArr = this.$parent.convertPolylineOrPolygonPositionDate(data.position, data.type)
                positionNewArr = positionNewArr.slice(1, positionNewArr.length - 2)
                // 范围面坐标串
                let coords = global.DC.GeoTools.polylineBuffer(positionNewArr, data.width != -1 ? data.width : 100)
                let positionStr = ''
                coords.forEach((item, index) => {
                    if (!(index == coords.length - 1)) {
                        positionStr += item[0] + ',' + item[1] + ';'
                    }
                })
                let polygonSavePositionStr = positionStr + coords[0][0] + ',' + coords[0][1] + ';'
                positionStr = positionStr.slice(0, positionStr.length - 1)
                // 面颜色
                let color = ''
                // 线颜色
                let lineColor = ''
                if (data.color == '') {
                    color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
                } else {
                    let r = parseInt(data.color.slice(1, 3), 16)
                    let g = parseInt(data.color.slice(3, 5), 16)
                    let b = parseInt(data.color.slice(5, 7), 16)
                    color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 150)
                    lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                }
                addPoliceIconOverlayData.setStyle({
                    "material": lineColor,
                    'width': 3
                })

                data.linePositionStr = positionNewArr
                data.polygonPositionStr = polygonSavePositionStr
                data.lineObj = addPoliceIconOverlayData

                addPoliceIconOverlayData.attrParams = data

                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'newCarDrawLineLayers',
                    positions: positionStr,
                    material: color,
                    params: data,
                    incident: this.$parent.lineOverlayTypeClick
                })
            } else {
                let positionObj = this.$parent.convertBillboardPositionDate(data, type)
                positionObj.lng = positionObj.lng.slice(1, positionObj.lng.length - 1)
                positionObj.lat = positionObj.lat.slice(0, positionObj.lat.length - 2)
                let positionArr = data.position.slice(7, data.position.length - 2).split(',')[0].split(' ')
                let position = new global.DC.Position(Number(positionArr[0]), Number(positionArr[1]))
                let point = new global.DC.Point(position)
                let color = ''
                if (data.color == '') {
                    color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
                } else {
                    let r = parseInt(data.color.slice(1, 3), 16)
                    let g = parseInt(data.color.slice(3, 5), 16)
                    let b = parseInt(data.color.slice(5, 7), 16)
                    color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                }
                point.attrParams = positionObj
                this.$parent.addPointCircleCarLayer(point)
                point.setStyle({
                    "color": color, //颜色
                    "outlineColor": color, //边框颜色
                    "outlineWidth": 0, //边框大小，
                    "pixelSize": 32,
                })
                // point.on(global.DC.MouseEventType.CLICK, this.$parent.overlayTypeClick)
                point.on(global.DC.MouseEventType.MOUSE_OVER, this.$parent.pointMouseOver)
                point.on(global.DC.MouseEventType.MOUSE_OUT, this.$parent.pointMouseOut)
                addPoliceIconOverlayData.attrParams = positionObj
                addPoliceIconOverlayData.attrParams.pointOverlayData = point
                addPoliceIconOverlayData.position = {
                    lng: Number(positionArr[0]),
                    lat: Number(positionArr[1]),
                    alt: 0.5,
                }
                addPoliceIconOverlayData.on(global.DC.MouseEventType.CLICK, this.$parent.overlayTypeClick)
                // addPoliceIconOverlayData.on(global.DC.MouseEventType.MOUSE_OVER, this.$parent.pointMouseOver)
                // addPoliceIconOverlayData.on(global.DC.MouseEventType.MOUSE_OUT, this.$parent.pointMouseOut)
            }
        },

        // 修改标绘样式
        editPlotStyle (params, overlay) {
            if ('color' in params) {
                let r = parseInt(params.color.slice(1, 3), 16)
                let g = parseInt(params.color.slice(3, 5), 16)
                let b = parseInt(params.color.slice(5, 7), 16)
                let a = Math.floor(Number(params.color.split(',')[1]) * 2.55) ? Math.floor(Number(params.color.split(',')[1]) * 2.55) : 255
                let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
                overlay.attrParams.color = params.color
                if (overlay.attrParams.item.type == 9) {
                    overlay.setStyle({
                        "fillColor": color
                    })
                } else {
                    overlay.setStyle({
                        "material": color
                    })
                }
                if ('pointOverlayData' in overlay.attrParams) {
                    let r = parseInt(params.color.slice(1, 3), 16)
                    let g = parseInt(params.color.slice(3, 5), 16)
                    let b = parseInt(params.color.slice(5, 7), 16)
                    let a = Math.floor(Number(params.color.split(',')[1]) * 2.55)
                    let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
                    overlay.attrParams.pointOverlayData.setStyle({
                        "color": color, //颜色
                        "outlineColor": color, //边框颜色
                        "outlineWidth": 0, //边框大小，
                        "pixelSize": 32,
                    })
                }
            }
            if ('name' in params) {
                addPlotOverlayData.text = params.name
            }

            if ('width' in params) {
                overlay.setStyle({
                    "font": `${params.width}px sans-serif`
                })
            }
        },

        // 修改警车样式
        editPoliceStyle (params, overlay) {
            if ('color' in params && 'pointOverlayData' in overlay.attrParams) {
                overlay.attrParams.data.color = params.color
                overlay.attrParams.pointOverlayData.attrParams.color = params.color
                let r = parseInt(params.color.slice(1, 3), 16)
                let g = parseInt(params.color.slice(3, 5), 16)
                let b = parseInt(params.color.slice(5, 7), 16)
                let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                overlay.attrParams.pointOverlayData.setStyle({
                    "color": color, //颜色
                    "outlineColor": color, //边框颜色
                    "outlineWidth": 0, //边框大小，
                    "pixelSize": 32,
                })
            }

            if ('carId' in params) {
                overlay.attrParams.data.carId = params.carId
            }

            if ('policemanId' in params) {
                overlay.attrParams.data.policemanId = params.policemanId
            }

            if ('width' in params) {
                if (overlay.attrParams && overlay.attrParams.data && overlay.attrParams.data.type && overlay.attrParams.data.type == 3) {
                    overlay.attrParams.data.width = params.width
                } else {
                    let linePosition = ''
                    if ('position' in params) {
                        linePosition = params.position.replace(/,/g, ";").replace(/ /g, ",")
                    } else {
                        linePosition = overlay.attrParams.linePositionStr
                    }
                    let coords = global.DC.GeoTools.polylineBuffer(linePosition, params.width)
                    let positionStr = ''
                    coords.forEach((item, index) => {
                        if (!(index == coords.length - 1)) {
                            positionStr += item[0] + ',' + item[1] + ';'
                        }
                    })
                    positionStr = positionStr.slice(0, positionStr.length - 1)
                    // 面颜色
                    let color = ''
                    // 线颜色
                    let lineColor = ''
                    if (params.color == '') {
                        color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
                    } else {
                        let r = parseInt(params.color.slice(1, 3), 16)
                        let g = parseInt(params.color.slice(3, 5), 16)
                        let b = parseInt(params.color.slice(5, 7), 16)
                        color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 150)
                        lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                    }
                    overlay.attrParams.lineObj.setStyle({
                        "material": lineColor,
                        'width': 3
                    })
                    overlay.attrParams.linePositionStr = linePosition
                    overlay.attrParams.polygonPositionStr = positionStr
                    overlay.attrParams.color = params.color
                    overlay.attrParams.width = params.width

                    this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'newCarDrawLineLayers',
                        positions: positionStr,
                        material: color,
                        params: overlay.attrParams,
                        incident: this.$parent.lineOverlayTypeClick
                    })

                    overlay.remove()
                }
            }
        },

        // 修改警车
        // idid, carId警车id, color颜色, width巡逻路线范围宽度, type线面类型, position坐标
        updateActivityCar (params, overlay) {
            updateActivityCar(params).then(res => {
                if (res.data.success) {
                    this.editPoliceStyle(params, overlay)
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '保存失败',
                        type: 'error'
                    })
                }

            })
        },

        // 修改警员
        // idid, policemanId警察id ,color颜色
        updateActivityPolice (params, overlay) {
            updateActivityPolice(params).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                    this.editPoliceStyle(params, overlay)
                } else {
                    this.$message({
                        message: '保存失败',
                        type: 'error'
                    })
                }
            })
        },

        updateSecurityPlot (params, overlay) {
            updateSecurityPlot(params).then(res => {
                if (res.data.success) {
                    this.editPlotStyle(params, overlay)
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    })
                }
            })
        },

        // 绘制文字标绘
        drawArrowLabel () {
            global.viewer.tooltip.enable = false
            plotDrawEmit != null && plotDrawEmit.stop()

            isAddLabel = true
            this.labelPopupTitle = ""
            drawLabelStatus = 'start'

            this.$emit('drawLabel', drawLabelStatus)
        },

        /**
         * @description: 点击覆盖物获取到的位置信息
         * @param {*} e
         * @return {*}
         */
        overlayClickPosition (e) {
            this.labelShowPopup(e)
        },

        /**
         * @description: 点击地图拿到的位置信息
         * @param {*} e
         * @return {*}
         */
        viewerClick (e) {
            if (drawLabelStatus == 'start') {
                this.labelShowPopup(e)
            }
        },

        // 文字编辑弹窗
        labelShowPopup (e) {
            this.labelPopupTitle = '添加文字标注'
            this.labelInputFontSize = 40
            this.labelInputFontColor = '#FFFFFF'
            this.addLabelVisible = true
            this.addLabelPosition = e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat + ',' + e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat
            this.labelInput = ''
        },

        // 文字标注窗口的添加按钮
        lableBoxSave () {
            if (this.labelInput == '') {
                this.$message({
                    message: '请输入标注文字',
                    type: 'error'
                })
            } else {
                if (this.labelPopupTitle == "添加文字标注") {
                    this.$parent.addSecurityPlot({ securityId: this.showingSecurityId, position: this.addLabelPosition, type: 9, name: this.labelInput, color: this.labelInputFontColor, width: this.labelInputFontSize })
                } else {
                    this.updateSecurityPlot({ id: this.labelId, name: this.labelInput, color: this.labelInputFontColor, width: this.labelInputFontSize }, addPlotOverlayData)
                }
                this.cancelSaveLabel()
            }
        },

        // 文字标注窗口的删除按钮
        lableBoxDelete () {
            this.$parent.deleteSecurityPlot(this.labelId)
            addPlotOverlayData && addPlotOverlayData.remove()
            this.cancelSaveLabel()
        },

        lableAllEvent (label) {
            labelOverLayerID.push(label.attrParams.id)
            label.on(global.DC.MouseEventType.CLICK, this.reEditLabel)
            label.on(global.DC.MouseEventType.LEFT_DOWN, this.labelDowm)
        },

        labelDowm (e) {
            eventLast = 0

            setTimeout(() => {
                if (eventLast == 0) {
                    this.$EventBus.$emit('closeTooltip')

                    labelPositionChange = true
                    curLabelOverLayer = e.overlay
                    global.viewer.scene.screenSpaceCameraController.enableRotate = false
                    global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.updateLableMove)
                }
            }, 500)
        },

        labelUp (e) {
            eventLast = new Date().getTime()
            if (labelPositionChange == true) {
                global.viewer.scene.screenSpaceCameraController.enableRotate = true
                global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.updateLableMove)

                // curLabelOverLayer 中的位置就是移动后的位置
                let position = curLabelOverLayer._position._lng + ' ' + curLabelOverLayer._position._lat + ',' + curLabelOverLayer._position._lng + ' ' + curLabelOverLayer._position._lat
                this.updateSecurityPlot({ id: curLabelOverLayer.attrParams.id, position: position })
                labelPositionChange = false
            }
        },

        updateLableMove (e) {
            this.$EventBus.$emit('closeTooltip')
            curLabelOverLayer.position = {
                lng: e.wgs84SurfacePosition.lng,
                lat: e.wgs84SurfacePosition.lat,
                alt: e.wgs84SurfacePosition.alt,
                heading: curLabelOverLayer.position.heading,
                pitch: curLabelOverLayer.position.pitch,
                roll: curLabelOverLayer.position.roll,
            }
        },

        viewerLableMove (e) {
            if (isAddLabel == true) {
                this.$EventBus.$emit('showTooltip', {
                    position: e.windowPosition,
                    text: '单击选择文字标注位置'
                })
            } else {
                if (e.overlay && e.overlay.attrParams && e.overlay.attrParams.id) {
                    const flag = labelOverLayerID.some(item => item == e.overlay.attrParams.id)

                    if (flag == true && labelPositionChange != true) {
                        this.$EventBus.$emit('showTooltip', {
                            position: e.windowPosition,
                            text: '长按开启拖拽,单击修改名称'
                        })
                    }
                } else {
                    this.$EventBus.$emit('closeTooltip')
                }
            }
        },

        // 关闭添加标注弹窗
        cancelSaveLabel () {
            isAddLabel = false
            this.addLabelVisible = false
            drawLabelStatus = 'end'
            this.$EventBus.$emit('closeTooltip')
        },

        // 单击文字标绘
        reEditLabel (e) {
            addPlotOverlayData = e.overlay
            this.$EventBus.$emit('closeTooltip')
            this.labelId = addPlotOverlayData.attrParams.id
            this.labelPopupTitle = "修改文字标注"
            this.labelInput = addPlotOverlayData.text
            this.labelInputFontSize = Number(addPlotOverlayData.attrParams.item.width)
            this.labelInputFontColor = addPlotOverlayData.attrParams.item.color
            this.addLabelVisible = true
        },


    },

    destroyed () {
        plotDrawEmit != null && plotDrawEmit.stop()

        drawArrowLayers.clear()
        drawArrowLayers = null

        labelOverLayerID = []

        global.viewer.off(global.DC.MouseEventType.CLICK, this.viewerClick)
        global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.viewerLableMove)
        global.viewer.off(global.DC.MouseEventType.LEFT_UP, this.labelUp)
    },
}
</script>

<style lang="scss" scoped>
.draw-btn-box {
    position: fixed;
    display: flex;
    // left: 50%;
    bottom: 40px;
    color: #fff;
    background: $bg-one-color;
    white-space: nowrap;
    // transform: translate(-50%, 0);

    .left,
    .right {
        height: 100%;

        &>div {
            display: flex;
        }

        ul {
            display: flex;

            li {
                button {
                    height: 30px;
                    margin: 0 5px;
                    background-color: $bg-color;
                    border: 1px solid #cecece;
                    border-radius: 4px;
                    color: #fff;
                    cursor: pointer;
                    outline: none;
                }
            }
        }
    }

    .left {
        width: 100%;

        h3 {
            font-size: 16px;
            height: 30px;
            line-height: 30px;
            width: 100%;
            // padding-left: 16%;
        }
    }

    .right {
        width: 20%;
        padding-top: 35px;

        ul {
            flex-direction: column;

            li {
                height: 50px;

                button {
                    background-color: #2a56cf;
                }
            }
        }
    }
}
</style>

 src/views/activity/components/drawBtnBox.vue

@@ -6,23 +6,23 @@
                <span>要素资源：</span>
                <ul>
                    <li>
                        <button @click="draw('billboard', 'policeman')" title="警员">
                        <button @click="drawThreeArrow('billboard', 'police', 'policeman')" title="警员">
                            <img src="/img/icon/police-people-btn.png" style="height:100%" />
                        </button>
                    </li>
                    <li>
                        <button @click="draw('billboard', 'policecar')" title="警车">
                        <button @click="drawThreeArrow('billboard', 'police', 'policecar')" title="警车">
                            <img src="/img/icon/car-btn.png" style="height:100%" />
                        </button>
                    </li>
                    <li>
                        <button @click="drawArrow('billboard', 'icon1')" title="普通群众">普通群众</button>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon1')" title="普通群众">普通群众</button>
                    </li>
                    <li>
                        <button @click="drawArrow('billboard', 'icon2')" title="保护对象">保护对象</button>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon2')" title="保护对象">保护对象</button>
                    </li>
                    <li>
                        <button @click="drawArrow('billboard', 'icon3')" title="危险人物">危险人物</button>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon3')" title="危险人物">危险人物</button>
                    </li>
                </ul>
            </div>
@@ -43,10 +43,7 @@
                        <button @click="drawArrow('tailed_attack_arrow')" title="燕尾箭头">燕尾箭头</button>
                    </li>
                    <li>
                        <button @click="drawArrow('polygon')" title="多边形">多边形</button>
                    </li>
                    <li>
                        <button @click="drawArrowLabel" title="文字标注">文字标注</button>
                        <button @click="drawThreeArrow('polygon')" title="多边形">多边形</button>
                    </li>
                </ul>
            </div>
@@ -56,42 +53,13 @@
                    <li>
                        <!-- <el-button
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ></el-button>-->
                        <button @click="draw('polyline', 'policecar')" title="巡逻路线">
                        <button @click="drawThreeArrow('polyline', 'policecar')" title="巡逻路线">
                            <img src="/img/icon/route1.png" style="height:100%" />
                        </button>
                    </li>
                </ul>
            </div>
        </div>

        <el-dialog :title="labelPopupTitle" :modal="false" :visible.sync="addLabelVisible" :close-on-click-modal="true"
            class="add-label-box" :before-close="cancelSaveLabel">
            <div>
                <div class="value-name-box">文字内容：</div>
                <div class="input-width-box">
                    <input type="text" v-model="labelInput" placeholder="请输入..." />
                </div>
            </div>
            <div>
                <div class="value-name-box">字体大小：</div>
                <div class="input-fontsize-box">
                    <el-input-number v-model="labelInputFontSize" :step="2" :min="12" max="72"
                        step-strictly></el-input-number>
                </div>
            </div>
            <div>
                <div class="value-name-box">字体颜色：</div>
                <div class="pick-color-box">
                    <el-color-picker v-model="labelInputFontColor" :predefine="predefineColors" size="small">
                    </el-color-picker>
                </div>
            </div>
            <div class="btn-box">
                <el-button @click="lableBoxSave">保存</el-button>
                <el-button @click="lableBoxDelete">删除</el-button>
                <el-button @click="cancelSaveLabel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

@@ -101,23 +69,13 @@
    updateSecurityPlot
} from '@/api/activity/index.js'

let plot = undefined
let drawLayers = null
import Plot from "@/utils/plot/Plot.js"

let arrowPlot = null
let drawArrowLayers = null
let isAddLabel = false
let plotDrawEmit = null

let curLabelOverLayer = null
let drawLabelStatus = 'end'
let labelPositionChange = false

let labelOverLayerID = []

let eventLast = 0
let addPlotOverlayData = null
let addPoliceIconOverlayData = null
let lableOverlayData = null

let drawThreeTool = null

export default {
    props: [
@@ -127,340 +85,190 @@

    data () {
        return {
            addLabelVisible: false,// 文字标注的窗口（内容是名称）
            labelInput: '',
            addLabelPosition: null,
            labelPopupTitle: '添加文字标注',
            labelId: '',
            labelInputFontSize: '40',
            labelInputFontColor: '#FFFFFF',
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, )',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%)',
                '#c7158577'
            ],
        }
    },

    mounted () {
        drawLabelStatus = 'end'

        this.$nextTick(() => {
            if (drawLayers == null) {
                drawLayers = new global.DC.VectorLayer('drawLayers')
                global.viewer.addLayer(drawLayers)
                plot = new global.DC.Plot(global.viewer, {
                    clampToModel: true
                })
            }

            if (drawArrowLayers == null) {
                drawArrowLayers = new global.DC.VectorLayer('drawArrowLayers')
                global.viewer.addLayer(drawArrowLayers)
                arrowPlot = new global.DC.Plot(global.viewer, {
                    clampToModel: true
                })
            }

            global.viewer.on(global.DC.MouseEventType.CLICK, this.viewerClick)
            global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.viewerLableMove)
            global.viewer.on(global.DC.MouseEventType.LEFT_UP, this.labelUp)

            global.viewer.scene.globe.depthTestAgainstTerrain = true
            // global.viewer.scene.globe.depthTestAgainstTerrain = true
        })

    },

    methods: {
        // 地图元素绘制
        draw (poltType, policeType) {

            labelPositionChange = false
            drawLabelStatus = 'end'
            isAddLabel = false

        drawArrow (type) {
            const that = this
            let flag = false

            const that = this

            global.viewer.tooltip.enable = true

            plot && plot.draw(poltType, overlay => {
                if (isAddLabel) return

                if (poltType == 'billboard' && policeType == 'policeman') {
                    overlay.icon = '/img/icon/man3.png'
                } else if (poltType == 'billboard' && policeType == 'policecar') {
                    overlay.icon = '/img/icon/car3.png'
                }

            plotDrawEmit && plotDrawEmit.draw(type, overlay => {
                if (overlay) {
                    drawLayers.addOverlay(overlay)
                    let plotType = ''
                    if (type == 'attack_arrow') {
                        plotType = 1
                    } else if (type == 'double_arrow') {
                        plotType = 2
                    } else if (type == 'fine_arrow') {
                        plotType = 3
                    } else if (type == 'tailed_attack_arrow') {
                        plotType = 4
                    }

                    plot.edit(overlay, (e) => {
                        drawLayers.addOverlay(overlay)
                    addPlotOverlayData = overlay

                    that.$parent.addArrowsListLayer(overlay)

                    plotDrawEmit.edit(overlay, (e) => {
                        flag = true

                        // overlay.on(global.DC.MouseEventType.CLICK, this.$parent.overlayTypeClick)

                        overlay.drawType = poltType

                        overlay.policeType = policeType

                        that.$emit('setOverlayObj', overlay)
                        addPoliceIconOverlayData = overlay
                        let positionStr = ''
                        overlay._positions.forEach(item => {
                            positionStr += item._lng + ' ' + item._lat + ','
                        })
                        positionStr = positionStr.slice(0, positionStr.length - 1)

                        document.oncontextmenu = function () {
                            if (flag == true && poltType == 'billboard') {
                                if (policeType == 'policeman') {
                                    that.$parent.searchPoliceTreeId = ''
                                    that.$parent.searchPoliceTreeName = ''
                                    that.$parent.choosePoliceColor = '#FF0000'
                                    that.$parent.policeChooseVisible = true
                                } else if (policeType == 'policecar') {
                                    that.$emit('setPoliceOption')
                                    that.$parent.chooseCarColor = '#FF0000'
                                    that.$parent.policeType = ''
                                    that.$parent.policeChooseCarVisible = true
                                }
                                flag = false
                            } else if (flag == true && poltType == 'polyline') {
                                let position = ''
                                overlay._positions.forEach(item => {
                                    position += item._lng + ' ' + item._lat + ','
                                })
                                position = position.slice(0, position.length - 1)
                                that.$parent.polylineBtnSwitch = true
                                that.$parent.lineEditTitle = '新增巡逻路线'
                                that.$parent.isLineEdit = false
                                that.$parent.chooseColor = '#1CA085'
                                that.$parent.lineWidth = 100
                                that.$parent.addLinePosition = position
                                that.$parent.lineEditVisible = true
                                flag = false
                            }
                            flag == true && that.$parent.addSaveNewDraw(positionStr, plotType)

                            flag = false
                        }
                    })
                }
            }, { material: global.DC.Color.RED })
            }, { material: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 122) })
        },

        drawArrow (type, iconType) {
            labelPositionChange = false
            drawLabelStatus = 'end'
            isAddLabel = false
        drawThreeArrow (type, billboardType = '', typeValue = '') {
            global.viewer.scene.globe.depthTestAgainstTerrain = true
            const that = this
            let flag = false
            let imgUrl
            let material

            global.viewer.tooltip.enable = true
            switch (typeValue) {
                case 'policeman':
                    imgUrl = 'police-people'
                    material = global.DC.Namespace.Cesium.Color.fromBytes(30, 50, 230, 255)
                    break
                case 'policecar':
                    imgUrl = 'car'
                    material = global.DC.Namespace.Cesium.Color.fromBytes(30, 50, 230, 255)
                    break
                case 'icon1':
                    imgUrl = 'ptqz'
                    material = global.DC.Namespace.Cesium.Color.fromBytes(63, 146, 254, 255)
                    break
                case 'icon2':
                    imgUrl = 'bhdx'
                    material = global.DC.Namespace.Cesium.Color.fromBytes(18, 150, 219, 255)
                    break
                case 'icon3':
                    imgUrl = 'wxrw'
                    material = global.DC.Namespace.Cesium.Color.fromBytes(216, 30, 6, 255)
                    break
            }

            if (type == 'polygon') {

                const that = this
                let flag = false

                plot && plot.draw(type, overlay => {
                    if (isAddLabel) return

                drawThreeTool && drawThreeTool.draw(type, overlay => {
                    if (overlay) {
                        addPlotOverlayData = overlay
                        drawArrowLayers.addOverlay(overlay)

                        console.log(overlay, 45555)

                        plot.edit(overlay, (e) => {
                        overlay.customType = 'polygon'
                        that.$parent.addArrowsListLayer(overlay)
                        drawThreeTool.edit(overlay, (e) => {
                            flag = true
                            let positionStr = ''
                            overlay._positions.forEach(item => {
                                positionStr += item._lng + ' ' + item._lat + ','
                            })
                            positionStr = positionStr.slice(0, positionStr.length - 1)

                            that.$parent.polygonPositionStr = positionStr
                            that.$parent.plotSaveType = 5

                            // overlay.on(global.DC.MouseEventType.CLICK, this.polygonClick)
                            let polygonPosition = e.positions.map(item => `${item.lng} ${item.lat}`).join()
                            const altitude = e.positions.map(item => item.alt).join()
                            document.oncontextmenu = function () {
                                if (flag) {
                                    that.$parent.choosePlotColor = '#409EFF'
                                    that.$parent.choosePlotColorAlpha = 48
                                    that.$parent.polygonAreaType = 1
                                    that.$parent.isNeedName = true
                                    that.$parent.isNeedPolygonType = true
                                    that.$parent.polygonName = ''
                                    that.$parent.polygonAddVisible = true
                                    flag = false
                                }
                                flag == true && that.$parent.addSaveNewDraw(polygonPosition, 5, altitude)
                                flag = false
                            }
                        })
                            global.viewer.scene.globe.depthTestAgainstTerrain = false
                        }, true)
                    }
                }, { material: global.DC.Color.RED })
                }, {
                    material: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 122),
                    perPositionHeight: true,
                    outline: true,
                    outlineColor: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 255),
                    outlineWidth: 4.0,
                }, true)
            } else if (type == 'billboard') {
                const that = this
                let flag = false

                plot && plot.draw(type, overlay => {
                    if (isAddLabel) return

                    if (iconType == 'icon1') {
                        that.$parent.plotSaveType = 6
                        overlay.size = [24, 24]
                    } else if (iconType == 'icon2') {
                        that.$parent.plotSaveType = 7
                        overlay.size = [32, 32]
                    } else if (iconType == 'icon3') {
                        that.$parent.plotSaveType = 8
                    }
                    overlay.icon = `/img/icon/${iconType}.png`
                drawThreeTool && drawThreeTool.draw(type, overlay => {
                    if (overlay) {
                        addPlotOverlayData = overlay
                        drawArrowLayers.addOverlay(overlay)
                        plot.edit(overlay, (e) => {
                            flag = true

                            that.$parent.plotPointPositionStr = overlay._position._lng + ' ' + overlay._position._lat

                            document.oncontextmenu = function () {
                                if (flag) {
                                    that.$parent.choosePlotColor = iconType == 'icon3' ? '#d81e06' : '#409EFF'
                                    that.$parent.choosePlotColorAlpha = 100
                                    that.$parent.polygonAddVisible = true
                                    that.$parent.isNeedName = false
                                    flag = false
                                }
                            }
                        })
                    }
                })
            } else {
                const that = this
                let flag = false
                arrowPlot && arrowPlot.draw(type, overlay => {
                    if (isAddLabel) return

                    if (overlay) {
                        let plotType = ''
                        if (type == 'attack_arrow') {
                            plotType = 1
                        } else if (type == 'double_arrow') {
                            plotType = 2
                        } else if (type == 'fine_arrow') {
                            plotType = 3
                        } else if (type == 'tailed_attack_arrow') {
                            plotType = 4
                        overlay.customType = 'billboard'
                        that.$parent.addPointCircleCarLayer(overlay)
                        if (billboardType == 'police') {
                            that.$parent.addSaveNewDrawPoint(typeValue, overlay)
                        } else {
                            that.$parent.addPointPopupShow(typeValue, overlay.position)
                        }

                        that.$parent.plotSaveType = plotType

                        plot.edit(overlay, (e) => {
                            flag = true
                            let positionStr = ''
                            overlay._positions.forEach(item => {
                                positionStr += item._lng + ' ' + item._lat + ','
                            })
                            positionStr = positionStr.slice(0, positionStr.length - 1)
                            that.$parent.arrowPositionStr = positionStr
                            addPlotOverlayData = overlay
                            drawArrowLayers.addOverlay(overlay)
                            document.oncontextmenu = function () {
                                if (flag) {
                                    that.$parent.choosePlotColor = '#409EFF'
                                    that.$parent.isNeedName = false
                                    that.$parent.isNeedPolygonType = false
                                    that.$parent.polygonAddVisible = true
                                    flag = false
                                }
                            }
                        })
                        global.viewer.scene.globe.depthTestAgainstTerrain = false
                    }
                }, { material: global.DC.Color.RED })
                }, {
                    size: [32, 32],
                    color: material,
                    billboardImage: `/img/icon/${imgUrl}.png`
                }, true)
            } else if (type == 'polyline') {
                drawThreeTool && drawThreeTool.draw(type, overlay => {
                    if (overlay) {
                        addPlotOverlayData = overlay
                        overlay.customType = 'polyline'
                        that.$parent.addLineLayer(overlay)
                        drawThreeTool.edit(overlay, (e) => {
                            flag = true
                            let polylinePosition = e.positions.map(item => `${item.lng} ${item.lat}`).join()
                            const altitude = e.positions.map(item => item.alt).join()
                            document.oncontextmenu = function () {
                                flag == true && that.$parent.addSaveNewDrawLine(polylinePosition, altitude)
                                flag = false
                            }
                            global.viewer.scene.globe.depthTestAgainstTerrain = false
                        }, true)
                    }
                }, {
                    material: global.DC.Namespace.Cesium.Color.fromBytes(28, 160, 133, 122),
                }, true)
            }
        },

        // 删除所有地图绘制元素
        removeDraw () {
            addPoliceIconOverlayData != null && !addPoliceIconOverlayData.attrParams && addPoliceIconOverlayData.remove()
        },

        clearDraw () {
            drawLayers != null && drawLayers.clear()
        },

        removeDrawArrow () {
            addPlotOverlayData != null && addPlotOverlayData.remove()
            labelOverLayerID = []
        },

        clearDrawArrow () {
            drawArrowLayers != null && drawArrowLayers.clear()
        },

        // 编辑标绘位置
        plotEdit (overlayData, type) {
            if (type == "arrow") {
                if ('pointOverlayData' in overlayData.attrParams) {
                    overlayData.attrParams.pointOverlayData.remove()
                }
                plot.edit(overlayData, (e) => {
                    let position = ''
                    if ('_positions' in overlayData) {
                        overlayData._positions.forEach((item, index) => {
                            position += item._lng + ' ' + item._lat + ','
                        })
                        position = position.slice(0, position.length - 1)
                    } else {
                        overlayData.position = {
                            lng: Number(overlayData._position._lng),
                            lat: Number(overlayData._position._lat),
                            alt: 0.5,
                        }
                        position = overlayData._position._lng + ' ' + overlayData._position._lat + ',' + overlayData._position._lng + ' ' + overlayData._position._lat
                        let pointPosition = new global.DC.Position(Number(overlayData._position._lng), Number(overlayData._position._lat), 0)
                        let point = new global.DC.Point(pointPosition)
                        drawArrowLayers.addOverlay(point)
                        point.attrParams = { 'id': overlayData.attrParams.id, 'color': overlayData.attrParams.color, 'item': overlayData.attrParams }
                        let r = parseInt(overlayData.attrParams.color.slice(1, 3), 16)
                        let g = parseInt(overlayData.attrParams.color.slice(3, 5), 16)
                        let b = parseInt(overlayData.attrParams.color.slice(5, 7), 16)
                        let a = Math.floor(Number(overlayData.attrParams.color.split(',')[1]) * 2.55)
                        let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
                        point.setStyle({
                            "color": color, //颜色
                            "outlineColor": color, //边框颜色
                            "outlineWidth": 0, //边框大小，
                            "pixelSize": 32,
                        })
                        overlayData.attrParams.pointOverlayData = point
                    }
                    this.updateSecurityPlot({ id: overlayData.attrParams.id, position: position })
                })
            } else if (type == "line") {
                let lineOverlayData = overlayData.attrParams.lineObj
                plot.edit(lineOverlayData, (e) => {
                    let position = ''
                    let lineNewPositions = []
                    lineOverlayData._positions.forEach((item, index) => {
                        if (index % 2 == 0) {
                            position += item._lng + ' ' + item._lat + ','
                            lineNewPositions.push(item)
                        }
                    })
                    overlayData.attrParams.lineObj.positions = lineNewPositions


                    position = position.slice(0, position.length - 1)
                    this.updateActivityCar({ id: this.policeIconId, color: this.$parent.chooseColor, width: this.lineWidth, type: 1, position: position }, overlayData)
                })
            if (overlayData.customType == 'polygon') {
                global.viewer.scene.globe.depthTestAgainstTerrain = true
                drawThreeTool.edit(overlayData, (e) => {
                    let polygonPosition = e.positions.map(item => `${item.lng} ${item.lat}`).join()
                    const altitude = e.positions.map(item => item.alt).join()
                    this.updateSecurityPlot({ id: overlayData.attrParams.id, position: polygonPosition, altitude })
                    global.viewer.scene.globe.depthTestAgainstTerrain = false
                }, true)
            } else if (overlayData.customType == 'billboard') {
                global.viewer.scene.globe.depthTestAgainstTerrain = true
                drawThreeTool.edit(overlayData, (e) => {
                    const position = `${e.position.lng} ${e.position.lat},${e.position.lng} ${e.position.lat}`
                    const altitude = `${e.position.alt},${e.position.alt}`
                    this.updateSecurityPlot({ id: overlayData.attrParams.id, position, altitude })
                    global.viewer.scene.globe.depthTestAgainstTerrain = false
                }, true)
            } else if (overlayData.attrParams.lineObj.customType == 'polyline') {
                global.viewer.scene.globe.depthTestAgainstTerrain = true
                drawThreeTool.edit(overlayData.attrParams.lineObj, (e) => {
                    let linePosition = e.positions.map(item => `${item.lng} ${item.lat}`).join()
                    const altitude = e.positions.map(item => item.alt).join()
                    this.updateActivityCar({
                        id: overlayData.attrParams.id,
                        color: overlayData.attrParams.color,
                        width: overlayData.attrParams.width,
                        type: 1,
                        position: linePosition,
                        altitude
                    }, overlayData)
                    global.viewer.scene.globe.depthTestAgainstTerrain = false
                }, true)
            }
        },

@@ -471,73 +279,33 @@
            let b = parseInt(item.color.slice(5, 7), 16)
            let a = Math.floor(Number(item.color.split(',')[1]) * 2.55) ? Math.floor(Number(item.color.split(',')[1]) * 2.55) : 255
            let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
            if (item.type == 9) {
                let position = item.position.slice(12, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
                position = position.split(';')[0].split(',')
                position = new global.DC.Position(Number(position[0]), Number(position[1]))
                let label = new global.DC.Label(position, item.name)
                label.attrParams = { 'id': item.id, item }
                label.setStyle({
                    'fillColor': color,
                    "font": `${item.width}px sans-serif`,
                })
                this.lableAllEvent(label)
                drawArrowLayers.addOverlay(label)
                return
            }

            addPlotOverlayData.attrParams = { 'id': item.id, 'color': item.color, item }
            addPlotOverlayData.setStyle({
                "material": color
            })
            addPlotOverlayData.attrParams = { id: item.id, color: item.color, item }

            addPlotOverlayData.on(global.DC.MouseEventType.CLICK, this.$parent.reeditArrowClick)
            if (item.type == 6 || item.type == 7 || item.type == 8) {
                const height = item.altitude.split(',')
                let position = item.position.slice(12, item.position.length - 2).split(',')[0].split(' ')
                let pointPosition = new global.DC.Position(Number(position[0]), Number(position[1]))

                addPlotOverlayData.setStyle({
                    color: color
                })

                addPlotOverlayData.position = {
                    lng: Number(position[0]),
                    lat: Number(position[1]),
                    alt: 0.5,
                    alt: Number(height[0]),
                }
                let point = new global.DC.Point(pointPosition)
                drawArrowLayers.addOverlay(point)
                point.attrParams = { 'id': item.id, 'color': item.color, item }
                //    point.on(global.DC.MouseEventType.CLICK, this.$parent.reeditArrowClick)
                point.setStyle({
                    "color": color, //颜色
                    "outlineColor": color, //边框颜色
                    "outlineWidth": 0, //边框大小，
                    "pixelSize": 32,
                })
                addPlotOverlayData.attrParams.pointOverlayData = point
            }
            if (item.type == 5 && item.areaType == 2) {
                let addPlotPositionArr = []
                addPlotOverlayData._positions.forEach(inItem => {
                    addPlotPositionArr.push([Number(inItem._lng), Number(inItem._lat)])
                })
                addPlotPositionArr.push([Number(addPlotOverlayData._positions[0]._lng), Number(addPlotOverlayData._positions[0]._lat)])
                let cachePolygon = this.$turf.polygon([addPlotPositionArr])
                let arrowsListLayerOverlayList = this.$parent.getArrowsListLayerOverlayList()
                arrowsListLayerOverlayList.push(...drawArrowLayers.getOverlays())
                arrowsListLayerOverlayList.forEach(inItem => {
                    if (inItem.attrParams.item.type == 5 && inItem.attrParams.item.areaType == 1) {
                        let savePlotPositionArr = []
                        let savePlotPositionStr = []
                        inItem._positions.forEach(ininItem => {
                            savePlotPositionArr.push([Number(ininItem._lng), Number(ininItem._lat)])
                            savePlotPositionStr += ininItem._lng + ',' + ininItem._lat + ';'
                        })
                        savePlotPositionArr.push([Number(inItem._positions[0]._lng), Number(inItem._positions[0]._lat)])
                        let carePolygon = this.$turf.polygon([savePlotPositionArr])
                        let isContains = this.$turf.booleanContains(cachePolygon, carePolygon)
                        // 如果完全包含就作为洞面扣去
                        if (isContains) {
                            addPlotOverlayData.holes = [savePlotPositionStr]
                        }

                    }
                this.$parent.isHaveFactor = true
            } else if (item.type == 5 && item.areaType == 2) {
                addPlotOverlayData.setStyle({
                    material: color
                })

                this.$parent.isHaveArrow = true
            } else {
                this.$parent.isHaveArrow = true
            }
        },

@@ -546,8 +314,7 @@
            // 巡逻路线添加
            if (type == 'policecar' && carType == 1) {
                // 线坐标字符串
                let positionNewArr = this.$parent.convertPolylineOrPolygonPositionDate(data.position, data.type)
                positionNewArr = positionNewArr.slice(1, positionNewArr.length - 2)
                let positionNewArr = this.$parent.convertPolylineOrPolygonPositionDate(data, 'add')
                // 范围面坐标串
                let coords = global.DC.GeoTools.polylineBuffer(positionNewArr, data.width != -1 ? data.width : 100)
                let positionStr = ''
@@ -571,31 +338,31 @@
                    color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 150)
                    lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                }
                addPoliceIconOverlayData.setStyle({
                    "material": lineColor,
                    'width': 3
                addPlotOverlayData.setStyle({
                    material: lineColor,
                    width: 3
                })

                data.linePositionStr = positionNewArr
                data.polygonPositionStr = polygonSavePositionStr
                data.lineObj = addPoliceIconOverlayData
                data.lineObj = addPlotOverlayData

                let areaPolygon = new global.DC.Polygon(positionStr)
                drawLayers.addOverlay(areaPolygon)
                areaPolygon.setStyle({
                    'material': color,
                    'height': 0.01,
                addPlotOverlayData.attrParams = data

                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'newCarDrawLineLayers',
                    positions: positionStr,
                    material: color,
                    params: data,
                    incident: this.$parent.lineOverlayTypeClick
                })
                addPoliceIconOverlayData.attrParams = data
                areaPolygon.attrParams = data
                areaPolygon.on(global.DC.MouseEventType.CLICK, this.$parent.lineOverlayTypeClick)

                this.$parent.isHaveLine = true
            } else {
                let positionObj = this.$parent.convertBillboardPositionDate(data, type)
                positionObj.lng = positionObj.lng.slice(1, positionObj.lng.length - 1)
                positionObj.lat = positionObj.lat.slice(0, positionObj.lat.length - 2)
                let positionArr = data.position.slice(7, data.position.length - 2).split(',')[0].split(' ')
                let position = new global.DC.Position(Number(positionArr[0]), Number(positionArr[1]))
                let point = new global.DC.Point(position)
                let color = ''
                if (data.color == '') {
                    color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
@@ -605,27 +372,23 @@
                    let b = parseInt(data.color.slice(5, 7), 16)
                    color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                }
                point.attrParams = positionObj
                drawLayers.addOverlay(point)
                point.setStyle({
                    "color": color, //颜色
                    "outlineColor": color, //边框颜色
                    "outlineWidth": 0, //边框大小，
                    "pixelSize": 32,
                })
                // point.on(global.DC.MouseEventType.CLICK, this.$parent.overlayTypeClick)
                point.on(global.DC.MouseEventType.MOUSE_OVER, this.$parent.pointMouseOver)
                point.on(global.DC.MouseEventType.MOUSE_OUT, this.$parent.pointMouseOut)
                addPoliceIconOverlayData.attrParams = positionObj
                addPoliceIconOverlayData.attrParams.pointOverlayData = point
                addPoliceIconOverlayData.position = {

                addPlotOverlayData.attrParams = positionObj
                addPlotOverlayData.position = {
                    lng: Number(positionArr[0]),
                    lat: Number(positionArr[1]),
                    alt: 0.5,
                    alt: Number(positionObj.alt)
                }
                addPoliceIconOverlayData.on(global.DC.MouseEventType.CLICK, this.$parent.overlayTypeClick)
                // addPoliceIconOverlayData.on(global.DC.MouseEventType.MOUSE_OVER, this.$parent.pointMouseOver)
                // addPoliceIconOverlayData.on(global.DC.MouseEventType.MOUSE_OUT, this.$parent.pointMouseOut)

                addPlotOverlayData.setStyle({
                    color: color
                })

                addPlotOverlayData.on(global.DC.MouseEventType.MOUSE_OVER, this.$parent.pointMouseOver)
                addPlotOverlayData.on(global.DC.MouseEventType.MOUSE_OUT, this.$parent.pointMouseOut)
                addPlotOverlayData.on(global.DC.MouseEventType.CLICK, this.$parent.overlayTypeClick)

                this.$parent.isHaveFactor = true
            }
        },

@@ -637,16 +400,24 @@
                let b = parseInt(params.color.slice(5, 7), 16)
                let a = Math.floor(Number(params.color.split(',')[1]) * 2.55) ? Math.floor(Number(params.color.split(',')[1]) * 2.55) : 255
                let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
                let outColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                overlay.attrParams.color = params.color
                if (overlay.attrParams.item.type == 9) {

                if (overlay.customType == 'polygon') {
                    overlay.setStyle({
                        "fillColor": color
                        material: color,
                        outlineColor: outColor
                    })
                } else if (overlay.customType == 'billboard') {
                    overlay.setStyle({
                        color: color
                    })
                } else {
                    overlay.setStyle({
                        "material": color
                        material: color
                    })
                }

                if ('pointOverlayData' in overlay.attrParams) {
                    let r = parseInt(params.color.slice(1, 3), 16)
                    let g = parseInt(params.color.slice(3, 5), 16)
@@ -661,6 +432,7 @@
                    })
                }
            }

            if ('name' in params) {
                addPlotOverlayData.text = params.name
            }
@@ -674,18 +446,14 @@

        // 修改警车样式
        editPoliceStyle (params, overlay) {
            if ('color' in params && 'pointOverlayData' in overlay.attrParams) {
            if ('color' in params && overlay.customType == 'billboard') {
                overlay.attrParams.data.color = params.color
                overlay.attrParams.pointOverlayData.attrParams.color = params.color
                let r = parseInt(params.color.slice(1, 3), 16)
                let g = parseInt(params.color.slice(3, 5), 16)
                let b = parseInt(params.color.slice(5, 7), 16)
                let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                overlay.attrParams.pointOverlayData.setStyle({
                    "color": color, //颜色
                    "outlineColor": color, //边框颜色
                    "outlineWidth": 0, //边框大小，
                    "pixelSize": 32,
                overlay.setStyle({
                    color: color, //颜色
                })
            }

@@ -719,6 +487,7 @@
                    let color = ''
                    // 线颜色
                    let lineColor = ''

                    if (params.color == '') {
                        color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
                    } else {
@@ -737,14 +506,14 @@
                    overlay.attrParams.color = params.color
                    overlay.attrParams.width = params.width

                    let areaPolygon = new global.DC.Polygon(positionStr)
                    drawLayers.addOverlay(areaPolygon)
                    areaPolygon.setStyle({
                        'material': color,
                        'height': 0.01,
                    this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'newCarDrawLineLayers',
                        positions: positionStr,
                        material: color,
                        params: overlay.attrParams,
                        incident: this.$parent.lineOverlayTypeClick
                    })
                    areaPolygon.attrParams = overlay.attrParams
                    areaPolygon.on(global.DC.MouseEventType.CLICK, this.$parent.lineOverlayTypeClick)

                    overlay.remove()
                }
            }
@@ -806,179 +575,33 @@
            })
        },

        // 绘制文字标绘
        drawArrowLabel () {
            global.viewer.tooltip.enable = false
            plot != null && plot.stop()
            arrowPlot != null && arrowPlot.stop()
        startDraw () {
            plotDrawEmit = new global.DC.Plot(global.viewer, {
                clampToModel: true
            })

            isAddLabel = true
            this.labelPopupTitle = ""
            drawLabelStatus = 'start'
            console.log(plotDrawEmit)

            this.$emit('drawLabel', drawLabelStatus)
            drawThreeTool = new Plot(global.viewer, {
                clampToModel: true
            })

            drawThreeTool._currentWorker = undefined

            drawThreeTool.plot = plotDrawEmit.plot

            console.log(drawThreeTool)
        },

        /**
         * @description: 点击覆盖物获取到的位置信息
         * @param {*} e
         * @return {*}
         */
        overlayClickPosition (e) {
            this.labelShowPopup(e)
        },

        /**
         * @description: 点击地图拿到的位置信息
         * @param {*} e
         * @return {*}
         */
        viewerClick (e) {
            if (drawLabelStatus == 'start') {
                this.labelShowPopup(e)
            }
        },

        // 文字编辑弹窗
        labelShowPopup (e) {
            this.labelPopupTitle = '添加文字标注'
            this.labelInputFontSize = 40
            this.labelInputFontColor = '#FFFFFF'
            this.addLabelVisible = true
            this.addLabelPosition = e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat + ',' + e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat
            this.labelInput = ''
        },

        // 文字标注窗口的添加按钮
        lableBoxSave () {
            if (this.labelInput == '') {
                this.$message({
                    message: '请输入标注文字',
                    type: 'error'
                })
            } else {
                if (this.labelPopupTitle == "添加文字标注") {
                    this.$parent.addSecurityPlot({ securityId: this.showingSecurityId, position: this.addLabelPosition, type: 9, name: this.labelInput, color: this.labelInputFontColor, width: this.labelInputFontSize })
                } else {
                    this.updateSecurityPlot({ id: this.labelId, name: this.labelInput, color: this.labelInputFontColor, width: this.labelInputFontSize }, addPlotOverlayData)
                }
                this.cancelSaveLabel()
            }
        },

        // 文字标注窗口的删除按钮
        lableBoxDelete () {
            this.$parent.deleteSecurityPlot(this.labelId)
            addPlotOverlayData && addPlotOverlayData.remove()
            this.cancelSaveLabel()
        },

        lableAllEvent (label) {
            labelOverLayerID.push(label.attrParams.id)
            label.on(global.DC.MouseEventType.CLICK, this.reEditLabel)
            label.on(global.DC.MouseEventType.LEFT_DOWN, this.labelDowm)
        },

        labelDowm (e) {
            eventLast = 0

            setTimeout(() => {
                if (eventLast == 0) {
                    this.$EventBus.$emit('closeTooltip')

                    labelPositionChange = true
                    curLabelOverLayer = e.overlay
                    global.viewer.scene.screenSpaceCameraController.enableRotate = false
                    global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.updateLableMove)
                }
            }, 500)
        },

        labelUp (e) {
            eventLast = new Date().getTime()
            if (labelPositionChange == true) {
                global.viewer.scene.screenSpaceCameraController.enableRotate = true
                global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.updateLableMove)

                // curLabelOverLayer 中的位置就是移动后的位置
                let position = curLabelOverLayer._position._lng + ' ' + curLabelOverLayer._position._lat + ',' + curLabelOverLayer._position._lng + ' ' + curLabelOverLayer._position._lat
                this.updateSecurityPlot({ id: curLabelOverLayer.attrParams.id, position: position })
                labelPositionChange = false
            }
        },

        updateLableMove (e) {
            this.$EventBus.$emit('closeTooltip')
            curLabelOverLayer.position = {
                lng: e.wgs84SurfacePosition.lng,
                lat: e.wgs84SurfacePosition.lat,
                alt: e.wgs84SurfacePosition.alt,
                heading: curLabelOverLayer.position.heading,
                pitch: curLabelOverLayer.position.pitch,
                roll: curLabelOverLayer.position.roll,
            }
        },

        viewerLableMove (e) {
            if (isAddLabel == true) {
                this.$EventBus.$emit('showTooltip', {
                    position: e.windowPosition,
                    text: '单击选择文字标注位置'
                })
            } else {
                if (e.overlay && e.overlay.attrParams && e.overlay.attrParams.id) {
                    const flag = labelOverLayerID.some(item => item == e.overlay.attrParams.id)

                    if (flag == true && labelPositionChange != true) {
                        this.$EventBus.$emit('showTooltip', {
                            position: e.windowPosition,
                            text: '长按开启拖拽,单击修改名称'
                        })
                    }
                } else {
                    this.$EventBus.$emit('closeTooltip')
                }
            }
        },

        // 关闭添加标注弹窗
        cancelSaveLabel () {
            isAddLabel = false
            this.addLabelVisible = false
            drawLabelStatus = 'end'
            this.$EventBus.$emit('closeTooltip')
        },

        // 单击文字标绘
        reEditLabel (e) {
            addPlotOverlayData = e.overlay
            this.$EventBus.$emit('closeTooltip')
            this.labelId = addPlotOverlayData.attrParams.id
            this.labelPopupTitle = "修改文字标注"
            this.labelInput = addPlotOverlayData.text
            this.labelInputFontSize = Number(addPlotOverlayData.attrParams.item.width)
            this.labelInputFontColor = addPlotOverlayData.attrParams.item.color
            this.addLabelVisible = true
        },

        stopDraw () {
            plotDrawEmit != null && plotDrawEmit.stop(), plotDrawEmit = null
            drawThreeTool != null && drawThreeTool.stop(), drawThreeTool = null
        }

    },

    destroyed () {
        plot != null && plot.stop()
        arrowPlot != null && arrowPlot.stop()

        drawLayers.remove()
        drawLayers = null

        drawArrowLayers.clear()
        drawArrowLayers = null

        labelOverLayerID = []

        global.viewer.off(global.DC.MouseEventType.CLICK, this.viewerClick)
        global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.viewerLableMove)
        global.viewer.off(global.DC.MouseEventType.LEFT_UP, this.labelUp)
        this.stopDraw()
    },
}
</script>

 src/views/activity/components/index.vue

New file
@@ -0,0 +1,17 @@
<template>
    <div>

    </div>
</template>

<script>
export default {
    methods: {
        
    },
}
</script>

<style lang="scss" scoped>

</style>

 src/views/activity/components/layersShowControl.vue

New file
@@ -0,0 +1,108 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-25 14:31:44
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-25 17:32:34
 * @FilePath: \srs-police-affairs\src\views\activity\components\layersShowControl.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div>
        <div class="plan-control" v-show="dialogVisible && (isHavePolice || isHaveArrow || isHaveLine)">
            <div class="row-box" v-show="isHavePolice">
                <div class="category">要素资源：</div>
                <div class="category-value">
                    <el-switch v-model="policeSwitch" @change="switchChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                </div>
            </div>

            <div class="row-box" v-show="isHaveArrow">
                <div class="category">作战标绘：</div>
                <div class="category-value">
                    <el-switch v-model="arrowBtnSwitch" @change="switchArrowBtnChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                </div>
            </div>

            <div class="row-box" v-show="isHaveLine">
                <div class="category">巡逻路线：</div>
                <div class="category-value">
                    <el-switch v-model="polylineBtnSwitch" @change="switchBtnChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: [
        'dialogVisible',
        'isHavePolice',
        'isHaveArrow',
        'isHaveLine',
        'policeSwitch',
        'arrowBtnSwitch',
        'polylineBtnSwitch',
    ],

    data () {
        return {
        }
    },

    methods: {
        // 切换轨警力资源显示
        switchChange (e) {
            this.$parent.switchChange(e)
        },

        // 切换作战标绘
        switchArrowBtnChange (e) {
            this.$parent.switchArrowBtnChange(e)
        },

        // 切换轨迹播放控件
        switchBtnChange (e) {
            this.$parent.switchBtnChange(e)
        },

    },
}
</script>

<style lang="scss" scoped>
.plan-control {
    position: fixed;
    top: 150px;
    right: 450px;
    width: 180px;
    padding: 10px;
    color: #fff;
    background-color: $bg-color;
    border-radius: 8px;
    z-index: 98;

    .row-box {
        width: 100%;
        line-height: 28px;
        display: flex;

        &>div {
            text-align: left;
        }

        .category {
            width: 96px;
        }

        .category-value {
            flex: 1;
        }
    }
}
</style>

 src/views/activity/components/policeCarChange.vue

New file
@@ -0,0 +1,201 @@
<template>
    <div>
        <el-dialog title="选择警车" :modal="false" :visible.sync="policeChooseCarVisible" :before-close="cancel"
            :close-on-click-modal="true" class="choose-policeCar-box">
            <div>
                <el-select size="small" v-model="policeType" placeholder="请选择" :disabled="isChoosePoliceElementDisabled">
                    <el-option v-for="item in policeOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
                <div class="line">
                    <div class="value-name-box">选择颜色：</div>
                    <div class="pick-color-box">
                        <el-color-picker v-model="chooseCarColor" :predefine="predefineColors" size="small">
                        </el-color-picker>
                    </div>
                </div>
                <div class="line area">
                    <div class="value-name-box">预警范围：</div>
                    <div class="width-box">
                        <div class="input-width-box">
                            <input type="text" v-model="pointAreaWidth" placeholder="请输入..." />
                        </div>
                        <div class="units">米</div>
                    </div>
                </div>
                <el-button @click="determine" v-show="!isChoosePoliceElementDisabled">确定</el-button>
                <el-button @click="deletePoliceElement"
                    v-show="!isChoosePoliceElementDisabled && policeIconIsCreated">删除</el-button>
                <el-button @click="cancel" v-show="!isChoosePoliceElementDisabled">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { deleteActivityCar, addCarAndRange } from '@/api/activity/index.js'
let overlayObj = {}
let policeOverlayData = null

export default {
    props: [
        'showingSecurityId',
        'policeOption'
    ],

    data () {
        return {
            policeType: '',
            pointAreaWidth: '',
            chooseCarColor: '',
            policeIconIsCreated: false,
            policeChooseCarVisible: false,
            isChoosePoliceElementDisabled: false,
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, )',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%)',
                '#c7158577'
            ],
            curElId: ''
        }
    },

    watch: {
        policeChooseCarVisible (val) {
            if (val) {
                this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
            }
        }
    },

    methods: {
        addPopupShow (overlay) {
            overlayObj = overlay
            this.chooseCarColor = '#FF0000'
            this.policeType = ''
            this.policeChooseCarVisible = true
        },

        setConfig (e) {
            policeOverlayData = e

            this.curElId = e.overlay.attrParams.data.id
            this.policeType = e.overlay.attrParams.data.carId
            this.pointAreaWidth = e.overlay.attrParams.data.width != '-1' ? e.overlay.attrParams.data.width : 100
            this.chooseCarColor = e.overlay.attrParams.data.color != '' ? e.overlay.attrParams.data.color : '#FF0000'
            this.policeIconIsCreated = true
            this.policeChooseCarVisible = true
        },

        // 选择警员确认按钮
        determine () {
            if (!this.policeIconIsCreated) {
                if (this.policeType == '') {
                    this.$message({
                        message: '请选择警车',
                        type: 'warning'
                    })
                } else if (!(/(^[1-9]\d*$)/.test(Number(this.pointAreaWidth)))) {
                    this.$message({
                        message: '范围必须为正整数',
                        type: 'warning'
                    })
                } else {
                    this.policeChooseCarVisible = false
                    this.addCarAndRange({
                        carId: this.policeType,
                        position: `${overlayObj.position.lng} ${overlayObj.position.lat}`,
                        altitude: `${overlayObj.position.alt}`,
                        securityId: this.showingSecurityId,
                        type: 3,
                        color: this.chooseCarColor,
                        width: this.pointAreaWidth
                    })
                    this.policeIconIsCreated = false
                }
            } else {
                if (this.policeType == '') {
                    this.$message({
                        message: '请选择警车',
                        type: 'warning'
                    })
                } else if (!(/(^[1-9]\d*$)/.test(Number(this.pointAreaWidth)))) {
                    this.$message({
                        message: '范围必须为正整数',
                        type: 'warning'
                    })
                } else {
                    this.$parent.updateActivityCar({ id: this.curElId, carId: this.policeType, color: this.chooseCarColor, width: this.pointAreaWidth }, policeOverlayData.overlay)
                    this.policeChooseCarVisible = false
                }
                this.policeIconIsCreated = false
            }
        },

        // 添加警车和范围
        // carId警车id, position坐标, securityIdid, type线面类型，width缓存范围，color范围颜色
        addCarAndRange (params) {
            addCarAndRange(params).then(res => {
                if (res.data.success) {
                    this.$parent.addNewPolice(res.data.data, 'policecar', params.type)
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    })
                }
            })
        },


        // 选择警员取消按钮
        cancel () {
            this.policeIconIsCreated = false
            this.policeChooseCarVisible = false
            this.$parent.removeDrawArrow()
            overlayObj = {}
        },

        // 点击删除
        deletePoliceElement () {
            this.deleteActivityCar(this.curElId, 'car')
            this.policeChooseCarVisible = false
        },

        // 删除警车
        deleteActivityCar (id, type) {
            deleteActivityCar(id).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    policeOverlayData.overlay.remove()
                } else {
                    this.$message({
                        message: '删除失败',
                        type: 'error'
                    })
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped></style>

 src/views/activity/components/policePersonChange.vue

New file
@@ -0,0 +1,248 @@
<template>
    <div>
        <el-dialog title="选择警员" :modal="false" :visible.sync="policeChooseVisible" :before-close="cancel"
            :close-on-click-modal="true" class="choose-police-box">
            <div>
                <el-input ref="searchTreeInput" v-model="searchPoliceTreeName" @input="searchInputTree"
                    @focus="searchTreeShowFlag = true" @blur="searchTreeShowFlag = false" placeholder="请选择警员"
                    style="cursor: pointer;"></el-input>
                <el-tree :data="policeTreeData" :props="policeDefaultProps" @node-click="handlePoliceNodeClick"
                    @mousedown.native="preventFocusLost" ref="policeTree" :filter-node-method="filterPoliceNode"
                    v-show="searchTreeShowFlag"></el-tree>
                <div class="line">
                    <div class="value-name-box">选择颜色：</div>
                    <div class="pick-color-box">
                        <el-color-picker v-model="choosePoliceColor" :predefine="predefineColors" size="small">
                        </el-color-picker>
                    </div>
                </div>
                <div class="line area">
                    <div class="value-name-box">预警范围：</div>
                    <div class="width-box">
                        <div class="input-width-box">
                            <input type="text" v-model="pointAreaWidth" placeholder="请输入..." />
                        </div>
                        <div class="units">米</div>
                    </div>
                </div>
                <div class="police-btn-box">
                    <el-button @click="determine" v-show="!isChoosePoliceElementDisabled">确定</el-button>
                    <el-button @click="deletePoliceElement"
                        v-show="!isChoosePoliceElementDisabled && policeIconIsCreated">删除</el-button>
                    <el-button @click="cancel" v-show="!isChoosePoliceElementDisabled">取消</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { deleteActivityPolice, addActivityPolice } from '@/api/activity/index.js'
let overlayObj = {}
let policeOverlayData = null

export default {
    props: [
        'policeTreeData', 'showingSecurityId'
    ],

    data () {
        return {
            policeDefaultProps: {
                children: 'children',
                label: 'name'
            },
            policeType: '',
            pointAreaWidth: '',
            choosePoliceColor: '',
            searchPoliceTreeId: '',
            searchPoliceTreeName: '',
            policeChooseVisible: false,
            policeIconIsCreated: false,
            searchTreeShowFlag: false,
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, )',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%)',
                '#c7158577'
            ],
            curElId: ''
        }
    },

    watch: {
        policeChooseVisible (val) {
            if (val) {
                this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
            }
        }
    },

    methods: {
        addPopupShow (overlay) {
            overlayObj = overlay
            this.searchPoliceTreeId = ''
            this.searchPoliceTreeName = ''
            this.choosePoliceColor = '#FF0000'
            this.policeChooseVisible = true
        },

        setConfig (e) {
            policeOverlayData = e
            this.curElId = e.overlay.attrParams.data.id
            this.policeType = e.overlay.attrParams.data.policemanId
            this.pointAreaWidth = e.overlay.attrParams.data.width != '-1' ? e.overlay.attrParams.data.width : 100
            this.choosePoliceColor = e.overlay.attrParams.data.color != '' ? e.overlay.attrParams.data.color : '#FF0000'
            this.searchPoliceTreeId = e.overlay.attrParams.data.policemanId
            this.searchPoliceTreeName = this.platFn(this.policeTreeData).find(item => item.id == e.overlay.attrParams.data.policemanId).name
            this.policeIconIsCreated = true
            this.policeChooseVisible = true
        },

        // 扁平化树状数据
        platFn (list) {
            let res = []
            res = list.concat(...list.map(item => {
                if (item.children instanceof Array && item.children.length > 0) {
                    return this.platFn(item.children)
                }
                return null
            }).filter(o => o instanceof Array && o.length > 0))
            return res
        },

        // 过滤警员搜索框
        filterPoliceNode (value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },

        /**
        * @description: 禁用鼠标点击树结构的时候input失去焦点
        * @param {*} event
        * @return {*}
        */
        preventFocusLost (event) {
            event.preventDefault()
        },

        // 点击选择警员
        handlePoliceNodeClick (current) {
            if (current.hasChildren == true) return
            this.searchPoliceTreeName = current.name
            this.searchPoliceTreeId = current.id
            this.searchTreeShowFlag = false
            this.$refs.searchTreeInput.blur()
        },

        // 选择警员确认按钮
        determine () {
            if (!this.policeIconIsCreated) {
                if (this.searchPoliceTreeId == '') {
                    this.$message({
                        message: '请选择警员',
                        type: 'warning'
                    })
                } else if (!(/(^[1-9]\d*$)/.test(Number(this.pointAreaWidth)))) {
                    this.$message({
                        message: '范围必须为正整数',
                        type: 'warning'
                    })
                } else {
                    this.policeChooseVisible = false
                    this.addActivityPolice({
                        policemanId: this.searchPoliceTreeId,
                        position: `${overlayObj.position.lng} ${overlayObj.position.lat}`,
                        altitude: `${overlayObj.position.alt}`,
                        securityId: this.showingSecurityId,
                        type: 3,
                        color: this.choosePoliceColor,
                        width: this.pointAreaWidth
                    })
                    this.policeIconIsCreated = false
                }
            } else {
                if (this.searchPoliceTreeId == '' || this.searchPoliceTreeName == '') {
                    this.$message({
                        message: '请在列表中选择警员',
                        type: 'warning'
                    })
                } else if (!(/(^[1-9]\d*$)/.test(Number(this.pointAreaWidth)))) {
                    this.$message({
                        message: '范围必须为正整数',
                        type: 'warning'
                    })
                } else {
                    this.$parent.updateActivityPolice({ id: this.curElId, policemanId: this.searchPoliceTreeId, color: this.choosePoliceColor, width: this.pointAreaWidth }, policeOverlayData.overlay)
                    this.policeChooseVisible = false
                }
                this.policeIconIsCreated = false
            }
        },

        // 添加警员
        // policemanId警车id, position坐标, securityIdid, type线面类型
        addActivityPolice (params) {
            addActivityPolice(params).then(res => {
                if (res.data.success) {
                    this.$parent.addNewPolice(res.data.data, 'policeman')
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    })
                }
            })
        },

        // 选择警员取消按钮
        cancel () {
            this.policeIconIsCreated = false
            this.policeChooseVisible = false
            this.$parent.removeDrawArrow()
            overlayObj = {}
        },

        // 点击删除
        deletePoliceElement () {
            this.deleteActivityPolice(this.curElId)
            this.policeChooseVisible = false
        },

        // 删除警员
        deleteActivityPolice (id) {
            deleteActivityPolice(id).then(res => {
                if (res.data.success) {
                    policeOverlayData.overlay.remove()

                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '删除失败',
                        type: 'error'
                    })
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped></style>

 src/views/activity/components/polygonPlot.vue

New file
@@ -0,0 +1,278 @@
<template>
    <div>
        <el-dialog title="修改标绘" :modal="false" :visible.sync="editPlotVisible" :close-on-click-modal="true"
            class="edit-plot-box">
            <div>
                <div class="value-name-box">选择标绘颜色：</div>
                <div class="pick-color-box">
                    <el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small">
                    </el-color-picker>
                </div>
            </div>
            <div v-show="!polygonName" class="placeholder"></div>
            <div>
                <div class="value-name-box">设置透明度：</div>
                <div class="alpha">
                    <el-slider v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
                </div>
            </div>
            <div v-show="!polygonName" class="placeholder"></div>
            <div class="edit-plot-btn-box">
                <el-button @click="savePlot">保存</el-button>
                <el-button @click="editPlot">编辑</el-button>
                <el-button @click="deletePlot">删除</el-button>
                <el-button @click="editPlotVisible = false">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="新增标绘" :modal="false" :visible.sync="polygonAddVisible" :close-on-click-modal="true"
            class="add-polygon-box" :before-close="cancelSavePolygon">
            <div class="line" v-show="isNeedPolygonType">
                <div class="value-name-box">选择类型：</div>
                <div class="select-type">
                    <el-select size="small" v-model="polygonAreaType" placeholder="请选择区域类型">
                        <el-option v-for="item in polygonAreaOption" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="line">
                <div class="value-name-box">选择标绘颜色：</div>
                <div class="pick-color-box">
                    <el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small">
                    </el-color-picker>
                </div>
            </div>
            <div class="line">
                <div class="value-name-box">设置透明度：</div>
                <div class="alpha">
                    <el-slider v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
                </div>
            </div>
            <div class="placeholder" v-show="!isNeedPolygonType"></div>
            <div class="add-polygon-btn-box">
                <el-button @click="savePolygonInfo">保存</el-button>
                <el-button @click="cancelSavePolygon">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 当前点击的标绘元素
let plotOverlayData = null

let polygonPlotData = ''

let polygonAltArray = []

import { deleteSecurityPlot, addSecurityPlot } from '@/api/activity/index.js'

export default {
    inject: ['userInfo'],

    props: ['showingSecurityId'],

    data () {
        return {
            polygonName: '',

            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, )',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%)',
                '#c7158577'
            ],
            choosePlotColor: '#409EFF',
            choosePlotColorAlpha: 48,
            polygonAreaType: 1,
            isNeedPolygonType: false,
            editPlotVisible: false,
            polygonAddVisible: false,

            polygonAreaOption: [{
                value: 1,
                label: '核心区'
            }, {
                value: 2,
                label: '缓冲区'
            }],
            plotId: '',

        }
    },
    methods: {
        addPointPopupShow (type, positions) {
            polygonAltArray = `${positions.alt},${positions.alt}`
            polygonPlotData = `${positions.lng} ${positions.lat}`

            if (type == 'icon1') {
                this.plotSaveType = 6
            } else if (type == 'icon2') {
                this.plotSaveType = 7
            } else if (type == 'icon3') {
                this.plotSaveType = 8
            }
            this.isNeedPolygonType = false
            this.choosePlotColor = type == 'icon3' ? '#d81e06' : '#409EFF'
            this.choosePlotColorAlpha = 100
            this.polygonAddVisible = true
        },

        addPopupShow (positions, type, altitude) {
            polygonAltArray = altitude
            polygonPlotData = positions
            this.plotSaveType = type
            this.choosePlotColor = '#409EFF'
            this.choosePlotColorAlpha = 48

            if (type == 5) {
                this.polygonAreaType = 1
                this.isNeedPolygonType = true
            } else {
                this.isNeedPolygonType = false
            }

            this.polygonName = ''
            this.polygonAddVisible = true
        },

        setCurOver (e) {
            plotOverlayData = e

            this.choosePlotColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color.slice(0, 7) : '#409EFF'
            this.choosePlotColorAlpha = e.overlay.attrParams.color != '' ? Number(e.overlay.attrParams.color.split(',')[1]) : 100

            if (e.overlay.attrParams.item.type == 5) {
                this.polygonAreaType = e.overlay.attrParams.item.areaType != '' ? e.overlay.attrParams.item.areaType : 1
                this.isNeedPolygonType = true
            } else {
                this.isNeedPolygonType = false
            }

            // this.polygonName = e.overlay.attrParams.name
            if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
                this.plotId = e.overlay.attrParams.id
                this.editPlotVisible = true
            }
        },

        // 计算透明度值
        formatTooltip (val) {
            return val / 100
        },

        // 删除标绘
        deletePlot () {
            this.deleteSecurityPlot(this.plotId)
            this.editPlotVisible = false
        },

        // 删除标绘接口
        deleteSecurityPlot (id) {
            deleteSecurityPlot(id).then(res => {
                if (res.data.success) {
                    plotOverlayData != null && plotOverlayData.overlay != null && plotOverlayData.overlay.remove()
                    if (plotOverlayData != null && plotOverlayData.overlay != null && 'pointOverlayData' in plotOverlayData.overlay.attrParams) {
                        plotOverlayData.overlay.attrParams.pointOverlayData.remove()
                    }
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '删除失败',
                        type: 'error'
                    })
                }
            })
        },

        // 编辑标绘
        editPlot () {
            this.editPlotVisible = false

            this.reeditArrowDbClick(plotOverlayData)
        },

        // 双击修改箭头
        reeditArrowDbClick (e) {
            this.$parent.plotEdit(e.overlay, 'arrow')
        },

        // 保存标绘修改
        savePlot () {
            this.$parent.updateSecurityPlot({ id: plotOverlayData.overlay.attrParams.id, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha }, plotOverlayData.overlay)
            this.editPlotVisible = false
        },

        // 是否显示类型选择
        typeChangeShow (flag) {
            this.isNeedPolygonType = flag
        },

        // 取消保存多边形
        cancelSavePolygon () {
            this.polygonAddVisible = false
            this.$parent.removeDrawArrow()
        },

        // 保存绘制区域
        savePolygonInfo () {
            let positionStr = ''
            if (this.plotSaveType >= 1 && this.plotSaveType <= 4) {
                positionStr = polygonPlotData
            } else if (this.plotSaveType == 5) {
                positionStr = polygonPlotData
            } else if (this.plotSaveType == 6 || this.plotSaveType == 7 || this.plotSaveType == 8) {
                positionStr = polygonPlotData + ',' + polygonPlotData
            }
            this.addSecurityPlot({
                securityId: this.showingSecurityId,
                position: positionStr,
                type: this.plotSaveType,
                color: this.choosePlotColor + ',' + this.choosePlotColorAlpha,
                areaType: this.polygonAreaType,
                altitude: polygonAltArray
            })
            this.polygonAddVisible = false
        },

        // 保存标绘箭头
        // securityIdid, position坐标, type标绘类型, name多边形名称,color标绘颜色,aera_type多边形类型
        addSecurityPlot (params) {
            addSecurityPlot(params).then(res => {
                if (res.data.success) {
                    this.$parent.addNewPlot(res.data.data)

                    polygonAltArray = []

                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '保存失败',
                        type: 'error'
                    })
                }
            })
        }

    },
}
</script>

<style lang="scss" scoped></style>

 src/views/activity/components/polylinePlot.vue

New file
@@ -0,0 +1,181 @@



<template>
    <div>
        <el-dialog :title="lineEditTitle" :modal="false" :visible.sync="lineEditVisible" :close-on-click-modal="true"
            class="edit-line-box" :before-close="cancelSaveLine">
            <div>
                <div class="value-name-box">设置缓冲范围：</div>
                <div class="input-width-box">
                    <input type="text" v-model="lineWidth" placeholder="请输入..." />
                </div>
                <div class="units">米</div>
            </div>
            <div>
                <div class="value-name-box">选择范围颜色：</div>
                <div class="pick-color-box">
                    <el-color-picker v-model="chooseColor" :predefine="predefineColors" size="small">
                    </el-color-picker>
                </div>
            </div>
            <div class="edit-line-btn-box">
                <el-button @click="lookStartVideo" v-show="isLineEdit">查看视频</el-button>
                <el-button @click="editLineInfo" v-show="isLineEdit">编辑</el-button>
                <el-button @click="saveLineInfo" v-show="isLineEdit">保存</el-button>
                <el-button @click="deleteLine" v-show="isLineEdit">删除</el-button>
                <el-button @click="addLineInfo" v-show="!isLineEdit">添加</el-button>
                <el-button @click="cancelSaveLine">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { deleteActivityCar, addCarAndRange } from '@/api/activity/index.js'
let polylineOverlay = null
let curLinePosition = null
let curLinePolygonPosition = null

let polylinePlotData = ''
let polygonAltArray = ''
export default {
    inject: ['userInfo'],

    props: ['showingSecurityId'],

    data () {
        return {
            lineEditTitle: '修改巡逻路线',
            isLineEdit: true,
            lineWidth: 100,
            chooseColor: '#1CA085',
            policeIconId: {},
            lineEditVisible: false,
        }
    },

    methods: {
        addPopupShow (positions, altitude) {
            this.lineEditTitle = '新增巡逻路线'
            this.chooseColor = '#1CA085'
            this.lineWidth = 100
            this.isLineEdit = false
            polygonAltArray = altitude
            polylinePlotData = positions
            this.lineEditVisible = true
        },

        setConfig (params) {
            Object.keys(params).forEach(item => {
                this[item] = params[item]
            })
        },

        setOverlay (e) {
            polylineOverlay = e

            curLinePosition = e.overlay.attrParams.linePositionStr
            curLinePolygonPosition = e.overlay.attrParams.polygonPositionStr

            this.lineWidth = e.overlay.attrParams.width != -1 ? e.overlay.attrParams.width : 100
            this.chooseColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#1CA085'
            this.policeIconId = e.overlay.attrParams.id
        },

        lookStartVideo () {
            this.$parent.lookStartVideo(curLinePosition, curLinePolygonPosition)

            this.lineEditVisible = false
        },

        // 修改巡逻路线位置信息
        editLineInfo () {
            const polyline = polylineOverlay

            this.$EventBus.$emit('mapRemovePolygon', {
                layerName: 'newCarDrawLineLayers',
                type: 'VectorLayer',
                overlay: polyline.overlay
            })

            this.$parent.plotEdit(polyline.overlay, 'line')

            this.lineEditVisible = false
        },

        // 保存巡逻路线信息
        saveLineInfo () {
            this.$parent.updateActivityCar({ id: this.policeIconId, color: this.chooseColor, width: this.lineWidth }, polylineOverlay.overlay)
            this.lineEditVisible = false
        },

        // 删除巡逻路线
        deleteLine () {
            this.deleteActivityCar(this.policeIconId)
            this.lineEditVisible = false
        },

        // 删除警车
        deleteActivityCar (id) {
            deleteActivityCar(id).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    polylineOverlay.overlay.remove()
                    polylineOverlay.overlay.attrParams.lineObj.remove()
                } else {
                    this.$message({
                        message: '删除失败',
                        type: 'error'
                    })
                }
            })
        },

        // 新增巡逻路线信息
        addLineInfo () {
            this.addCarAndRange({
                position: polylinePlotData,
                altitude: polygonAltArray,
                securityId: this.showingSecurityId,
                type: 1,
                color: this.chooseColor,
                width: this.lineWidth
            })
            this.lineEditVisible = false
        },

        // 添加警车和范围
        // carId警车id, position坐标, securityIdid, type线面类型，width缓存范围，color范围颜色
        addCarAndRange (params) {
            addCarAndRange(params).then(res => {
                if (res.data.success) {
                    this.$parent.addNewPolice(res.data.data, 'policecar', params.type)

                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    })
                }
            })
        },

        // 取消保存巡逻路线
        cancelSaveLine () {
            this.lineEditVisible = false
            this.$parent.removeDrawArrow()
        },

    },
}
</script>

<style lang="scss" scoped></style>

 src/views/activity/components/publicIndex copy.vue

New file
@@ -0,0 +1,772 @@
<template>
    <div>
        <layers-show-control :dialogVisible="dialogVisible" :isHavePolice="isHavePolice" :isHaveArrow="isHaveArrow"
            :isHaveLine="isHaveLine" :policeSwitch="policeSwitch" :arrowBtnSwitch="arrowBtnSwitch"
            :polylineBtnSwitch="polylineBtnSwitch"></layers-show-control>

        <polygon-plot ref="PolygonPlotPage" :showingSecurityId="showingSecurityId"></polygon-plot>
        <polyline-plot ref="PolylinePlotPage" :showingSecurityId="showingSecurityId"></polyline-plot>

        <draw-btn-box ref="DRAWBTNBOX" :dialogVisible="dialogVisible" :isShowActivityEditBox="isShowActivityEditBox"
            :showingSecurityId="showingSecurityId" :policeSwitch="policeSwitch" :polylineBtnSwitch="polylineBtnSwitch"
            :arrowBtnSwitch="arrowBtnSwitch" :policeIconId="policeIconId" :lineWidth="lineWidth"
            @setOverlayObj="setOverlayObj" @drawLabel="drawLabel" @setPoliceOption="setPoliceOption"></draw-btn-box>

        <police-car-change ref="PoliceCarChange" :policeOption="policeOption"
            :policeIconId="policeIconId"></police-car-change>

        <police-person-change ref="PolicePersonChange" :policeTreeData="policeTreeData"></police-person-change>

        <activity-detail :dialogVisible="dialogVisible" :activityDetails="activityDetails"
            @closeActivityDetails="closeActivityDetails"></activity-detail>

        <video-control-box ref="VIDEOCONTROLBOX"></video-control-box>
    </div>
</template>

<script>
import {
    getSecurityPoliceList,
    getSecurityCarList,
    getSecurityPlotList,
    getPolicemanTree,
    getCarList
} from '@/api/activity/index.js'

import layersShowControl from './layersShowControl.vue'
import polygonPlot from './polygonPlot.vue'
import polylinePlot from './polylinePlot.vue'
import drawBtnBox from './drawBtnBox.vue'
import policeCarChange from './policeCarChange.vue'
import policePersonChange from './policePersonChange.vue'
import activityDetail from './activityDetail.vue'
import videoControlBox from './videoControlBox.vue'


// 要素的
let pointCircleCarLayer = null
// 作战的
let arrowsListLayer = null
// 巡逻的
let lineLayer = undefined

let drawLabelStatus = 'end'

let policecarOption = []

export default {
    inject: ['userInfo'],

    data () {
        return {
            dialogVisible: false,
            isShowActivityEditBox: false,
            activityDetails: {},
            isHaveLine: false,
            isHaveArrow: false,
            policeSwitch: true,
            arrowBtnSwitch: true,
            polylineBtnSwitch: true,
            policeTreeData: [],
            policeOption: [],
            policeIconId: '',
            policeType: '',
            pointAreaWidth: '',
            choosePoliceColor: '',
            searchPoliceTreeId: '',
            searchPoliceTreeName: '',
            policeIconIsCreated: false,
            policeChooseVisible: false,
            chooseCarColor: '',
            policeChooseCarVisible: false,
            isChoosePoliceElementDisabled: false,
            showingSecurityId: '',
            isHavePoliceCar: false,
            isHavePoliceMan: false,
        }
    },

    components: {
        layersShowControl,
        drawBtnBox,
        polygonPlot,
        polylinePlot,
        policeCarChange,
        policePersonChange,
        activityDetail,
        videoControlBox
    },

    computed: {
        isHavePolice () {
            return this.isHavePoliceCar || this.isHavePoliceMan
        }
    },

    mounted () {
        this.$nextTick(() => {
            if (pointCircleCarLayer == null) {
                pointCircleCarLayer = new global.DC.VectorLayer('pointCircleCarLayer')
                global.viewer.addLayer(pointCircleCarLayer)
            }

            if (arrowsListLayer == null) {
                arrowsListLayer = new global.DC.VectorLayer('arrowsListLayer')
                global.viewer.addLayer(arrowsListLayer)
            }

            if (lineLayer == null) {
                lineLayer = new global.DC.VectorLayer('lineLayer')
                global.viewer.addLayer(lineLayer)
            }
        })
    },
    methods: {
        addNewPolice (data, type, dataType = '') {
            this.$refs.DRAWBTNBOX.addNewPolice(data, type, dataType)
        },


        addPointPopupShow (type, positions) {
            this.$refs.PolygonPlotPage.addPointPopupShow(type, positions)
        },

        addSaveNewDrawPoint (type) {
            if (type == 'policeman') {
                this.$refs.PolicePersonChange.addPopupShow()
            } else if (type == 'policecar') {
                this.policeOption = policecarOption
                this.$refs.PoliceCarChange.addPopupShow()
            }
        },
        // 要素资源添加
        addPointCircleCarLayer (overlay) {
            pointCircleCarLayer.addOverlay(overlay)
        },

        addSaveNewDraw (positions, type) {
            this.$refs.PolygonPlotPage.addPopupShow(positions, type)
        },
        // 作战标绘的添加
        addArrowsListLayer (overlay) {
            arrowsListLayer.addOverlay(overlay)
        },

        addSaveNewDrawLine (positions) {
            this.$refs.PolylinePlotPage.addPopupShow(positions)
        },
        // 巡逻路线的添加
        addLineLayer (overlay) {
            lineLayer.addOverlay(overlay)
        },

        // 视频查看
        lookStartVideo (line, polygon) {
            this.$refs.VIDEOCONTROLBOX.watchVideo(line, polygon)
        },

        // 关闭详情弹窗
        closeActivityDetails () {
            this.dialogVisible = false
            this.polylineBtnSwitch = false
            this.$refs.VIDEOCONTROLBOX.closeVideo()
            this.$parent.currentTreeItem = ''
            this.$parent.activeActivityIndex = ''

            this.clearOrRemoveLayerAll('clear')
        },

        addNewPlot (data) {
            this.$refs.DRAWBTNBOX.addNewPlot(data)
        },

        removeDraw () {
            this.$refs.DRAWBTNBOX.removeDraw()
        },

        removeDrawArrow () {
            this.$refs.DRAWBTNBOX.removeDrawArrow()
        },

        plotEdit (overlay, type) {
            this.$refs.DRAWBTNBOX.plotEdit(overlay, type)
        },

        updateSecurityPlot (params, overlay) {
            this.$refs.DRAWBTNBOX.updateSecurityPlot(params, overlay)
        },

        updateActivityPolice (params, overlay) {
            this.$refs.DRAWBTNBOX.updateActivityPolice(params, overlay)
        },

        updateActivityCar (params, overlay) {
            this.$refs.DRAWBTNBOX.updateActivityCar(params, overlay)
        },

        setOverlayObj (e) {
            this.$refs.PoliceCarChange.setOverlayObj(e)
            this.$refs.PolicePersonChange.setOverlayObj(e)
        },

        drawLabel (status) {
            drawLabelStatus = status
        },

        reloadAll (params) {
            // 当前选中的ID
            this.showingSecurityId = params.item.id
            // 当前选中的详情
            this.activityDetails = params.item
            this.dialogVisible = true

            if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == params.item.deptId) {
                this.isShowActivityEditBox = true
            } else {
                this.isShowActivityEditBox = false
            }

            this.$refs.DRAWBTNBOX.removeDraw()
            this.$refs.DRAWBTNBOX.clearDrawArrow()

            this.policeSwitch = true
            this.arrowBtnSwitch = true
            this.polylineBtnSwitch = true

            this.clearOrRemoveLayerAll('clear')

            this.getPolicemanTree({ deptId: params.deptId })
            this.getCarList({ deptId: params.deptId })

            this.getSecurityPlotList(params.id)
            this.getSecurityPoliceList(params.id)
            this.getSecurityCarList(params.id)
        },

        // 获取树状警员列表
        getPolicemanTree (params) {
            getPolicemanTree(params).then(res => {
                this.policeTreeData = res.data.data
            })
        },

        // 获取警车列表，生成下拉数据
        getCarList (params) {
            getCarList(params).then(res => {
                res.data.data.forEach(item => {
                    policecarOption.push({ value: `${item.id}`, label: `${item.serialNumber}`, carType: `${item.carType}`, serialNumber: `${item.serialNumber}`, unitCode: `${item.unitCode}`, unitName: `${item.unitName}`, carNo: `${item.carNo}`, deptName: `${item.deptName}` })
                })

                this.policeOption = policecarOption
            })
        },

        // 获取标绘箭头列表
        getSecurityPlotList (securityId) {
            this.$refs.DRAWBTNBOX.removeDrawArrow()

            getSecurityPlotList(securityId).then(res => {
                // 要素资源
                this.$parent.normalPeopleList = res.data.data.filter(item => item.type == 6)
                this.$parent.protectedPeopleList = res.data.data.filter(item => item.type == 7)
                this.$parent.dangerousPeopleList = res.data.data.filter(item => item.type == 8)

                // 作战标绘
                this.$parent.attackArrowList = res.data.data.filter(item => item.type == 1)
                this.$parent.doubleArrowList = res.data.data.filter(item => item.type == 2)
                this.$parent.tailedAttackArrowList = res.data.data.filter(item => item.type == 3)
                this.$parent.fineArrowList = res.data.data.filter(item => item.type == 4)
                this.$parent.polygonList = res.data.data.filter(item => item.type == 5)
                this.$parent.labelMarkList = res.data.data.filter(item => item.type == 9)

                this.isHaveArrow = res.data.data.some(item => {
                    return item
                })
                let plotList = res.data.data
                res.data.data.forEach(item => {
                    let position = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
                    let chooseArrow = null
                    // let nameLabel = null
                    let color = ''
                    if (item.color == '') {
                        color = global.DC.Namespace.Cesium.Color.fromBytes(255, 69, 0, 173)
                    } else {
                        let r = parseInt(item.color.slice(1, 3), 16)
                        let g = parseInt(item.color.slice(3, 5), 16)
                        let b = parseInt(item.color.slice(5, 7), 16)
                        let a = Math.floor(Number(item.color.split(',')[1]) * 2.55) ? Math.floor(Number(item.color.split(',')[1]) * 2.55) : 255
                        color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
                    }
                    if (item.type == 1) {
                        chooseArrow = new global.DC.AttackArrow(position)
                        arrowsListLayer.addOverlay(chooseArrow)
                    } else if (item.type == 2) {
                        chooseArrow = new global.DC.DoubleArrow(position)
                        arrowsListLayer.addOverlay(chooseArrow)
                    } else if (item.type == 3) {
                        chooseArrow = new global.DC.FineArrow(position)
                        arrowsListLayer.addOverlay(chooseArrow)
                    } else if (item.type == 4) {
                        chooseArrow = new global.DC.TailedAttackArrow(position)
                        arrowsListLayer.addOverlay(chooseArrow)
                    } else if (item.type == 5) {
                        chooseArrow = new global.DC.Polygon(position)
                        arrowsListLayer.addOverlay(chooseArrow)
                        // 缓存区的话需要扣去包含的核心区
                        if (item.areaType == 2) {
                            let itemPositionArr = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',').split(';')
                            itemPositionArr.push(itemPositionArr[0])
                            itemPositionArr = itemPositionArr.map(item => {
                                return item.split(',').map(Number)
                            })
                            let cachePolygon = this.$turf.polygon([itemPositionArr])
                            plotList.forEach(inItem => {
                                // 查询被包含的核心区
                                if (inItem.areaType == 1 && inItem.type == 5) {
                                    let inItemPositionArr = inItem.position.slice(11, inItem.position.length - 1).replace(/,/g, ';').replace(/ /g, ',').split(';')
                                    inItemPositionArr.push(inItemPositionArr[0])
                                    inItemPositionArr = inItemPositionArr.map(item => {
                                        return item.split(',').map(Number)
                                    })
                                    if (inItemPositionArr.length == 3 && inItemPositionArr[0][0] == inItemPositionArr[2][0] &&
                                        inItemPositionArr[2][1] == inItemPositionArr[0][1]) {
                                        return
                                    }
                                    let carePolygon = this.$turf.polygon([inItemPositionArr])
                                    let isContains = this.$turf.booleanContains(cachePolygon, carePolygon)
                                    // 如果完全包含就作为洞面扣去
                                    if (isContains) {
                                        chooseArrow.holes = [inItem.position.slice(11, inItem.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')]
                                    }

                                }
                            })
                        }
                        // let center = this.getCenter(item.position)
                        // let centerPosition = new global.DC.Position(center[0], center[1])
                        // nameLabel = new global.DC.Label(centerPosition, item.name)
                        // arrowsListLayer.addOverlay(nameLabel)
                        // nameLabel.setStyle({
                        //     "font": "30px",
                        // })
                    } else if (item.type == 9) {
                        position = position.split(';')[0].split(',')
                        position = new global.DC.Position(Number(position[0]), Number(position[1]))
                        let label = new global.DC.Label(position, item.name)
                        label.attrParams = { 'id': item.id, item }
                        this.$refs.DRAWBTNBOX.lableAllEvent(label)
                        label.setStyle({
                            'fillColor': color,
                            "font": `${item.width}px sans-serif`,
                        })
                        arrowsListLayer.addOverlay(label)
                    } else if (item.type == 6 || item.type == 7 || item.type == 8) {
                        let iconImgName = ''
                        if (item.type == 6) {
                            iconImgName = 'icon1'
                        } else if (item.type == 7) {
                            iconImgName = 'icon2'
                        } else if (item.type == 8) {
                            iconImgName = 'icon3'
                        }
                        position = position.split(';')[0].split(',')
                        let pointPosition = new global.DC.Position(Number(position[0]), Number(position[1]), 4)
                        position = new global.DC.Position(Number(position[0]), Number(position[1]), 4.5)
                        chooseArrow = new global.DC.Billboard(position, `/img/icon/${iconImgName}.png`)
                        chooseArrow.size = item.type == 6 ? [24, 24] : [32, 32]

                        pointCircleCarLayer.addOverlay(chooseArrow)
                        chooseArrow.setStyle({
                            "material": color,
                        })

                        let point = new global.DC.Point(pointPosition)
                        pointCircleCarLayer.addOverlay(point)
                        point.attrParams = { 'id': item.id, 'color': item.color, 'item': item, 'pointOverlayData': point }
                        point.setStyle({
                            "color": color, //颜色
                            "outlineColor": color, //边框颜色
                            "outlineWidth": 0, //边框大小，
                            "pixelSize": 32,
                        })
                        chooseArrow.attrParams = { 'id': item.id, 'color': item.color, 'item': item, 'pointOverlayData': point }
                    }

                    if (chooseArrow != null) {
                        if (!(item.type == 6 || item.type == 7 || item.type == 8)) {
                            chooseArrow.attrParams = { 'id': item.id, 'color': item.color, item }
                        }
                        chooseArrow.setStyle({
                            "material": color,
                        })
                        chooseArrow.off(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
                        chooseArrow.on(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
                    }
                })
            })
        },

        // 获取警员分布信息
        getSecurityPoliceList (securityId) {
            this.$refs.DRAWBTNBOX.removeDraw()

            getSecurityPoliceList(securityId).then(res => {
                this.isHavePoliceMan = res.data.data.some(item => {
                    return item.type == 3
                })

                this.addMapCarAndPersonLayers(
                    res.data.data.filter(item => item.type == 3),
                    'policeman',
                    pointCircleCarLayer,
                    'newFactorResourcesLayers')
            })
        },

        /**
        * @description: 警力资源警车和巡逻路线的
        * @param {*} securityId
        * @param {*} polylineShow
        * @return {*}
        */
        getSecurityCarList (securityId) {

            getSecurityCarList(securityId).then(res => {
                this.isHavePoliceCar = res.data.data.some(item => {
                    return item.type == 3
                })

                this.isHaveLine = res.data.data.some(item => {
                    return item.type == 1
                })

                this.addMapCarAndPersonLayers(
                    res.data.data.filter(item => item.type == 3),
                    'policecar',
                    pointCircleCarLayer,
                    'newFactorResourcesLayers')
                this.addMapLineLayers(res.data.data.filter(item => item.type == 1))
            })
        },


        /**
         * @description: 警力资源地图添加
         * @param {*} data
         * @param {*} type
         * @param {*} curLayer
         * @param {*} mapLayer
         * @return {*}
         */
        addMapCarAndPersonLayers (data, type, curLayer, mapLayer) {
            if (type == 'policecar') {
                this.$parent.chooseActivityPoliceCarList = data
            } else {
                this.$parent.chooseActivityPoliceManList = data
            }
            data.forEach(item => {
                let positionObj = this.$parent.convertBillboardPositionDate(item, type)
                let position = new global.DC.Position(Number(positionObj.lng), Number(positionObj.lat))
                let point = new global.DC.Point(position)
                let color = ''
                if (item.color == '') {
                    color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
                } else {
                    let r = parseInt(item.color.slice(1, 3), 16)
                    let g = parseInt(item.color.slice(3, 5), 16)
                    let b = parseInt(item.color.slice(5, 7), 16)
                    color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                }
                point.attrParams = positionObj

                curLayer.addOverlay(point)

                point.setStyle({
                    "color": color, //颜色
                    "outlineColor": color, //边框颜色
                    "outlineWidth": 0, //边框大小，
                    "pixelSize": 32,
                })
                // point.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick)
                point.on(global.DC.MouseEventType.MOUSE_OVER, this.pointMouseOver)
                point.on(global.DC.MouseEventType.MOUSE_OUT, this.pointMouseOut)


                // 预警范围先不显示
                // let circle = new global.DC.Circle(position, item.width != -1 ? item.width : 100)
                // curLayer.addOverlay(circle)
                // circle.setStyle({
                //     "material": global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 100), //颜色
                // })

                positionObj.pointOverlayData = point
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: mapLayer,
                    type: 'billboard',
                    params: positionObj,
                    incident: this.overlayTypeClick,
                    mouseOverIncident: this.pointMouseOver,
                    mouseOutIncident: this.pointMouseOut
                })
            })
        },

        // 鼠标移入图标事件
        pointMouseOver (e) {
            this.$store.commit('SET_ACTIVITYPOLICEPOPUP', true)
            let hoverData = {}
            if ('carId' in e.overlay.attrParams.data) {
                hoverData = policecarOption.filter(item => item.value == e.overlay.attrParams.data.carId)[0]
                hoverData.policeData = { 'name': 'none' }
                hoverData.policeStationName = 'none'
            } else {
                let policeArr = this.filterTree(this.policeTreeData)
                hoverData.policeData = policeArr.filter(item => item.id == e.overlay.attrParams.data.policemanId)[0]
                hoverData.policeStationName = policeArr.filter(item => item.id == policeArr.filter(item => item.id == e.overlay.attrParams.data.policemanId)[0].parentId)[0].name
                hoverData.carType = 'none'
                hoverData.label = 'none'
            }
            this.$store.commit('SET_ACTIVITYPOLICEPOPUPDATA', hoverData)

            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'ActivityPoliceDomBox',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(e.overlay.attrParams.lng),
                            Number(e.overlay.attrParams.lat),
                            0
                        )
                    )
                ]
            })
        },

        /**
         * @description: 鼠标移出事件
         * @param {*} e
         * @return {*}
         */
        pointMouseOut (e) {
            this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
        },

        /**
       * @description: 巡逻路线地图添加
       * @param {*} data
       * @return {*}
       */
        addMapLineLayers (data) {
            this.$parent.chooseActivityLineList = data

            data.forEach(item => {
                let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
                // 线坐标字符串
                item.linePositionStr = positionNewArr
                let coords = global.DC.GeoTools.polylineBuffer(positionNewArr, item.width != -1 ? item.width : 100)
                let color = ''
                let lineColor = ''
                if (item.color == '') {
                    color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
                } else {
                    let r = parseInt(item.color.slice(1, 3), 16)
                    let g = parseInt(item.color.slice(3, 5), 16)
                    let b = parseInt(item.color.slice(5, 7), 16)
                    color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 150)
                    lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                }

                let positionStr = ''
                coords.forEach(item => {
                    positionStr += item[0] + ',' + item[1] + ';'
                })

                item.polygonPositionStr = positionStr

                let lineObj = new global.DC.Polyline(positionNewArr)

                lineLayer.addOverlay(lineObj)
                lineObj.setStyle({
                    'material': lineColor,
                    'width': 3
                })

                item.lineObj = lineObj

                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'newCarDrawLineLayers',
                    positions: positionStr,
                    material: color,
                    params: item,
                    incident: this.lineOverlayTypeClick
                })

            })
        },

        clearOrRemoveLayerAll (type) {
            if (type == 'clear') {
                // 要素的
                pointCircleCarLayer != null && pointCircleCarLayer.clear()
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'newFactorResourcesLayers',
                    type: 'VectorLayer'
                })

                // 作战的
                arrowsListLayer != null && arrowsListLayer.clear()

                // 巡逻的
                lineLayer != null && lineLayer.clear()
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'newCarDrawLineLayers',
                    type: 'VectorLayer'
                })

                // 活动区域的
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'polygonWallLayer',
                    type: 'VectorLayer'
                })
            } else {
                // 要素的
                pointCircleCarLayer != null && pointCircleCarLayer.remove(), pointCircleCarLayer = null
                this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'newFactorResourcesLayers',
                    type: 'VectorLayer'
                })

                // 作战的
                arrowsListLayer != null && arrowsListLayer.remove(), arrowsListLayer = null

                // 巡逻的
                lineLayer != null && lineLayer.remove(), lineLayer = null
                this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'newCarDrawLineLayers',
                    type: 'VectorLayer'
                })

                // 活动区域的
                this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'polygonWallLayer',
                    type: 'VectorLayer'
                })
            }
        },

        // 切换轨警力资源显示
        switchChange (e) {
            pointCircleCarLayer.show = e
            this.$EventBus.$emit('layerShow', { layerName: 'newFactorResourcesLayers', flag: e })
        },

        // 切换作战标绘
        switchArrowBtnChange (e) {
            arrowsListLayer.show = e
        },

        // 切换轨迹播放控件
        switchBtnChange (e) {
            lineLayer.show = e
            this.$EventBus.$emit('layerShow', { layerName: 'newCarDrawLineLayers', flag: e })
        },

        // 获取标绘图层覆盖物
        getArrowsListLayerOverlayList () {
            return arrowsListLayer.getOverlays()
        },

        // 单击。标绘箭头
        reeditArrowClick (e) {
            this.$refs.PolygonPlotPage.setCurOver(e)
        },

        // 地图绘制元素点击事件
        overlayTypeClick (e) {
            if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
                this.isChoosePoliceElementDisabled = false
            } else {
                this.isChoosePoliceElementDisabled = true
            }

            if ('policemanId' in e.overlay.attrParams.data) {
                this.$refs.PolicePersonChange.setConfig(e)

            } else if ('carId' in e.overlay.attrParams.data) {
                this.$refs.PoliceCarChange.setConfig(e)

            }
        },

        // 树形数据传数组
        filterTree (tree, arr = []) {
            if (!tree.length) return []
            arr.push(...tree)
            for (let item of tree) {
                if (item.children && item.children.length) {
                    this.filterTree(item.children, arr)
                }
            }
            return arr
        },

        // 巡逻路线面点击事件
        lineOverlayTypeClick (e) {
            this.policeIconId = e.overlay.attrParams.id

            this.$refs.VIDEOCONTROLBOX.closeVideo()

            this.$refs.PolylinePlotPage.setOverlay(e)

            if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
                this.$refs.PolylinePlotPage.setConfig({
                    title: '修改巡逻路线',
                    isLineEdit: true,
                    lineEditVisible: true
                })
            } else {
                this.$refs.PolylinePlotPage.setConfig({
                    lineEditVisible: true
                })
            }
        },

        // 转换 点 坐标数据
        convertBillboardPositionDate (data, iconName) {
            let positionStr = data.position
            positionStr = data.position.slice(6, positionStr.length - 1)
            let positionArr = positionStr.split(" ")
            let positionObj = {}
            if (iconName == 'activity') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0, url: '/img/icon/activity.png' }
            } else if (iconName == 'policeman') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/man3.png', data: data }
            } else if (iconName == 'policecar') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/car3.png', data: data }
            }
            return positionObj
        },

        // 转换 线面 坐标数据
        convertPolylineOrPolygonPositionDate (data, type) {
            let positionStr = data.slice(11, data.length - 1)
            let positionArr = positionStr.split(',')
            let positionNewArr = ''
            positionArr.forEach(item => {
                if (type == 1) {
                    positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ';'
                } else {
                    positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ',' + 0 + ';'
                }
            })
            return positionNewArr
        },
    },

    destroyed () {
        this.clearOrRemoveLayerAll('remove')
    }
}
</script>

<style lang="scss" scoped></style>

 src/views/activity/components/publicIndex.vue

New file
@@ -0,0 +1,767 @@
<template>
    <div>
        <layers-show-control :dialogVisible="dialogVisible" :isHavePolice="isHavePolice" :isHaveArrow="isHaveArrow"
            :isHaveLine="isHaveLine" :policeSwitch="policeSwitch" :arrowBtnSwitch="arrowBtnSwitch"
            :polylineBtnSwitch="polylineBtnSwitch"></layers-show-control>

        <polygon-plot ref="PolygonPlotPage" :showingSecurityId="showingSecurityId"></polygon-plot>
        <polyline-plot ref="PolylinePlotPage" :showingSecurityId="showingSecurityId"></polyline-plot>

        <draw-btn-box ref="DRAWBTNBOX" :dialogVisible="dialogVisible" :isShowActivityEditBox="isShowActivityEditBox"
            :showingSecurityId="showingSecurityId" :policeSwitch="policeSwitch" :polylineBtnSwitch="polylineBtnSwitch"
            :arrowBtnSwitch="arrowBtnSwitch" :policeIconId="policeIconId" :lineWidth="lineWidth"
            @setPoliceOption="setPoliceOption"></draw-btn-box>

        <police-car-change ref="PoliceCarChange" :policeOption="policeOption"
            :showingSecurityId="showingSecurityId"></police-car-change>

        <police-person-change ref="PolicePersonChange" :policeTreeData="policeTreeData"
            :showingSecurityId="showingSecurityId"></police-person-change>

        <activity-detail :dialogVisible="dialogVisible" :activityDetails="activityDetails"
            @closeActivityDetails="closeActivityDetails"></activity-detail>

        <video-control-box ref="VIDEOCONTROLBOX"></video-control-box>
    </div>
</template>

<script>
import {
    getSecurityPoliceList,
    getSecurityCarList,
    getSecurityPlotList,
    getPolicemanTree,
    getCarList
} from '@/api/activity/index.js'

import layersShowControl from './layersShowControl.vue'
import polygonPlot from './polygonPlot.vue'
import polylinePlot from './polylinePlot.vue'
import drawBtnBox from './drawBtnBox.vue'
import policeCarChange from './policeCarChange.vue'
import policePersonChange from './policePersonChange.vue'
import activityDetail from './activityDetail.vue'
import videoControlBox from './videoControlBox.vue'


// 要素的
let pointCircleCarLayer = null
// 作战的
let arrowsListLayer = null
// 巡逻的
let lineLayer = undefined

let policecarOption = []

export default {
    inject: ['userInfo'],

    data () {
        return {
            dialogVisible: false,
            isShowActivityEditBox: false,
            activityDetails: {},
            isHaveLine: false,
            isHaveArrow: false,
            policeSwitch: true,
            arrowBtnSwitch: true,
            polylineBtnSwitch: true,
            policeTreeData: [],
            policeOption: [],
            policeIconId: '',
            policeType: '',
            pointAreaWidth: '',
            choosePoliceColor: '',
            searchPoliceTreeId: '',
            searchPoliceTreeName: '',
            policeIconIsCreated: false,
            policeChooseVisible: false,
            chooseCarColor: '',
            policeChooseCarVisible: false,
            isChoosePoliceElementDisabled: false,
            showingSecurityId: '',
            isHavePoliceCar: false,
            isHavePoliceMan: false,
            isHavePointDraw: false,
            isHaveFactor: false
        }
    },

    components: {
        layersShowControl,
        drawBtnBox,
        polygonPlot,
        polylinePlot,
        policeCarChange,
        policePersonChange,
        activityDetail,
        videoControlBox
    },

    computed: {
        isHavePolice () {
            return this.isHavePoliceCar || this.isHavePoliceMan || this.isHavePointDraw || this.isHaveFactor
        }
    },

    mounted () {
        this.$nextTick(() => {
            if (pointCircleCarLayer == null) {
                pointCircleCarLayer = new global.DC.VectorLayer('pointCircleCarLayer')
                global.viewer.addLayer(pointCircleCarLayer)
            }

            if (arrowsListLayer == null) {
                arrowsListLayer = new global.DC.VectorLayer('arrowsListLayer')
                global.viewer.addLayer(arrowsListLayer)
            }

            if (lineLayer == null) {
                lineLayer = new global.DC.VectorLayer('lineLayer')
                global.viewer.addLayer(lineLayer)
            }
        })
    },
    methods: {
        addNewPolice (data, type, dataType = '') {
            this.$refs.DRAWBTNBOX.addNewPolice(data, type, dataType)
        },

        addPointPopupShow (type, positions) {
            this.$refs.PolygonPlotPage.addPointPopupShow(type, positions)
        },

        addSaveNewDrawPoint (type, overlay) {
            if (type == 'policeman') {
                this.$refs.PolicePersonChange.addPopupShow(overlay)
            } else if (type == 'policecar') {
                this.policeOption = policecarOption
                this.$refs.PoliceCarChange.addPopupShow(overlay)
            }
        },
        // 要素资源添加
        addPointCircleCarLayer (overlay) {
            pointCircleCarLayer.addOverlay(overlay)
        },

        addSaveNewDraw (positions, type, altitude = []) {
            this.$refs.PolygonPlotPage.addPopupShow(positions, type, altitude)
        },
        // 作战标绘的添加
        addArrowsListLayer (overlay) {
            arrowsListLayer.addOverlay(overlay)
        },

        addSaveNewDrawLine (positions, altitude) {
            this.$refs.PolylinePlotPage.addPopupShow(positions, altitude)
        },
        // 巡逻路线的添加
        addLineLayer (overlay) {
            lineLayer.addOverlay(overlay)
        },

        // 视频查看
        lookStartVideo (line, polygon) {
            this.$refs.VIDEOCONTROLBOX.watchVideo(line, polygon)
        },

        // 关闭详情弹窗
        closeActivityDetails () {
            this.$parent.cleartAllTimer()

            this.$refs.DRAWBTNBOX.removeDrawArrow()



            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'activityCameraLayers',
                type: 'VectorLayer'
            })

            // 警车
            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'activityCarLayers',
                type: 'VectorLayer'
            })

            // 手台-公网
            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'activityTalkBackEquipmentPublicLayers',
                type: 'VectorLayer'
            })

            // 手台-专网
            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'activityTalkBackEquipmentLayers',
                type: 'VectorLayer'
            })

            // 执法记录仪
            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'activityPoliceCameraLayers',
                type: 'VectorLayer'
            })

            this.dialogVisible = false
            this.policeSwitch = false
            this.arrowBtnSwitch = false
            this.polylineBtnSwitch = false
            this.$refs.VIDEOCONTROLBOX.closeVideo()
            this.$parent.currentTreeItem = ''
            this.$parent.activeActivityIndex = ''

            this.clearOrRemoveLayerAll('clear')
            this.$refs.DRAWBTNBOX.stopDraw()
        },

        addNewPlot (data) {
            this.$refs.DRAWBTNBOX.addNewPlot(data)
        },

        removeDrawArrow () {
            this.$refs.DRAWBTNBOX.removeDrawArrow()
        },

        plotEdit (overlay, type) {
            this.$refs.DRAWBTNBOX.plotEdit(overlay, type)
        },

        updateSecurityPlot (params, overlay) {
            this.$refs.DRAWBTNBOX.updateSecurityPlot(params, overlay)
        },

        updateActivityPolice (params, overlay) {
            this.$refs.DRAWBTNBOX.updateActivityPolice(params, overlay)
        },

        updateActivityCar (params, overlay) {
            this.$refs.DRAWBTNBOX.updateActivityCar(params, overlay)
        },

        reloadAll (params) {
            this.closeActivityDetails()
            this.$refs.DRAWBTNBOX.startDraw()
            // 当前选中的ID
            this.showingSecurityId = params.item.id
            // 当前选中的详情
            this.activityDetails = params.item
            this.dialogVisible = true

            if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == params.item.deptId) {
                this.isShowActivityEditBox = true
            } else {
                this.isShowActivityEditBox = false
            }

            this.policeSwitch = true
            this.arrowBtnSwitch = true
            this.polylineBtnSwitch = true

            // 加载当前活动区域
            if (params.item.activityArea && params.item.activityArea.length > 0) {
                let polyGonData = params.item.activityArea.slice(11, params.item.activityArea.length - 1)
                polyGonData = polyGonData.replace(/,/g, ";")
                polyGonData = polyGonData.replace(/ /g, ",")
                let newPolyData = polyGonData.split(';').map(item => {
                    let lngOrlat = item.split(',')
                    lngOrlat.push(140)

                    lngOrlat = lngOrlat.join(',')

                    return lngOrlat
                }).join(';')

                this.$EventBus.$emit('layerWallAdd', {
                    layerName: 'polygonWallLayer',
                    positions: newPolyData
                })
            }

            this.getPolicemanTree({ deptId: params.deptId })
            this.getCarList({ deptId: params.deptId })

            this.getSecurityPlotList(params.id)
            this.getSecurityPoliceList(params.id)
            this.getSecurityCarList(params.id)
        },

        // 获取树状警员列表
        getPolicemanTree (params) {
            getPolicemanTree(params).then(res => {
                this.policeTreeData = res.data.data
            })
        },

        // 获取警车列表，生成下拉数据
        getCarList (params) {
            getCarList(params).then(res => {
                res.data.data.forEach(item => {
                    policecarOption.push({ value: `${item.id}`, label: `${item.serialNumber}`, carType: `${item.carType}`, serialNumber: `${item.serialNumber}`, unitCode: `${item.unitCode}`, unitName: `${item.unitName}`, carNo: `${item.carNo}`, deptName: `${item.deptName}` })
                })

                this.policeOption = policecarOption
            })
        },

        // 获取标绘箭头列表
        getSecurityPlotList (securityId) {

            getSecurityPlotList(securityId).then(res => {
                // 要素资源
                this.$parent.normalPeopleList = res.data.data.filter(item => item.type == 6)
                this.$parent.protectedPeopleList = res.data.data.filter(item => item.type == 7)
                this.$parent.dangerousPeopleList = res.data.data.filter(item => item.type == 8)

                // 作战标绘
                this.$parent.attackArrowList = res.data.data.filter(item => item.type == 1)
                this.$parent.doubleArrowList = res.data.data.filter(item => item.type == 2)
                this.$parent.tailedAttackArrowList = res.data.data.filter(item => item.type == 3)
                this.$parent.fineArrowList = res.data.data.filter(item => item.type == 4)
                this.$parent.polygonList = res.data.data.filter(item => item.type == 5)

                this.isHaveArrow = res.data.data.some(item => {
                    return item.type != 6 && item.type != 7 && item.type != 8
                })

                this.isHavePointDraw = res.data.data.some(item => {
                    return item.type == 6 || item.type == 7 || item.type == 8
                })

                let allData = res.data.data

                for (let item of allData) {
                    let position = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')

                    let altitude = item.altitude.split(',')

                    // let nameLabel = null
                    let color = this.getCoverageColor(item.color)

                    if (item.type == 1) {
                        this.initLayersCoverage('AttackArrow', color, item, position)
                        continue
                    } else if (item.type == 2) {
                        this.initLayersCoverage('DoubleArrow', color, item, position)
                        continue
                    } else if (item.type == 3) {
                        this.initLayersCoverage('FineArrow', color, item, position)
                        continue
                    } else if (item.type == 4) {
                        this.initLayersCoverage('TailedAttackArrow', color, item, position)
                        continue
                    } else if (item.type == 5) {
                        this.initLayersCoverage('Polygon', color, item, position, altitude)
                        continue
                    } else if (item.type == 6 || item.type == 7 || item.type == 8) {
                        let iconImgName = item.type == 6 ? 'ptqz' : item.type == 7 ? 'bhdx' : 'wxrw'

                        const height = item.altitude.split(',')
                        position = position.split(';')[0].split(',')

                        let chooseArrow = new global.DC.Billboard(new global.DC.Position(Number(position[0]), Number(position[1]), Number(height[0])), `/img/icon/${iconImgName}.png`)
                        chooseArrow.customType = 'billboard'
                        chooseArrow.setStyle({
                            color: color.curColor,
                        })
                        chooseArrow.attrParams = { id: item.id, color: item.color, item }
                        chooseArrow.size = [32, 32]
                        chooseArrow.on(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
                        pointCircleCarLayer.addOverlay(chooseArrow)
                    }
                }
            })
        },

        getCoverageColor (color) {
            let curColor
            let outColor
            if (color == '') {
                curColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 69, 0, 173)
                outColor = global.DC.Namespace.Cesium.Color.fromBytes(255, 69, 0, 255)
            } else {
                let r = parseInt(color.slice(1, 3), 16)
                let g = parseInt(color.slice(3, 5), 16)
                let b = parseInt(color.slice(5, 7), 16)
                let a = Math.floor(Number(color.split(',')[1]) * 2.55) ? Math.floor(Number(color.split(',')[1]) * 2.55) : 255
                curColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
                outColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)

            }

            return { curColor, outColor }
        },

        initLayersCoverage (type, color, params, position, altitude) {
            if (altitude.length) position = position.split(';').map((item, index) => `${item},${altitude[index]}`).join(';')
            let coverage = new global.DC[type](position)
            if (type == 'Polygon') {
                coverage.setStyle({
                    material: color.curColor,
                    perPositionHeight: true,
                    outline: true,
                    outlineColor: color.outColor,
                    outlineWidth: 4.0,
                })

                coverage.customType = 'polygon'
            } else {
                coverage.setStyle({ material: color.curColor })
            }
            coverage.attrParams = { id: params.id, color: params.color, item: params }
            coverage.on(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
            arrowsListLayer.addOverlay(coverage)

            return coverage
        },

        // 获取警员分布信息
        getSecurityPoliceList (securityId) {
            getSecurityPoliceList(securityId).then(res => {
                this.isHavePoliceMan = res.data.data.some(item => {
                    return item.type == 3
                })

                this.addMapCarAndPersonLayers(
                    res.data.data.filter(item => item.type == 3),
                    'policeman',
                    pointCircleCarLayer,
                    'newFactorResourcesLayers')
            })
        },

        /**
        * @description: 警力资源警车和巡逻路线的
        * @param {*} securityId
        * @param {*} polylineShow
        * @return {*}
        */
        getSecurityCarList (securityId) {

            getSecurityCarList(securityId).then(res => {
                this.isHavePoliceCar = res.data.data.some(item => {
                    return item.type == 3
                })

                this.isHaveLine = res.data.data.some(item => {
                    return item.type == 1
                })

                this.addMapCarAndPersonLayers(
                    res.data.data.filter(item => item.type == 3),
                    'policecar',
                    pointCircleCarLayer,
                    'newFactorResourcesLayers')
                this.addMapLineLayers(res.data.data.filter(item => item.type == 1))
            })
        },


        /**
         * @description: 警力资源地图添加
         * @param {*} data
         * @param {*} type
         * @param {*} curLayer
         * @param {*} mapLayer
         * @return {*}
         */
        addMapCarAndPersonLayers (data, type) {
            if (type == 'policecar') {
                this.$parent.chooseActivityPoliceCarList = data
            } else {
                this.$parent.chooseActivityPoliceManList = data
            }
            data.forEach(item => {
                let positionObj = this.convertBillboardPositionDate(item, type)
                let color = ''
                if (item.color == '') {
                    color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
                } else {
                    let r = parseInt(item.color.slice(1, 3), 16)
                    let g = parseInt(item.color.slice(3, 5), 16)
                    let b = parseInt(item.color.slice(5, 7), 16)
                    color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                }

                let chooseArrow = new global.DC.Billboard(new global.DC.Position(Number(positionObj.lng), Number(positionObj.lat), Number(positionObj.alt)), positionObj.url)
                chooseArrow.customType = 'billboard'
                chooseArrow.setStyle({
                    color: color,
                })
                chooseArrow.attrParams = positionObj
                chooseArrow.size = [32, 32]
                chooseArrow.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick)
                chooseArrow.on(global.DC.MouseEventType.MOUSE_OVER, this.pointMouseOver)
                chooseArrow.on(global.DC.MouseEventType.MOUSE_OUT, this.pointMouseOut)
                pointCircleCarLayer.addOverlay(chooseArrow)
            })
        },

        // 鼠标移入图标事件
        pointMouseOver (e) {
            console.log(e, 959999)
            this.$store.commit('SET_ACTIVITYPOLICEPOPUP', true)
            let hoverData = {}
            if ('carId' in e.overlay.attrParams.data) {
                hoverData = policecarOption.filter(item => item.value == e.overlay.attrParams.data.carId)[0]
                hoverData.policeData = { 'name': 'none' }
                hoverData.policeStationName = 'none'
            } else {
                let policeArr = this.filterTree(this.policeTreeData)
                hoverData.policeData = policeArr.filter(item => item.id == e.overlay.attrParams.data.policemanId)[0]
                hoverData.policeStationName = policeArr.filter(item => item.id == policeArr.filter(item => item.id == e.overlay.attrParams.data.policemanId)[0].parentId)[0].name
                hoverData.carType = 'none'
                hoverData.label = 'none'
            }
            this.$store.commit('SET_ACTIVITYPOLICEPOPUPDATA', hoverData)

            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'ActivityPoliceDomBox',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(e.wgs84SurfacePosition.lng),
                            Number(e.wgs84SurfacePosition.lat),
                            0
                        )
                    )
                ]
            })
        },

        /**
         * @description: 鼠标移出事件
         * @param {*} e
         * @return {*}
         */
        pointMouseOut (e) {
            this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
        },

        /**
         * @description: 巡逻路线地图添加
         * @param {*} data
         * @return {*}
         */
        addMapLineLayers (data) {
            data.forEach(item => {
                let positionNewArr = this.convertPolylineOrPolygonPositionDate(item, 'port')
                // 线坐标字符串
                item.linePositionStr = positionNewArr

                let coords = global.DC.GeoTools.polylineBuffer(positionNewArr, item.width != -1 ? item.width : 100)

                let color = ''
                let lineColor = ''

                if (item.color == '') {
                    color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
                } else {
                    let r = parseInt(item.color.slice(1, 3), 16)
                    let g = parseInt(item.color.slice(3, 5), 16)
                    let b = parseInt(item.color.slice(5, 7), 16)
                    color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 150)
                    lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                }

                let positionStr = ''
                coords.forEach(item => {
                    positionStr += item[0] + ',' + item[1] + ';'
                })

                item.polygonPositionStr = positionStr

                let lineObj = new global.DC.Polyline(positionNewArr)
                lineObj.customType == 'polyline'
                lineObj.setStyle({
                    material: lineColor,
                    width: 3
                })

                item.lineObj = lineObj

                lineLayer.addOverlay(lineObj)

                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'newCarDrawLineLayers',
                    positions: positionStr,
                    material: color,
                    params: item,
                    incident: this.lineOverlayTypeClick
                })

            })

            this.$parent.chooseActivityLineList = data
        },

        clearOrRemoveLayerAll (type) {
            if (type == 'clear') {
                // 要素的
                pointCircleCarLayer != null && pointCircleCarLayer.clear()
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'newFactorResourcesLayers',
                    type: 'VectorLayer'
                })

                // 作战的
                arrowsListLayer != null && arrowsListLayer.clear()

                // 巡逻的
                lineLayer != null && lineLayer.clear()
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'newCarDrawLineLayers',
                    type: 'VectorLayer'
                })

                // 活动区域的
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'polygonWallLayer',
                    type: 'VectorLayer'
                })
            } else {
                // 要素的
                pointCircleCarLayer != null && pointCircleCarLayer.remove(), pointCircleCarLayer = null
                this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'newFactorResourcesLayers',
                    type: 'VectorLayer'
                })

                // 作战的
                arrowsListLayer != null && arrowsListLayer.remove(), arrowsListLayer = null

                // 巡逻的
                lineLayer != null && lineLayer.remove(), lineLayer = null
                this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'newCarDrawLineLayers',
                    type: 'VectorLayer'
                })

                // 活动区域的
                this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'polygonWallLayer',
                    type: 'VectorLayer'
                })
            }
        },

        // 切换轨警力资源显示
        switchChange (e) {
            pointCircleCarLayer.show = e
            this.$EventBus.$emit('layerShow', { layerName: 'newFactorResourcesLayers', flag: e })
        },

        // 切换作战标绘
        switchArrowBtnChange (e) {
            arrowsListLayer.show = e
        },

        // 切换轨迹播放控件
        switchBtnChange (e) {
            lineLayer.show = e
            this.$EventBus.$emit('layerShow', { layerName: 'newCarDrawLineLayers', flag: e })
        },

        // 获取标绘图层覆盖物
        getArrowsListLayerOverlayList () {
            return arrowsListLayer.getOverlays()
        },

        // 单击。标绘箭头
        reeditArrowClick (e) {
            this.$refs.PolygonPlotPage.setCurOver(e)
        },

        // 地图绘制元素点击事件
        overlayTypeClick (e) {
            if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
                this.isChoosePoliceElementDisabled = false
            } else {
                this.isChoosePoliceElementDisabled = true
            }

            if ('policemanId' in e.overlay.attrParams.data) {
                this.$refs.PolicePersonChange.setConfig(e)
            } else if ('carId' in e.overlay.attrParams.data) {
                this.$refs.PoliceCarChange.setConfig(e)
            }
        },

        // 树形数据传数组
        filterTree (tree, arr = []) {
            if (!tree.length) return []
            arr.push(...tree)
            for (let item of tree) {
                if (item.children && item.children.length) {
                    this.filterTree(item.children, arr)
                }
            }
            return arr
        },

        // 巡逻路线面点击事件
        lineOverlayTypeClick (e) {
            this.policeIconId = e.overlay.attrParams.id

            this.$refs.VIDEOCONTROLBOX.closeVideo()

            this.$refs.PolylinePlotPage.setOverlay(e)

            if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
                this.$refs.PolylinePlotPage.setConfig({
                    title: '修改巡逻路线',
                    isLineEdit: true,
                    lineEditVisible: true
                })
            } else {
                this.$refs.PolylinePlotPage.setConfig({
                    lineEditVisible: true
                })
            }
        },

        // 转换 点 坐标数据
        convertBillboardPositionDate (data, iconName) {
            let positionStr = data.position
            positionStr = data.position.slice(6, positionStr.length - 1)
            let positionArr = positionStr.split(" ")
            let positionObj = {}
            if (iconName == 'activity') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: data.altitude, url: '/img/icon/activity.png' }
            } else if (iconName == 'policeman') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: data.altitude, url: '/img/icon/police-people.png', data: data }
            } else if (iconName == 'policecar') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: data.altitude, url: '/img/icon/car.png', data: data }
            }
            return positionObj
        },

        // 转换 线面 坐标数据
        convertPolylineOrPolygonPositionDate (data, type) {
            let heightData = data.altitude.split(',')
            let positionStr = type == 'port' ? data.position.slice(11, data.position.length - 1) : data.position.slice(12, data.position.length - 2)

            console.log(data, positionStr, 4555, '线段')

            let positionArr = positionStr.split(',')

            let positionNewArr = ''

            positionArr.forEach((item, index) => {
                let lng = item.split(' ')[0]
                let lat = item.split(' ')[1]
                let alt = heightData[index]

                positionNewArr += lng + ',' + lat + ',' + alt + ';'
            })

            return positionNewArr
        },
    },

    destroyed () {
        this.clearOrRemoveLayerAll('remove')
    }
}
</script>

<style lang="scss" scoped></style>

 src/views/activity/components/videoControlBox.vue

@@ -290,8 +290,6 @@
            })

            tc.addTrack(track)

            this.$parent.lineEditVisible = false
        },

        // 遍历监控图标

 src/views/activity/index.vue

@@ -1,12 +1,12 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @Date: 2023-03-24 16:36:55
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-24 16:44:07
 * @LastEditTime: 2023-03-28 22:47:35
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 电子沙盘
 *
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->

<template>
@@ -15,414 +15,180 @@
            <div class="title">电子沙盘</div>
            <div class="search-box">
                <div>
                    <div class="category">选择时间：</div>
                    <div class="category-value">
                        <el-date-picker v-model="selectTime" type="daterange" align="right" unlink-panels
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" @change="activityTimeChange"></el-date-picker>
                    </div>
                </div>

                <div>
                    <div class="category">名称：</div>
                    <div class="category-value search-activity">
                    <input type="text" placeholder="请输入…" v-model="searchActivity" class="category-input"
                        @input="inputChange" />
                    <div class="clear" v-show="isShowActivityClearBtn" @click="clearActivitySearchValue" title="清空">
                        <img src="/img/icon/clear.png" alt />
                        <input type="text" placeholder="请输入…" v-model="searchActivity" class="category-input" />
                    </div>
                    <button class="category-button el-icon-search" @click="searchClick"></button>
                </div>
            </div>

            <div class="result-content">
                <div class="table-box">
                    <el-collapse v-show="activityList.length > 0" v-model="activeActivityIndex" accordion
                        @change="handleActivityChange" class="activity-list">
                        <el-collapse-item v-for="item in activityList" :name="item.id" :key="item.id">
                            <template slot="title">
                                {{ item.name }}
                            </template>
                            <el-collapse v-model="activeActivityElementIndex" accordion>
                                <el-collapse-item title="要素资源" :name="yszy">
                                    <el-collapse v-model="elementPoliceIndex" accordion>
                                        <el-collapse-item title="警车" :name="jc">
                                            <ul>
                                                <li v-for="carItem in chooseActivityPoliceCarList" :key="carItem.id"
                                                    @click="carOrPoliceItemClick(carItem.position, 'point')">
                                                    {{ carItem.serialNumber }}
                                                </li>
                                            </ul>
                                        </el-collapse-item>
                                    </el-collapse>
                                    <el-collapse v-model="elementPoliceCarIndex" accordion>
                                        <el-collapse-item title="警员" :name="jy">
                                            <ul>
                                                <li v-for="policeItem in chooseActivityPoliceManList" :key="policeItem.id"
                                                    @click="carOrPoliceItemClick(policeItem.position, 'point')">
                                                    {{ policeItem.policeName }}
                                                </li>
                                            </ul>
                                        </el-collapse-item>
                                    </el-collapse>
                                    <el-collapse v-model="elementNormalIndex" accordion>
                                        <el-collapse-item title="普通群众" :name="ptqz">
                                            <ul>
                                                <li v-for="(normalItem, index) in normalPeopleList" :key="normalItem.id"
                                                    @click="carOrPoliceItemClick(normalItem.position, 'people')">
                                                    普通群众{{ index + 1 }}
                                                </li>
                                            </ul>
                                        </el-collapse-item>
                                    </el-collapse>
                                    <el-collapse v-model="elementProtectedIndex" accordion>
                                        <el-collapse-item title="保护对象" :name="bhdx">
                                            <ul>
                                                <li v-for="(protectedItem, index) in protectedPeopleList"
                                                    :key="protectedItem.id"
                                                    @click="carOrPoliceItemClick(protectedItem.position, 'people')">
                                                    保护对象{{ index + 1 }}
                                                </li>
                                            </ul>
                                        </el-collapse-item>
                                    </el-collapse>
                                    <el-collapse v-model="elementDangerousIndex" accordion>
                                        <el-collapse-item title="危险人物" :name="wxrw">
                                            <ul>
                                                <li v-for="(dangerousItem, index) in dangerousPeopleList"
                                                    :key="dangerousItem.id"
                                                    @click="carOrPoliceItemClick(dangerousItem.position, 'people')">
                                                    危险人物{{ index + 1 }}
                                                </li>
                                            </ul>
                                        </el-collapse-item>
                                    </el-collapse>
                                </el-collapse-item>
                            </el-collapse>
                            <el-collapse v-model="activeActivityArrowIndex" accordion>
                                <el-collapse-item title="作战标绘" :name="zzbh">
                                    <el-collapse v-model="attackArrowIndex" accordion>
                                        <el-collapse-item title="进攻箭头" :name="jgjt">
                                            <ul>
                                                <li v-for="(attackItem, index) in attackArrowList" :key="attackItem.id"
                                                    @click="carOrPoliceItemClick(attackItem.position, 'arrow')">
                                                    进攻箭头{{ index + 1 }}
                                                </li>
                                            </ul>
                                        </el-collapse-item>
                                        <el-collapse v-model="doubleArrowIndex" accordion>
                                            <el-collapse-item title="双箭头" :name="sjt">
                                                <ul>
                                                    <li v-for="(doubleItem, index) in doubleArrowList" :key="doubleItem.id"
                                                        @click="carOrPoliceItemClick(doubleItem.position, 'arrow')">
                                                        双箭头{{ index + 1 }}
                                                    </li>
                                                </ul>
                                            </el-collapse-item>
                                        </el-collapse>
                                        <el-collapse v-model="fineArrowIndex" accordion>
                                            <el-collapse-item title="直箭头" :name="zjt">
                                                <ul>
                                                    <li v-for="(fineItem, index) in fineArrowList" :key="fineItem.id"
                                                        @click="carOrPoliceItemClick(fineItem.position, 'arrow')">
                                                        直箭头{{ index + 1 }}
                                                    </li>
                                                </ul>
                                            </el-collapse-item>
                                        </el-collapse>
                                        <el-collapse v-model="tailedAttackArrowIndex" accordion>
                                            <el-collapse-item title="燕尾箭头" :name="ywjt">
                                                <ul>
                                                    <li v-for="(tailedItem, index) in tailedAttackArrowList"
                                                        :key="tailedItem.id"
                                                        @click="carOrPoliceItemClick(tailedItem.position, 'arrow')">
                                                        燕尾箭头{{ index + 1 }}
                                                    </li>
                                                </ul>
                                            </el-collapse-item>
                                        </el-collapse>
                                        <el-collapse v-model="polygonArrowIndex" accordion>
                                            <el-collapse-item title="多边形" :name="dbx">
                                                <ul>
                                                    <li v-for="(polygonItem, index) in polygonList" :key="polygonItem.id"
                                                        @click="carOrPoliceItemClick(polygonItem.position, 'polygon')">
                                                        多边形{{ index + 1 }}
                                                    </li>
                                                </ul>
                                            </el-collapse-item>
                                        </el-collapse>
                                    </el-collapse>
                                </el-collapse-item>
                            </el-collapse>
                            <el-collapse v-model="activeActivityLineIndex" accordion>
                                <el-collapse-item title="巡逻路线" :name="xllx">
                                    <ul>
                                        <li v-for="(lineItem, index) in chooseActivityLineList" :key="lineItem.id"
                                            @click="carOrPoliceItemClick(lineItem.polygonPositionStr, 'line')">
                                            路线{{ index + 1 }}
                                        </li>
                                    </ul>
                                </el-collapse-item>
                            </el-collapse>
                        </el-collapse-item>
                    </el-collapse>

                    <div v-show="activityList == 0" class="no-data">暂无数据</div>
                </div>
                <div class="pages all-pagination-sty">
                    <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
                        :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>

        <!-- <div class="result-content">
                <div class="table-box">
                    <div v-show="activityList.length > 0" class="row-box" :class="{ on: currentClickIndex === index }"
                        v-for="(item, index) in activityList" :key="index" @click="activityListClick(item, index)">
                        <div class="row-title">常规安保</div>
                        <div class="row-content">
                            <div>
                                <div class="category">名称：</div>
                                <div class="category-value">{{ item.name }}</div>
                            </div>
                            <div>
                                <div class="category">人数：</div>
                                <div class="category-value">{{ item.number }}</div>
                            </div>
                            <div>
                                <div class="category">时间：</div>
                                <div class="category-value">{{ item.startTime }} 至 {{ item.endTime }}</div>
                            </div>
                            <div>
                                <div class="category">详情：</div>
                                <div class="category-value">{{ item.content }}</div>
                                                                                                                                                                                                                           </div>
                                                                                                                                                                                                                       </div>
                                                                                                                                                                                                                   </div>

                                                                                                                                                                                                                   <div v-show="activityList == 0" class="no-data">暂无数据</div>
                                                                                                                                                                                                               </div>
                                                                                                                                                                                                               <div class="pages all-pagination-sty">
                                                                                                                                                                                                                   <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
                                                                                                                                                                                                                       :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
                                                                                                                                                                                                               </div>
                                                                                                                                                                                                   </div> -->

            <el-collapse v-model="activeActivityIndex" accordion @change="handleActivityChange" class="activity-list">
                <el-collapse-item v-for="item in activityList" :name="item.id" :key="item.id">
                    <template slot="title">
                        {{ item.name }}
                    </template>
                    <el-collapse v-model="activeActivityElementIndex" accordion>
                        <el-collapse-item title="要素资源" :name="yszy">
                            <el-collapse v-model="elementPoliceIndex" accordion>
                                <el-collapse-item title="警车" :name="jc">
                                    <ul>
                                        <li v-for="carItem in chooseActivityPoliceCarList" :key="carItem.id"
                                            @click="carOrPoliceItemClick(carItem.position, 'point')">
                                            {{ carItem.serialNumber }}
                                        </li>
                                    </ul>
                                </el-collapse-item>
                            </el-collapse>
                            <el-collapse v-model="elementPoliceCarIndex" accordion>
                                <el-collapse-item title="警员" :name="jy">
                                    <ul>
                                        <li v-for="policeItem in chooseActivityPoliceManList" :key="policeItem.id"
                                            @click="carOrPoliceItemClick(policeItem.position, 'point')">
                                            {{ policeItem.policeName }}
                                        </li>
                                    </ul>
                                </el-collapse-item>
                            </el-collapse>
                            <el-collapse v-model="elementNormalIndex" accordion>
                                <el-collapse-item title="普通群众" :name="ptqz">
                                    <ul>
                                        <li v-for="(normalItem, index) in normalPeopleList" :key="normalItem.id"
                                            @click="carOrPoliceItemClick(normalItem.position, 'people')">
                                            普通群众{{ index + 1 }}
                                        </li>
                                    </ul>
                                </el-collapse-item>
                            </el-collapse>
                            <el-collapse v-model="elementProtectedIndex" accordion>
                                <el-collapse-item title="保护对象" :name="bhdx">
                                    <ul>
                                        <li v-for="(protectedItem, index) in protectedPeopleList" :key="protectedItem.id"
                                            @click="carOrPoliceItemClick(protectedItem.position, 'people')">
                                            保护对象{{ index + 1 }}
                                        </li>
                                    </ul>
                                </el-collapse-item>
                            </el-collapse>
                            <el-collapse v-model="elementDangerousIndex" accordion>
                                <el-collapse-item title="危险人物" :name="wxrw">
                                    <ul>
                                        <li v-for="(dangerousItem, index) in dangerousPeopleList" :key="dangerousItem.id"
                                            @click="carOrPoliceItemClick(dangerousItem.position, 'people')">
                                            危险人物{{ index + 1 }}
                                        </li>
                                    </ul>
                                </el-collapse-item>
                            </el-collapse>
                        </el-collapse-item>
                    </el-collapse>
                    <el-collapse v-model="activeActivityArrowIndex" accordion>
                        <el-collapse-item title="作战标绘" :name="zzbh">
                            <el-collapse v-model="attackArrowIndex" accordion>
                                <el-collapse-item title="进攻箭头" :name="jgjt">
                                    <ul>
                                        <li v-for="(attackItem, index) in attackArrowList" :key="attackItem.id"
                                            @click="carOrPoliceItemClick(attackItem.position, 'arrow')">
                                            进攻箭头{{ index + 1 }}
                                        </li>
                                    </ul>
                                </el-collapse-item>
                                <el-collapse v-model="doubleArrowIndex" accordion>
                                    <el-collapse-item title="双箭头" :name="sjt">
                                        <ul>
                                            <li v-for="(doubleItem, index) in doubleArrowList" :key="doubleItem.id"
                                                @click="carOrPoliceItemClick(doubleItem.position, 'arrow')">
                                                双箭头{{ index + 1 }}
                                            </li>
                                        </ul>
                                    </el-collapse-item>
                                </el-collapse>
                                <el-collapse v-model="fineArrowIndex" accordion>
                                    <el-collapse-item title="直箭头" :name="zjt">
                                        <ul>
                                            <li v-for="(fineItem, index) in fineArrowList" :key="fineItem.id"
                                                @click="carOrPoliceItemClick(fineItem.position, 'arrow')">
                                                直箭头{{ index + 1 }}
                                            </li>
                                        </ul>
                                    </el-collapse-item>
                                </el-collapse>
                                <el-collapse v-model="tailedAttackArrowIndex" accordion>
                                    <el-collapse-item title="燕尾箭头" :name="ywjt">
                                        <ul>
                                            <li v-for="(tailedItem, index) in tailedAttackArrowList" :key="tailedItem.id"
                                                @click="carOrPoliceItemClick(tailedItem.position, 'arrow')">
                                                燕尾箭头{{ index + 1 }}
                                            </li>
                                        </ul>
                                    </el-collapse-item>
                                </el-collapse>
                                <el-collapse v-model="polygonArrowIndex" accordion>
                                    <el-collapse-item title="多边形" :name="dbx">
                                        <ul>
                                            <li v-for="(polygonItem, index) in polygonList" :key="polygonItem.id"
                                                @click="carOrPoliceItemClick(polygonItem.position, 'polygon')">
                                                多边形{{ index + 1 }}
                                            </li>
                                        </ul>
                                    </el-collapse-item>
                                </el-collapse>
                                <el-collapse v-model="labelMarkIndex" accordion>
                                    <el-collapse-item title="文字标绘" :name="wzbh">
                                        <ul>
                                            <li v-for="(labelItem, index) in labelMarkList" :key="labelItem.id"
                                                @click="carOrPoliceItemClick(labelItem.position, 'people')">
                                                文字标绘{{ index + 1 }}
                                            </li>
                                        </ul>
                                    </el-collapse-item>
                                </el-collapse>
                            </el-collapse>
                        </el-collapse-item>
                    </el-collapse>


                    <el-collapse v-model="activeActivityLineIndex" accordion>
                        <el-collapse-item title="巡逻路线" :name="xllx">
                            <ul>
                                <li v-for="(lineItem, index) in chooseActivityLineList" :key="lineItem.id"
                                    @click="carOrPoliceItemClick(lineItem.polygonPositionStr, 'line')">
                                    路线{{ index + 1 }}
                                </li>
                            </ul>
                        </el-collapse-item>
                    </el-collapse>
                </el-collapse-item>
            </el-collapse>
        </div>

        <draw-btn-box ref="DRAWBTNBOX" :dialogVisible="dialogVisible" :isShowActivityEditBox="isShowActivityEditBox"
            :showingSecurityId="showingSecurityId" :policeSwitch="policeSwitch" :polylineBtnSwitch="polylineBtnSwitch"
            :arrowBtnSwitch="arrowBtnSwitch" :policeIconId="policeIconId" :lineWidth="lineWidth"
            @setOverlayObj="setOverlayObj" @drawLabel="drawLabel" @setPoliceOption="setPoliceOption"></draw-btn-box>

        <div class="second-container" :class="{ 'spread': boxShow, 'take-back': !boxShow }">
            <el-tree :data="treeData" show-checkbox node-key="id" @check="treeCheckClick"></el-tree>
        </div>

        <activity-detail :dialogVisible="dialogVisible" :activityDetails="activityDetails"
            @closeActivityDetails="closeActivityDetails"></activity-detail>

        <map-search-box></map-search-box>

        <video-control-box ref="VIDEOCONTROLBOX"></video-control-box>

        <div class="plan-control" v-show="dialogVisible && (isHavePolice || isHaveArrow || isHaveLine)">
            <div class="row-box" v-show="isHavePolice">
                <div class="category">要素资源：</div>
                <div class="category-value">
                    <el-switch v-model="policeSwitch" @change="switchChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                </div>
            </div>

            <div class="row-box" v-show="isHaveArrow">
                <div class="category">作战标绘：</div>
                <div class="category-value">
                    <el-switch v-model="arrowBtnSwitch" @change="switchArrowBtnChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                </div>
            </div>

            <div class="row-box" v-show="isHaveLine">
                <div class="category">巡逻路线：</div>
                <div class="category-value">
                    <el-switch v-model="polylineBtnSwitch" @change="switchBtnChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                </div>
            </div>
        </div>

        <el-dialog title="选择警车" :modal="false" :visible.sync="policeChooseCarVisible"
            :before-close="policeChooseCarBeforeClose" :close-on-click-modal="true" class="choose-policeCar-box">
            <div>
                <el-select size="small" v-model="policeType" placeholder="请选择" :disabled="isChoosePoliceElementDisabled">
                    <el-option v-for="item in policeOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
                <div class="line">
                    <div class="value-name-box">选择颜色：</div>
                    <div class="pick-color-box">
                        <el-color-picker v-model="chooseCarColor" :predefine="predefineColors" size="small">
                        </el-color-picker>
                    </div>
                </div>
                <div class="line area">
                    <div class="value-name-box">预警范围：</div>
                    <div class="width-box">
                        <div class="input-width-box">
                            <input type="text" v-model="pointAreaWidth" placeholder="请输入..." />
                        </div>
                        <div class="units">米</div>
                    </div>
                </div>
                <el-button @click="determine" v-show="!isChoosePoliceElementDisabled">确定</el-button>
                <el-button @click="deletePoliceElement"
                    v-show="!isChoosePoliceElementDisabled && policeIconIsCreated">删除</el-button>
                <el-button @click="cancel" v-show="!isChoosePoliceElementDisabled">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="选择警员" :modal="false" :visible.sync="policeChooseVisible" :before-close="policeChooseBeforeClose"
            :close-on-click-modal="true" class="choose-police-box">
            <div>
                <el-input ref="searchTreeInput" v-model="searchPoliceTreeName" @input="searchInputTree"
                    @focus="searchTreeShowFlag = true" @blur="searchTreeShowFlag = false" placeholder="请选择警员"
                    style="cursor: pointer;"></el-input>
                <el-tree :data="policeTreeData" :props="policeDefaultProps" @node-click="handlePoliceNodeClick"
                    @mousedown.native="preventFocusLost" ref="policeTree" :filter-node-method="filterPoliceNode"
                    v-show="searchTreeShowFlag"></el-tree>
                <div class="line">
                    <div class="value-name-box">选择颜色：</div>
                    <div class="pick-color-box">
                        <el-color-picker v-model="choosePoliceColor" :predefine="predefineColors" size="small">
                        </el-color-picker>
                    </div>
                </div>
                <div class="line area">
                    <div class="value-name-box">预警范围：</div>
                    <div class="width-box">
                        <div class="input-width-box">
                            <input type="text" v-model="pointAreaWidth" placeholder="请输入..." />
                        </div>
                        <div class="units">米</div>
                    </div>
                </div>
                <div class="police-btn-box">
                    <el-button @click="determine" v-show="!isChoosePoliceElementDisabled">确定</el-button>
                    <el-button @click="deletePoliceElement"
                        v-show="!isChoosePoliceElementDisabled && policeIconIsCreated">删除</el-button>
                    <el-button @click="cancel" v-show="!isChoosePoliceElementDisabled">取消</el-button>
                </div>
            </div>
        </el-dialog>

        <el-dialog :title="lineEditTitle" :modal="false" :visible.sync="lineEditVisible" :close-on-click-modal="true"
            class="edit-line-box" :before-close="cancelSaveLine">
            <div>
                <div class="value-name-box">设置缓冲范围：</div>
                <div class="input-width-box">
                    <input type="text" v-model="lineWidth" placeholder="请输入..." />
                </div>
                <div class="units">米</div>
            </div>
            <div>
                <div class="value-name-box">选择范围颜色：</div>
                <div class="pick-color-box">
                    <el-color-picker v-model="chooseColor" :predefine="predefineColors" size="small">
                    </el-color-picker>
                </div>
            </div>
            <div class="edit-line-btn-box">
                <el-button @click="lookStartVideo" v-show="isLineEdit">查看视频</el-button>
                <el-button @click="editLineInfo" v-show="isLineEdit">编辑</el-button>
                <el-button @click="saveLineInfo" v-show="isLineEdit">保存</el-button>
                <el-button @click="deleteLine" v-show="isLineEdit">删除</el-button>
                <el-button @click="addLineInfo" v-show="!isLineEdit">添加</el-button>
                <el-button @click="cancelSaveLine">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="新增标绘" :modal="false" :visible.sync="polygonAddVisible" :close-on-click-modal="true"
            class="add-polygon-box" :before-close="cancelSavePolygon">
            <div class="line" v-show="isNeedPolygonType">
                <div class="value-name-box">选择类型：</div>
                <div class="select-type">
                    <el-select size="small" v-model="polygonAreaType" placeholder="请选择区域类型">
                        <el-option v-for="item in polygonAreaOption" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="line">
                <div class="value-name-box">选择标绘颜色：</div>
                <div class="pick-color-box">
                    <el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small">
                    </el-color-picker>
                </div>
            </div>
            <div class="line">
                <div class="value-name-box">设置透明度：</div>
                <div class="alpha">
                    <el-slider v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
                </div>
            </div>
            <div class="placeholder" v-show="!isNeedPolygonType"></div>
            <div class="add-polygon-btn-box">
                <el-button @click="savePolygonInfo">保存</el-button>
                <el-button @click="cancelSavePolygon">取消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改标绘" :modal="false" :visible.sync="editPlotVisible" :close-on-click-modal="true"
            class="edit-plot-box">
            <div>
                <div class="value-name-box">选择标绘颜色：</div>
                <div class="pick-color-box">
                    <el-color-picker v-model="choosePlotColor" :predefine="predefineColors" size="small">
                    </el-color-picker>
                </div>
            </div>
            <div v-show="!polygonName" class="placeholder"></div>
            <div>
                <div class="value-name-box">设置透明度：</div>
                <div class="alpha">
                    <el-slider v-model="choosePlotColorAlpha" :format-tooltip="formatTooltip"></el-slider>
                </div>
            </div>
            <div v-show="!polygonName" class="placeholder"></div>
            <div class="edit-plot-btn-box">
                <el-button @click="savePlot">保存</el-button>
                <el-button @click="editPlot">编辑</el-button>
                <el-button @click="deletePlot">删除</el-button>
                <el-button @click="editPlotVisible = false">取消</el-button>
            </div>
        </el-dialog>
        <public-index ref="PublicIndexPage"></public-index>
    </div>
</template>

<script>
import { getSecurityList, getPoliceList, getCarList, addCarAndRange, addActivityPolice, getSecurityPoliceList, getSecurityCarList, getServiceDictionary, getActivityType, addSecurityPlot, getSecurityPlotList, deleteActivityCar, deleteActivityPolice, deleteSecurityPlot, getSearchInfo, getPolicemanTree } from '@/api/activity/index.js'
import { getSecurityList, getPoliceList, getSearchInfo } from '@/api/activity/index.js'
import { getEquipmentAll } from '@/api/home/index.js'
import activityDetail from './components/activityDetail.vue'
import drawBtnBox from './components/drawBtnBox.vue'
import videoControlBox from './components/videoControlBox.vue'

let polylineAreaLayer = null
let arrowsListLayer = null
let pointCircleManLayer = null
let pointCircleCarLayer = null
let lineLayer = undefined
import publicIndex from './components/publicIndex.vue'


let loading = null
let overlayObj = {}
let plotOverlayData = null
let policeOverlayData = null
let policecarOption = []

let cameraList = []
let carList = []
let carEquipmentList = []
let talkBackEquipmentPublicList = []
let talkBackEquipmentList = []
let policeCarmeraList = []
let drawLabelStatus = 'end'
let curLinePolygonPosition = ''
let curLinePosition = ''
let realPoliceTimer = {}
@@ -443,7 +209,6 @@
            tailedAttackArrowIndex: '',
            fineArrowIndex: '',
            polygonArrowIndex: '',
            labelMarkIndex: '',
            activeActivityPoliceManIndex: '',
            activeActivityElementIndex: '',
            activeActivityArrowIndex: '',
@@ -459,26 +224,14 @@
            normalPeopleList: [],
            protectedPeopleList: [],
            dangerousPeopleList: [],
            labelMarkList: [],
            boxShow: true,
            selectTime: '',
            searchActivity: '',
            isShowActivityClearBtn: false,
            currentPage: 1,
            pagesize: 4,
            pagesCount: 1,
            activityList: [],
            currentClickIndex: '',
            activityOptions: [
                {
                    dictKey: '',
                    dictValue: '全部'
                }
            ],
            policeOption: [],
            policemanOption: [],
            activityType: '',
            policeType: '',
            treeData: [{
                id: 1,
                label: '数据地图',
@@ -586,76 +339,28 @@
                children: 'children',
                label: 'label'
            },
            dialogVisible: false,
            policeSwitch: true,
            arrowBtnSwitch: true,
            polylineBtnSwitch: true,
            activityDetails: {},

            policeChooseVisible: false,
            policeChooseCarVisible: false,
            showingSecurityId: '',
            policeIconIsCreated: false,
            policeIconId: {},
            isHavePoliceCar: false,
            isHavePoliceMan: false,
            isHaveArrow: false,
            isHaveLine: false,

            //当前登录用户的数据
            userInfo: {},
            lineEditVisible: false,
            lineEditTitle: '修改巡逻路线',
            polygonAddVisible: false,
            polygonName: '',
            polygonPositionStr: '',
            chooseColor: '#1CA085',
            choosePlotColor: '#409EFF',
            choosePlotColorAlpha: 48,

            chooseCarColor: '#1CA085',
            choosePoliceColor: '#1CA085',
            chooseLineData: {},
            lineWidth: 100,
            isChoosePoliceElementDisabled: false,

            isShowActivityEditBox: false,
            editPlotVisible: false,
            plotId: '',
            policeTreeData: [],
            policeDefaultProps: {
                children: 'children',
                label: 'name'
            },
            searchPoliceTreeName: '',
            searchPoliceTreeId: '',
            searchTreeShowFlag: false,

            isNeedName: false,
            plotSaveType: 1,
            arrowPositionSre: '',
            isLineEdit: true,

            addLinePosition: '',
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, )',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%)',
                '#c7158577'
            ],
            polygonAreaType: 1,
            polygonAreaOption: [{
                value: 1,
                label: '核心区'
            }, {
                value: 2,
                label: '缓冲区'
            }],
            isNeedPolygonType: false,

            plotPointPositionStr: '',
            pointAreaWidth: 100,
            dataTreeCheckedNodes: [],
@@ -664,7 +369,7 @@
        }
    },

    components: { activityDetail, drawBtnBox, videoControlBox },
    components: { publicIndex },

    created () {
        let userInfo = sessionStorage.getItem("userInfo")
@@ -673,11 +378,9 @@
            this.userInfo = JSON.parse(userInfo)
        }

        // 获取下拉列表数据
        this.getActivityType()

        this.getPoliceList()

        // 获取面板列表数据
        this.getSecurityList(this.currentPage, this.pagesize)

        //摄像头
@@ -695,32 +398,6 @@

    mounted () {
        this.$parent.$parent.resize('400px', true)
        this.$nextTick(() => {
            if (pointCircleManLayer == null) {
                pointCircleManLayer = new global.DC.VectorLayer('pointCircleManLayer')
                global.viewer.addLayer(pointCircleManLayer)
            }

            if (pointCircleCarLayer == null) {
                pointCircleCarLayer = new global.DC.VectorLayer('pointCircleCarLayer')
                global.viewer.addLayer(pointCircleCarLayer)
            }

            if (arrowsListLayer == null) {
                arrowsListLayer = new global.DC.VectorLayer('arrowsListLayer')
                global.viewer.addLayer(arrowsListLayer)
            }

            if (lineLayer == null) {
                lineLayer = new global.DC.VectorLayer('lineLayer')
                global.viewer.addLayer(lineLayer)
            }

            if (polylineAreaLayer == null) {
                polylineAreaLayer = new global.DC.VectorLayer('polylineAreaLayer')
                global.viewer.addLayer(polylineAreaLayer)
            }
        })
    },

    updated () {
@@ -739,6 +416,80 @@

            this.currentTreeItem = val
            this.activityListClick(unfoldingItem, val)
        },

        // 获取列表
        getSecurityList (current, size, name) {
            this.loading()
            var deptId = ""
            if (this.userInfo.dept_id != '1123598813738675201') {
                deptId = this.userInfo.dept_id
            }

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'activityLayers',
                type: 'VectorLayer'
            })

            this.$nextTick(() => {
                this.$refs.PublicIndexPage.closeActivityDetails()
            })


            this.showingSecurityId = ''

            getSecurityList({ current, size, name, deptId }).then(res => {
                this.activityList = res.data.data.records.map(item => {
                    item.startTime = item.startTime.substring(0, 16)
                    item.endTime = item.endTime.substring(0, 16)

                    return item
                })

                this.pagesCount = res.data.data.pages

                this.activityList.forEach(item => {
                    let positionObj = this.convertBillboardPositionDate(item, 'activity')

                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'activityLayers',
                        type: "billboard",
                        params: positionObj,
                        incident: this.houseSiteClick
                    })
                })

                setTimeout(() => {
                    loading.close()
                }, 1500)
            })
        },

        /**
         * @description: 点击列表
         * @param {*} item
         * @param {*} index
         * @return {*}
         */
        activityListClick (item, index) {
            // 当前选中的ID
            this.showingSecurityId = item.id

            this.$refs.PublicIndexPage.reloadAll({ id: item.id, deptId: item.deptId, item })


            this.activityDeptId = item.deptId

            // 定位至活动区域
            let positionObj = this.convertBillboardPositionDate(item, 'activity')
            this.$EventBus.$emit('toPosition', {
                siteJd: positionObj.lng,
                siteWd: positionObj.lat,
                siteGd: 1500
            })

            // 遍历实时警力
            this.eachDataTreeCheckedNodes(this.dataTreeCheckedNodes)
        },

        // 点击警车列表定位
@@ -765,7 +516,6 @@
                let positionStr = position.slice(11, position.length - 1)
                lng = Number(positionStr.split(",")[0].split(' ')[0])
                lat = Number(positionStr.split(",")[0].split(' ')[1])
                console.log(position, positionStr, lng, lat)
            }
            this.$EventBus.$emit('toPosition', {
                siteJd: lng,
@@ -774,551 +524,12 @@
            })
        },

        setOverlayObj (e) {
            overlayObj = e
        },

        setPoliceOption () {
            this.policeOption = policecarOption
        },

        // 时间选中值触发
        activityTimeChange () {
            let startTime = ''
            let endTime = ''
            if (this.selectTime) {
                startTime = this.selectTime[0]
                endTime = this.selectTime[1]
            }
            this.getSecurityList(this.currentPage, this.pagesize, this.activityType, this.searchActivity, startTime, endTime)
        },

        // 获取列表
        getSecurityList (current, size, type, name, startTime, endTime) {
            this.loading()
            var deptId = ""
            if (this.userInfo.dept_id != '1123598813738675201') {
                deptId = this.userInfo.dept_id
            }

            getSecurityList(current, size, type, name, startTime, endTime, deptId).then(res => {
                this.activityList = res.data.data.records.map(item => {
                    item.startTime = item.startTime.substring(0, 16)
                    item.endTime = item.endTime.substring(0, 16)

                    return item
                })

                this.pagesCount = res.data.data.pages

                this.addActivityPoint()

                loading.close()
            })
        },

        // 添加图标
        addActivityPoint () {
            this.activityList.forEach(item => {
                let positionObj = this.convertBillboardPositionDate(item, 'activity')
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'activityLayers',
                    type: "billboard",
                    params: positionObj,
                    incident: this.houseSiteClick
                })
            })
        },

        inputChange (e) {
            if (this.searchActivity == '') {
                this.isShowActivityClearBtn = false
            } else {
                this.isShowActivityClearBtn = true
            }
        },

        clearActivitySearchValue () {
            this.searchActivity = ''
            this.inputChange()
            this.searchClick()
        },

        // 点击搜索
        searchClick () {
            let startTime = ''
            let endTime = ''
            if (this.selectTime) {
                startTime = this.selectTime[0]
                endTime = this.selectTime[1]
            }
            this.getSecurityList(this.currentPage, this.pagesize, this.activityType, this.searchActivity, startTime, endTime)
        },

        /**
         * @description: 点击列表
         * @param {*} item
         * @param {*} index
         * @return {*}
         */
        activityListClick (item, index) {
            this.policeSwitch = true
            this.arrowBtnSwitch = true
            this.polylineBtnSwitch = true

            this.$refs.DRAWBTNBOX.removeDraw()
            this.$refs.DRAWBTNBOX.clearDrawArrow()
            this.$refs.DRAWBTNBOX.clearDraw()
            arrowsListLayer != null && arrowsListLayer.clear()

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'newDrawLayers',
                type: 'VectorLayer'
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polygonWallLayer',
                type: 'VectorLayer'
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'monitoringLayers',
                type: 'VectorLayer'
            })

            this.showingSecurityId = item.id

            // 加载当前面
            if (item.activityArea && item.activityArea.length > 0) {
                let polyGonData = item.activityArea.slice(11, item.activityArea.length - 1)
                polyGonData = polyGonData.replace(/,/g, ";")
                polyGonData = polyGonData.replace(/ /g, ",")
                let newPolyData = polyGonData.split(';').map(item => {
                    let lngOrlat = item.split(',')
                    lngOrlat.push(140)

                    lngOrlat = lngOrlat.join(',')

                    return lngOrlat
                }).join(';')

                this.$EventBus.$emit('layerWallAdd', {
                    layerName: 'polygonWallLayer',
                    positions: newPolyData,
                    imgUrl: '/img/bg/jj.png'
                })
            }

            // 警员警车列表根据deptid筛选
            // 获取树状警员数据
            this.getPolicemanTree({ deptId: item.deptId })

            this.getCarList({ deptId: item.deptId })

            // 警力资源
            this.getSecurityPoliceList(item.id, this.policeSwitch)
            this.getSecurityCarList(item.id, this.policeSwitch, this.polylineBtnSwitch)
            // 作战标绘
            this.getSecurityPlotList(item.id, this.policeSwitch, 'billboard')
            this.getSecurityPlotList(item.id, this.arrowBtnSwitch, 'plot')

            this.activityDetails = item

            let positionObj = this.convertBillboardPositionDate(item, 'activity')

            if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == item.deptId) {
                this.isShowActivityEditBox = true
            } else {
                this.isShowActivityEditBox = false
            }
            this.activityDeptId = item.deptId

            this.currentClickIndex = index

            this.$EventBus.$emit('toPosition', {
                siteJd: positionObj.lng,
                siteWd: positionObj.lat,
                siteGd: 1500
            })

            this.dialogVisible = true

            // 遍历实时警力
            this.eachDataTreeCheckedNodes(this.dataTreeCheckedNodes)
        },

        // 分页页码变化事件
        handleCurrentChange: function (currentPage) {
        handleCurrentChange (currentPage) {
            this.currentPage = currentPage
            this.currentClickIndex = ''
            this.currentTreeItem = ''
            this.activeActivityIndex = ''
            this.getSecurityList(this.currentPage, this.pagesize)
        },

        // 切换轨警力资源显示
        switchChange (e) {
            this.getSecurityCarList(this.showingSecurityId, this.policeSwitch, this.polylineBtnSwitch, 'car')
            this.getSecurityPoliceList(this.showingSecurityId, this.policeSwitch)
            this.getSecurityPlotList(this.showingSecurityId, this.policeSwitch, 'billboard')
            this.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch, 'plot')
        },

        // 切换作战标绘
        switchArrowBtnChange (e) {
            this.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch, 'plot')
            this.getSecurityPlotList(this.showingSecurityId, this.policeSwitch, 'billboard')
        },

        // 切换轨迹播放控件
        switchBtnChange (e) {
            this.getSecurityCarList(this.showingSecurityId, this.policeSwitch, this.polylineBtnSwitch, 'line')
        },

        // 获取标绘箭头列表
        getSecurityPlotList (securityId, arrowShow, showType) {
            arrowsListLayer.clear()
            this.$refs.DRAWBTNBOX.removeDrawArrow()

            if (!arrowShow) return
            getSecurityPlotList(securityId).then(res => {
                this.attackArrowList = res.data.data.filter(item => item.type == 1)
                this.doubleArrowList = res.data.data.filter(item => item.type == 2)
                this.tailedAttackArrowList = res.data.data.filter(item => item.type == 3)
                this.fineArrowList = res.data.data.filter(item => item.type == 4)
                this.polygonList = res.data.data.filter(item => item.type == 5)
                this.normalPeopleList = res.data.data.filter(item => item.type == 6)
                this.protectedPeopleList = res.data.data.filter(item => item.type == 7)
                this.dangerousPeopleList = res.data.data.filter(item => item.type == 8)
                this.labelMarkList = res.data.data.filter(item => item.type == 9)
                this.isHaveArrow = res.data.data.some(item => {
                    return item
                })
                let plotList = res.data.data
                res.data.data.forEach(item => {
                    let position = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
                    let chooseArrow = null
                    // let nameLabel = null
                    let color = ''
                    if (item.color == '') {
                        color = global.DC.Namespace.Cesium.Color.fromBytes(255, 69, 0, 173)
                    } else {
                        let r = parseInt(item.color.slice(1, 3), 16)
                        let g = parseInt(item.color.slice(3, 5), 16)
                        let b = parseInt(item.color.slice(5, 7), 16)
                        let a = Math.floor(Number(item.color.split(',')[1]) * 2.55) ? Math.floor(Number(item.color.split(',')[1]) * 2.55) : 255
                        color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
                    }
                    if (item.type == 1 && showType == 'plot') {
                        chooseArrow = new global.DC.AttackArrow(position)
                        arrowsListLayer.addOverlay(chooseArrow)
                    } else if (item.type == 2 && showType == 'plot') {
                        chooseArrow = new global.DC.DoubleArrow(position)
                        arrowsListLayer.addOverlay(chooseArrow)
                    } else if (item.type == 3 && showType == 'plot') {
                        chooseArrow = new global.DC.FineArrow(position)
                        arrowsListLayer.addOverlay(chooseArrow)
                    } else if (item.type == 4 && showType == 'plot') {
                        chooseArrow = new global.DC.TailedAttackArrow(position)
                        arrowsListLayer.addOverlay(chooseArrow)
                    } else if (item.type == 5 && showType == 'plot') {
                        chooseArrow = new global.DC.Polygon(position)
                        arrowsListLayer.addOverlay(chooseArrow)
                        // 缓存区的话需要扣去包含的核心区
                        if (item.areaType == 2) {
                            let itemPositionArr = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',').split(';')
                            itemPositionArr.push(itemPositionArr[0])
                            itemPositionArr = itemPositionArr.map(item => {
                                return item.split(',').map(Number)
                            })
                            let cachePolygon = this.$turf.polygon([itemPositionArr])
                            plotList.forEach(inItem => {
                                // 查询被包含的核心区
                                if (inItem.areaType == 1 && inItem.type == 5) {
                                    let inItemPositionArr = inItem.position.slice(11, inItem.position.length - 1).replace(/,/g, ';').replace(/ /g, ',').split(';')
                                    inItemPositionArr.push(inItemPositionArr[0])
                                    inItemPositionArr = inItemPositionArr.map(item => {
                                        return item.split(',').map(Number)
                                    })
                                    if (inItemPositionArr.length == 3 && inItemPositionArr[0][0] == inItemPositionArr[2][0] &&
                                        inItemPositionArr[2][1] == inItemPositionArr[0][1]) {
                                        return
                                    }
                                    let carePolygon = this.$turf.polygon([inItemPositionArr])
                                    let isContains = this.$turf.booleanContains(cachePolygon, carePolygon)
                                    // 如果完全包含就作为洞面扣去
                                    if (isContains) {
                                        chooseArrow.holes = [inItem.position.slice(11, inItem.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')]
                                    }

                                }
                            })
                        }
                        // let center = this.getCenter(item.position)
                        // let centerPosition = new global.DC.Position(center[0], center[1])
                        // nameLabel = new global.DC.Label(centerPosition, item.name)
                        // arrowsListLayer.addOverlay(nameLabel)
                        // nameLabel.setStyle({
                        //     "font": "30px",
                        // })
                    } else if (showType == 'billboard' && (item.type == 6 || item.type == 7 || item.type == 8)) {
                        let iconImgName = ''
                        if (item.type == 6) {
                            iconImgName = 'icon1'
                        } else if (item.type == 7) {
                            iconImgName = 'icon2'
                        } else if (item.type == 8) {
                            iconImgName = 'icon3'
                        }
                        position = position.split(';')[0].split(',')
                        let pointPosition = new global.DC.Position(Number(position[0]), Number(position[1]), 4)
                        position = new global.DC.Position(Number(position[0]), Number(position[1]), 4.5)
                        chooseArrow = new global.DC.Billboard(position, `/img/icon/${iconImgName}.png`)
                        chooseArrow.size = item.type == 6 ? [24, 24] : [32, 32]
                        arrowsListLayer.addOverlay(chooseArrow)
                        chooseArrow.setStyle({
                            "material": color,
                        })
                        chooseArrow.on(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
                        let point = new global.DC.Point(pointPosition)
                        arrowsListLayer.addOverlay(point)
                        point.attrParams = { 'id': item.id, 'color': item.color, 'item': item, 'pointOverlayData': point }
                        // point.on(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
                        point.setStyle({
                            "color": color, //颜色
                            "outlineColor": color, //边框颜色
                            "outlineWidth": 0, //边框大小，
                            "pixelSize": 32,
                        })
                        chooseArrow.attrParams = { 'id': item.id, 'color': item.color, 'item': item, 'pointOverlayData': point }
                    } else if (item.type == 9 && showType == 'plot') {
                        position = position.split(';')[0].split(',')
                        position = new global.DC.Position(Number(position[0]), Number(position[1]))
                        let label = new global.DC.Label(position, item.name)
                        label.attrParams = { 'id': item.id, item }
                        this.$refs.DRAWBTNBOX.lableAllEvent(label)
                        label.setStyle({
                            'fillColor': color,
                            "font": `${item.width}px sans-serif`,
                        })
                        arrowsListLayer.addOverlay(label)
                    }
                    if (chooseArrow != null) {
                        if (!(item.type == 6 || item.type == 7 || item.type == 8)) {
                            chooseArrow.attrParams = { 'id': item.id, 'color': item.color, item }
                        }
                        chooseArrow.setStyle({
                            "material": color,
                        })
                        chooseArrow.on(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
                    }
                })
            })
        },

        // 获取警员分布信息
        getSecurityPoliceList (securityId, pointShow) {
            this.$refs.DRAWBTNBOX.removeDraw()

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'newDrawLayers',
                type: 'VectorLayer'
            })

            if (pointCircleCarLayer != null) {
                pointCircleCarLayer.clear()
            }

            if (pointShow == false) return

            getSecurityPoliceList(securityId).then(res => {
                this.isHavePoliceMan = res.data.data.some(item => {
                    return item.type == 3
                })

                this.addMapCarAndPersonLayers(
                    res.data.data.filter(item => item.type == 3),
                    'policeman',
                    pointCircleCarLayer,
                    'newDrawLayers')
            })
        },

        /**
         * @description: 警力资源警车和巡逻路线的
         * @param {*} securityId
         * @param {*} pointShow
         * @param {*} polylineShow
         * @return {*}
         */
        getSecurityCarList (securityId, pointShow, polylineShow, type = 'all') {
            this.$refs.DRAWBTNBOX.clearDraw()

            if (type == 'car') {
                pointCircleManLayer != null && pointCircleManLayer.clear()

                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'newCarDrawLayers',
                    type: 'VectorLayer'
                })
            } else if (type == 'line') {
                lineLayer != null && lineLayer.clear()

                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'newCarDrawLineLayers',
                    type: 'VectorLayer'
                })
            } else {
                pointCircleManLayer != null && pointCircleManLayer.clear()

                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'newCarDrawLayers',
                    type: 'VectorLayer'
                })

                lineLayer != null && lineLayer.clear()

                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'newCarDrawLineLayers',
                    type: 'VectorLayer'
                })
            }

            getSecurityCarList(securityId).then(res => {
                this.isHavePoliceCar = res.data.data.some(item => {
                    return item.type == 3
                })

                this.isHaveLine = res.data.data.some(item => {
                    return item.type == 1
                })

                type == 'car' && pointShow && this.addMapCarAndPersonLayers(
                    res.data.data.filter(item => item.type == 3),
                    'policecar',
                    pointCircleManLayer,
                    'newCarDrawLayers')
                type == 'line' && polylineShow && this.addMapLineLayers(res.data.data.filter(item => item.type == 1))
                if (type == 'all') {
                    pointShow && this.addMapCarAndPersonLayers(
                        res.data.data.filter(item => item.type == 3),
                        'policecar',
                        pointCircleManLayer,
                        'newCarDrawLayers')
                    polylineShow && this.addMapLineLayers(res.data.data.filter(item => item.type == 1))
                }
            })
        },

        /**
         * @description: 警力资源地图添加
         * @param {*} data
         * @param {*} type
         * @param {*} curLayer
         * @param {*} mapLayer
         * @return {*}
         */
        addMapCarAndPersonLayers (data, type, curLayer, mapLayer) {
            if (type == 'policecar') {
                this.chooseActivityPoliceCarList = data
            } else {
                this.chooseActivityPoliceManList = data
            }
            data.forEach(item => {
                let positionObj = this.convertBillboardPositionDate(item, type)
                let position = new global.DC.Position(Number(positionObj.lng), Number(positionObj.lat))
                let point = new global.DC.Point(position)
                let color = ''
                if (item.color == '') {
                    color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
                } else {
                    let r = parseInt(item.color.slice(1, 3), 16)
                    let g = parseInt(item.color.slice(3, 5), 16)
                    let b = parseInt(item.color.slice(5, 7), 16)
                    color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                }
                point.attrParams = positionObj
                curLayer.addOverlay(point)
                point.setStyle({
                    "color": color, //颜色
                    "outlineColor": color, //边框颜色
                    "outlineWidth": 0, //边框大小，
                    "pixelSize": 32,
                })
                // point.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick)
                point.on(global.DC.MouseEventType.MOUSE_OVER, this.pointMouseOver)
                point.on(global.DC.MouseEventType.MOUSE_OUT, this.pointMouseOut)
                positionObj.pointOverlayData = point

                // 预警范围先不显示
                // let circle = new global.DC.Circle(position, item.width != -1 ? item.width : 100)
                // curLayer.addOverlay(circle)
                // circle.setStyle({
                //     "material": global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 100), //颜色
                // })

                this.$EventBus.$emit('layerPointAdd', {
                    layerName: mapLayer,
                    type: 'billboard',
                    params: positionObj,
                    incident: this.overlayTypeClick,
                    mouseOverIncident: this.pointMouseOver,
                    mouseOutIncident: this.pointMouseOut
                })
            })
        },

        /**
         * @description: 巡逻路线地图添加
         * @param {*} data
         * @return {*}
         */
        addMapLineLayers (data) {
            this.chooseActivityLineList = data
            data.forEach(item => {
                let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
                // 线坐标字符串
                item.linePositionStr = positionNewArr
                let coords = global.DC.GeoTools.polylineBuffer(positionNewArr, item.width != -1 ? item.width : 100)
                let color = ''
                let lineColor = ''
                if (item.color == '') {
                    color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
                } else {
                    let r = parseInt(item.color.slice(1, 3), 16)
                    let g = parseInt(item.color.slice(3, 5), 16)
                    let b = parseInt(item.color.slice(5, 7), 16)
                    color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 150)
                    lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                }

                let positionStr = ''
                coords.forEach(item => {
                    positionStr += item[0] + ',' + item[1] + ';'
                })

                item.polygonPositionStr = positionStr

                let lineObj = new global.DC.Polyline(positionNewArr)

                lineLayer.addOverlay(lineObj)
                lineObj.setStyle({
                    'material': lineColor,
                    'width': 3
                })
                item.lineObj = lineObj

                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'newCarDrawLineLayers',
                    positions: positionStr,
                    material: color,
                    params: item,
                    incident: this.lineOverlayTypeClick
                })

            })
        },

        lookStartVideo () {
            this.$refs.VIDEOCONTROLBOX.watchVideo(curLinePosition, curLinePolygonPosition)
        },

        loading () {
@@ -1327,23 +538,6 @@
                text: '拼命加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
        },

        // 获取树状警员列表
        getPolicemanTree (params) {
            getPolicemanTree(params).then(res => {
                this.policeTreeData = res.data.data
            })
        },

        getActivityType () {
            getServiceDictionary().then(response => {
                const activityType = response.data.data.records.filter(item => item.code == "securityType")

                getActivityType(activityType[0].id).then(res => {
                    this.activityOptions.push(...res.data.data)
                })
            })
        },

@@ -1358,38 +552,6 @@
            return list
        },

        /**
         * @description: 禁用鼠标点击树结构的时候input失去焦点
         * @param {*} event
         * @return {*}
         */
        preventFocusLost (event) {
            event.preventDefault()
        },

        // 下拉选择值变化
        activityTypeChange () {
            let startTime = ''
            let endTime = ''
            if (this.selectTime) {
                startTime = this.selectTime[0]
                endTime = this.selectTime[1]
            }
            this.getSecurityList(this.currentPage, this.pagesize, this.activityType, this.searchActivity, startTime, endTime)
        },

        // 扁平化树状数据
        platFn (list) {
            let res = []
            res = list.concat(...list.map(item => {
                if (item.children instanceof Array && item.children.length > 0) {
                    return this.platFn(item.children)
                }
                return null
            }).filter(o => o instanceof Array && o.length > 0))
            return res
        },

        // 获取警员列表，生成下拉数据
        getPoliceList () {
            getPoliceList().then(res => {
@@ -1397,93 +559,6 @@
                    this.policemanOption.push({ value: `${item.id}`, label: `${item.name}` })
                })
            })
        },

        // 点击选择警员
        handlePoliceNodeClick (current) {
            if (current.hasChildren == true) return
            this.searchPoliceTreeName = current.name
            this.searchPoliceTreeId = current.id
            this.searchTreeShowFlag = false
            this.$refs.searchTreeInput.blur()
        },

        // 获取警车列表，生成下拉数据
        getCarList (params) {
            getCarList(params).then(res => {
                res.data.data.forEach(item => {
                    policecarOption.push({ value: `${item.id}`, label: `${item.serialNumber}`, carType: `${item.carType}`, serialNumber: `${item.serialNumber}`, unitCode: `${item.unitCode}`, unitName: `${item.unitName}`, carNo: `${item.carNo}`, deptName: `${item.deptName}` })
                })
            })
        },

        // 添加警车和范围
        // carId警车id, position坐标, securityIdid, type线面类型，width缓存范围，color范围颜色
        addCarAndRange (params) {
            addCarAndRange(params).then(res => {
                if (res.data.success) {
                    this.$refs.DRAWBTNBOX.addNewPolice(res.data.data, 'policecar', params.type)
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    })
                }
            })
        },

        // 添加警员
        // policemanId警车id, position坐标, securityIdid, type线面类型
        addActivityPolice (params) {
            addActivityPolice(params).then(res => {
                if (res.data.success) {
                    this.$refs.DRAWBTNBOX.addNewPolice(res.data.data, 'policeman')
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    })
                }
            })
        },

        // 转换 点 坐标数据
        convertBillboardPositionDate (data, iconName) {
            let positionStr = data.position
            positionStr = data.position.slice(6, positionStr.length - 1)
            let positionArr = positionStr.split(" ")
            let positionObj = {}
            if (iconName == 'activity') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0, url: '/img/icon/activity.png' }
            } else if (iconName == 'policeman') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/man3.png', data: data }
            } else if (iconName == 'policecar') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/car3.png', data: data }
            }
            return positionObj
        },

        // 转换 线面 坐标数据
        convertPolylineOrPolygonPositionDate (data, type) {
            let positionStr = data.slice(11, data.length - 1)
            let positionArr = positionStr.split(',')
            let positionNewArr = ''
            positionArr.forEach(item => {
                if (type == 1) {
                    positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ';'
                } else {
                    positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ',' + 0 + ';'
                }
            })
            return positionNewArr
        },

        // 树形控件选中事件
@@ -1507,10 +582,6 @@
                    }
                })
            } else {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'activeLayer',
                    type: 'VectorLayer'
                })
                e2.checkedNodes.forEach(item => {
                    if (item.id != 1 && item.id != 2 && item.id != 3 && item.id != 7 && item.id != 8 && item.id != 9 && item.lng) {
                        if (item.label == '大中型商超') {
@@ -1620,34 +691,8 @@
            }
        },

        // 关闭详情弹窗
        closeActivityDetails () {
            this.dialogVisible = false
            this.polylineBtnSwitch = false
            this.activeActivityIndex = ''
            this.$refs.VIDEOCONTROLBOX.closeVideo()
            this.currentClickIndex = ''
            arrowsListLayer.clear()

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'newCarDrawLayers',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'newDrawLayers',
                type: 'VectorLayer'
            })
            if (pointCircleManLayer != null) {
                pointCircleManLayer.clear()
            }
            if (pointCircleCarLayer != null) {
                pointCircleCarLayer.clear()
            }
        },

        // 定时查找实时警力资源
        searchRealResources (layerName) {
            console.log(`定时器[${layerName}]开启了`)
            let type = ''
            if (layerName == 'activityCarLayers') {
                type = 0
@@ -1685,267 +730,6 @@
            }
        },

        // 选择警员取消按钮
        cancel () {
            this.policeIconIsCreated = false
            this.policeChooseVisible = false
            this.policeChooseCarVisible = false
            overlayObj = {}
            this.$refs.DRAWBTNBOX.removeDraw()
        },

        // 取消保存多边形
        cancelSavePolygon () {
            this.polygonAddVisible = false
            this.$refs.DRAWBTNBOX.removeDrawArrow()
        },

        // 选择警员关闭
        policeChooseBeforeClose () {
            this.policeChooseVisible = false
            this.policeIconIsCreated = false
            this.$refs.DRAWBTNBOX.removeDraw()
        },

        // 选择警车关闭
        policeChooseCarBeforeClose () {
            this.policeChooseCarVisible = false
            this.policeIconIsCreated = false
            this.$refs.DRAWBTNBOX.removeDraw()
        },

        // 选择警员确认按钮
        determine () {
            if (!this.policeIconIsCreated) {
                let type = ''
                let position = ''
                if (overlayObj.drawType == 'billboard') {
                    type = 3
                    position = overlayObj._position._lng + ' ' + overlayObj._position._lat
                } else if (overlayObj.drawType == 'polyline') {
                    type = 1
                    overlayObj._positions.forEach(item => {
                        position += item._lng + ' ' + item._lat + ','
                    })
                    position = position.slice(0, position.length - 1)
                } else if (overlayObj.drawType == 'polygon') {
                    type = 2
                    overlayObj._positions.forEach(item => {
                        position += item._lng + ' ' + item._lat + ','
                    })
                    position += overlayObj._positions[0]._lng + ' ' + overlayObj._positions[0]._lat + ','
                    position = position.slice(0, position.length - 1)
                }
                if (this.policeChooseCarVisible == true) {
                    if (this.policeType == '') {
                        this.$message({
                            message: '请选择警车',
                            type: 'warning'
                        })
                    } else if (!(/(^[1-9]\d*$)/.test(Number(this.pointAreaWidth)))) {
                        this.$message({
                            message: '范围必须为正整数',
                            type: 'warning'
                        })
                    } else {
                        this.policeChooseCarVisible = false
                        this.addCarAndRange({
                            carId: this.policeType,
                            position: position,
                            securityId: this.showingSecurityId,
                            type: type,
                            color: this.chooseCarColor,
                            width: this.pointAreaWidth
                        })
                        this.policeIconIsCreated = false
                    }

                } else if (this.policeChooseVisible == true) {
                    if (this.searchPoliceTreeId == '') {
                        this.$message({
                            message: '请选择警员',
                            type: 'warning'
                        })
                    } else if (!(/(^[1-9]\d*$)/.test(Number(this.pointAreaWidth)))) {
                        this.$message({
                            message: '范围必须为正整数',
                            type: 'warning'
                        })
                    } else {
                        this.policeChooseVisible = false
                        this.addActivityPolice({ policemanId: this.searchPoliceTreeId, position: position, securityId: this.showingSecurityId, type: type, color: this.choosePoliceColor, width: this.pointAreaWidth })
                        this.policeIconIsCreated = false
                    }
                }
            } else {
                if (this.policeChooseVisible == true) {
                    if (this.searchPoliceTreeId == '' || this.searchPoliceTreeName == '') {
                        this.$message({
                            message: '请在列表中选择警员',
                            type: 'warning'
                        })
                    } else if (!(/(^[1-9]\d*$)/.test(Number(this.pointAreaWidth)))) {
                        this.$message({
                            message: '范围必须为正整数',
                            type: 'warning'
                        })
                    } else {
                        this.$refs.DRAWBTNBOX.updateActivityPolice({ id: this.policeIconId, policemanId: this.searchPoliceTreeId, color: this.choosePoliceColor, width: this.pointAreaWidth }, policeOverlayData.overlay)
                        this.policeChooseVisible = false
                    }
                } else if (this.policeChooseCarVisible == true) {
                    if (this.policeType == '') {
                        this.$message({
                            message: '请选择警车',
                            type: 'warning'
                        })
                    } else if (!(/(^[1-9]\d*$)/.test(Number(this.pointAreaWidth)))) {
                        this.$message({
                            message: '范围必须为正整数',
                            type: 'warning'
                        })
                    } else {
                        this.$refs.DRAWBTNBOX.updateActivityCar({ id: this.policeIconId, carId: this.policeType, color: this.chooseCarColor, width: this.pointAreaWidth }, policeOverlayData.overlay)
                        this.policeChooseCarVisible = false
                    }
                }
                this.policeIconIsCreated = false
            }
        },

        drawLabel (status) {
            drawLabelStatus = status
        },

        // 地图绘制元素点击事件
        overlayTypeClick (e) {
            if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
                this.isChoosePoliceElementDisabled = false
            } else {
                this.isChoosePoliceElementDisabled = true
            }

            policeOverlayData = e

            if ('policemanId' in e.overlay.attrParams.data) {
                this.policeIconId = e.overlay.attrParams.data.id
                this.policeType = e.overlay.attrParams.data.policemanId
                this.pointAreaWidth = e.overlay.attrParams.data.width != '-1' ? e.overlay.attrParams.data.width : 100
                this.choosePoliceColor = e.overlay.attrParams.data.color != '' ? e.overlay.attrParams.data.color : '#FF0000'
                let choosePoliceName = this.platFn(this.policeTreeData).find(item => item.id == e.overlay.attrParams.data.policemanId).name
                this.searchPoliceTreeId = e.overlay.attrParams.data.policemanId
                this.searchPoliceTreeName = choosePoliceName
                this.policeIconIsCreated = true
                this.policeChooseVisible = true
            } else if ('carId' in e.overlay.attrParams.data) {
                this.policeOption = policecarOption
                this.policeIconId = e.overlay.attrParams.data.id
                this.policeType = e.overlay.attrParams.data.carId
                this.pointAreaWidth = e.overlay.attrParams.data.width != '-1' ? e.overlay.attrParams.data.width : 100
                this.chooseCarColor = e.overlay.attrParams.data.color != '' ? e.overlay.attrParams.data.color : '#FF0000'
                this.policeIconIsCreated = true
                this.policeChooseCarVisible = true
            }
        },

        // 取消保存巡逻路线
        cancelSaveLine () {
            this.lineEditVisible = false

            this.$refs.DRAWBTNBOX.removeDraw()
        },

        // 巡逻路线面点击事件
        lineOverlayTypeClick (e) {
            this.$refs.VIDEOCONTROLBOX.closeVideo()

            this.lineWidth = e.overlay.attrParams.width != -1 ? e.overlay.attrParams.width : 100
            this.chooseColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#1CA085'
            this.policeIconId = e.overlay.attrParams.id

            policeOverlayData = e

            curLinePosition = e.overlay.attrParams.linePositionStr
            curLinePolygonPosition = e.overlay.attrParams.polygonPositionStr

            if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
                this.lineEditTitle = '修改巡逻路线'
                this.isLineEdit = true
                this.lineEditVisible = true
            } else {
                this.lineEditVisible = false
            }
        },

        // 保存标绘箭头
        // securityIdid, position坐标, type标绘类型, name多边形名称,color标绘颜色,aera_type多边形类型
        addSecurityPlot (params) {
            addSecurityPlot(params).then(res => {
                if (res.data.success) {
                    this.$refs.DRAWBTNBOX.addNewPlot(res.data.data)
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '保存失败',
                        type: 'error'
                    })
                }
            })
        },

        // 双击修改箭头
        reeditArrowDbClick (e) {
            if (e.overlay.attrParams.item.type == 5) {
                let polygonNewPositions = []
                e.overlay.positions.forEach((item, index) => {
                    if (index % 2 == 0) {
                        polygonNewPositions.push(item)
                    }
                })
                e.overlay.positions = polygonNewPositions
            }
            this.$refs.DRAWBTNBOX.plotEdit(e.overlay, 'arrow')
        },

        // 单击。标绘箭头
        reeditArrowClick (e) {
            if (drawLabelStatus == 'start') {
                this.$refs.DRAWBTNBOX.overlayClickPosition(e)
            } else {
                plotOverlayData = e
                this.choosePlotColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color.slice(0, 7) : '#409EFF'
                this.choosePlotColorAlpha = e.overlay.attrParams.color != '' ? Number(e.overlay.attrParams.color.split(',')[1]) : 100

                if (e.overlay.attrParams.item.type == 5) {
                    this.polygonAreaType = e.overlay.attrParams.item.areaType != '' ? e.overlay.attrParams.item.areaType : 1
                    this.isNeedPolygonType = true
                } else {
                    this.isNeedPolygonType = false
                }

                // this.polygonName = e.overlay.attrParams.name
                if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) {
                    this.plotId = e.overlay.attrParams.id
                    this.editPlotVisible = true
                }
            }
        },

        // 编辑标绘
        editPlot () {
            this.editPlotVisible = false
            this.reeditArrowDbClick(plotOverlayData)
        },

        // 保存标绘修改
        savePlot () {
            this.$refs.DRAWBTNBOX.updateSecurityPlot({ id: plotOverlayData.overlay.attrParams.id, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha }, plotOverlayData.overlay)
            this.editPlotVisible = false
        },

        // 搜索数据地图对应场所
        getSearchInfo (deptId, search, iconType) {
            getSearchInfo(deptId, search).then(res => {
@@ -1966,49 +750,6 @@
                    })
                })
            })
        },

        // 保存巡逻路线信息
        saveLineInfo () {
            this.$refs.DRAWBTNBOX.updateActivityCar({ id: this.policeIconId, color: this.chooseColor, width: this.lineWidth }, policeOverlayData.overlay)
            this.lineEditVisible = false
        },

        // 新增巡逻路线信息
        addLineInfo () {
            this.addCarAndRange({
                position: this.addLinePosition,
                securityId: this.showingSecurityId,
                type: 1,
                color: this.chooseColor,
                width: this.lineWidth
            })
            this.lineEditVisible = false
        },

        // 修改巡逻路线位置信息
        editLineInfo () {
            this.lineEditVisible = false
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'newCarDrawLineLayers',
                type: 'VectorLayer'
            })

            this.$refs.DRAWBTNBOX.plotEdit(policeOverlayData.overlay, 'line')
        },

        // 保存绘制区域
        savePolygonInfo () {
            let positionStr = ''
            if (this.plotSaveType >= 1 && this.plotSaveType <= 4) {
                positionStr = this.arrowPositionStr
            } else if (this.plotSaveType == 5) {
                positionStr = this.polygonPositionStr
            } else if (this.plotSaveType == 6 || this.plotSaveType == 7 || this.plotSaveType == 8) {
                positionStr = this.plotPointPositionStr + ',' + this.plotPointPositionStr
            }
            this.addSecurityPlot({ securityId: this.showingSecurityId, position: positionStr, type: this.plotSaveType, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha, areaType: this.polygonAreaType })
            this.polygonAddVisible = false
        },

        // 获取面的中心点
@@ -2035,95 +776,6 @@
            let center = this.$turf.centroid(polygon)

            return [center.geometry.coordinates[0], center.geometry.coordinates[1]]
        },

        // 删除警车
        deleteActivityCar (id, type) {
            deleteActivityCar(id).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    policeOverlayData.overlay.remove()
                    if (type == 'car' && 'pointOverlayData' in policeOverlayData.overlay.attrParams) {
                        policeOverlayData.overlay.attrParams.pointOverlayData.remove()
                    }
                    if (type == 'line' && 'lineObj' in policeOverlayData.overlay.attrParams) {
                        policeOverlayData.overlay.attrParams.lineObj.remove()
                    }
                } else {
                    this.$message({
                        message: '删除失败',
                        type: 'error'
                    })
                }
            })
        },

        // 删除警员
        deleteActivityPolice (id) {
            deleteActivityPolice(id).then(res => {
                if (res.data.success) {
                    policeOverlayData.overlay.remove()
                    if ('pointOverlayData' in policeOverlayData.overlay.attrParams) {
                        policeOverlayData.overlay.attrParams.pointOverlayData.remove()
                    }
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '删除失败',
                        type: 'error'
                    })
                }
            })
        },

        // 点击删除
        deletePoliceElement () {
            if (this.policeChooseVisible == true) {
                this.deleteActivityPolice(this.policeIconId)
                this.policeChooseVisible = false
            } else if (this.policeChooseCarVisible == true) {
                this.deleteActivityCar(this.policeIconId, 'car')
                this.policeChooseCarVisible = false
            }
        },

        // 删除巡逻路线
        deleteLine () {
            this.deleteActivityCar(this.policeIconId, 'line')
            this.lineEditVisible = false
        },

        // 删除标绘接口
        deleteSecurityPlot (id) {
            deleteSecurityPlot(id).then(res => {
                if (res.data.success) {
                    plotOverlayData != null && plotOverlayData.overlay != null && plotOverlayData.overlay.remove()
                    if (plotOverlayData != null && plotOverlayData.overlay != null && 'pointOverlayData' in plotOverlayData.overlay.attrParams) {
                        plotOverlayData.overlay.attrParams.pointOverlayData.remove()
                    }
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '删除失败',
                        type: 'error'
                    })
                }
            })
        },

        // 删除标绘
        deletePlot () {
            this.deleteSecurityPlot(this.plotId)
            this.editPlotVisible = false
        },

        // 获取设备列表
@@ -2160,88 +812,47 @@
            })
        },

        // 过滤警员搜索框
        filterPoliceNode (value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },

        // 鼠标移入图标事件
        pointMouseOver (e) {
            this.$store.commit('SET_ACTIVITYPOLICEPOPUP', true)
            let hoverData = {}
            if ('carId' in e.overlay.attrParams.data) {
                hoverData = policecarOption.filter(item => item.value == e.overlay.attrParams.data.carId)[0]
                hoverData.policeData = { 'name': 'none' }
                hoverData.policeStationName = 'none'
            } else {
                let policeArr = this.filterTree(this.policeTreeData)
                hoverData.policeData = policeArr.filter(item => item.id == e.overlay.attrParams.data.policemanId)[0]
                hoverData.policeStationName = policeArr.filter(item => item.id == policeArr.filter(item => item.id == e.overlay.attrParams.data.policemanId)[0].parentId)[0].name
                hoverData.carType = 'none'
                hoverData.label = 'none'
        // 转换 点 坐标数据
        convertBillboardPositionDate (data, iconName) {
            let positionStr = data.position
            positionStr = data.position.slice(6, positionStr.length - 1)
            let positionArr = positionStr.split(" ")
            let positionObj = {}
            if (iconName == 'activity') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0, url: '/img/icon/activity.png' }
            } else if (iconName == 'policeman') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/man3.png', data: data }
            } else if (iconName == 'policecar') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/car3.png', data: data }
            }
            this.$store.commit('SET_ACTIVITYPOLICEPOPUPDATA', hoverData)
            return positionObj
        },

            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'ActivityPoliceDomBox',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(e.overlay.attrParams.lng),
                            Number(e.overlay.attrParams.lat),
                            0
                        )
                    )
                ]
        // 转换 线面 坐标数据
        convertPolylineOrPolygonPositionDate (data, type) {
            let positionStr = data.slice(11, data.length - 1)
            let positionArr = positionStr.split(',')
            let positionNewArr = ''
            positionArr.forEach(item => {
                if (type == 1) {
                    positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ';'
                } else {
                    positionNewArr += item.split(' ')[0] + ',' + item.split(' ')[1] + ',' + 0 + ';'
                }
            })
            return positionNewArr
        },

        /**
         * @description: 鼠标移出事件
         * @param {*} e
         * @return {*}
         */
        pointMouseOut (e) {
            this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
        },

        // 树形数据传数组
        filterTree (tree, arr = []) {
            if (!tree.length) return []
            arr.push(...tree)
            for (let item of tree) {
                if (item.children && item.children.length) {
                    this.filterTree(item.children, arr)
        cleartAllTimer () {
            if (realPoliceTimer != {}) {
                for (let item in realPoliceTimer) {
                    clearInterval(realPoliceTimer[item])
                }
            }
            return arr
        },

        // 计算透明度值
        formatTooltip (val) {
            return val / 100
        },

        // 获取标绘图层覆盖物
        getArrowsListLayerOverlayList () {
            return arrowsListLayer.getOverlays()
        },

    },

    computed: {
        isHavePolice () {
            return this.isHavePoliceCar || this.isHavePoliceMan
        }

    },

    watch: {
        // searchPoliceTreeName (val) {
        //     this.$refs.policeTree.filter(val)
        // },

        policeChooseVisible (val) {
            if (val) {
                this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
@@ -2252,24 +863,20 @@
            if (val) {
                this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
            }
        },

        searchActivity (val) {
            this.currentPage = 1
            this.getSecurityList(this.currentPage, this.pagesize, this.searchActivity)
        }
    },

    beforeDestroy () {
        // 清除定时器
        if (realPoliceTimer != {}) {
            for (let item in realPoliceTimer) {
                clearInterval(realPoliceTimer[item])
            }
        }
        this.cleartAllTimer()
    },

    destroyed () {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'activeLayer',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'activityLayers',
            type: 'VectorLayer'
@@ -2278,25 +885,6 @@
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'activeHeatLayer',
            type: 'HeatLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'newDrawLayers',
            type: 'VectorLayer'
        })
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'newCarDrawLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'newCarDrawLineLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'polygonWallLayer',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
@@ -2328,20 +916,7 @@
            type: 'VectorLayer'
        })

        arrowsListLayer.remove()
        arrowsListLayer = null

        lineLayer.remove()
        lineLayer = null

        pointCircleManLayer.remove()
        pointCircleManLayer = null

        pointCircleCarLayer.remove()
        pointCircleCarLayer = null

        polylineAreaLayer.remove()
        polylineAreaLayer = null
        global.viewer.scene.globe.depthTestAgainstTerrain = false

        this.$parent.$parent.resize('0px')
    }
@@ -2559,35 +1134,6 @@
        left: 10px;
    }

    .plan-control {
        position: fixed;
        top: 150px;
        right: 450px;
        width: 180px;
        padding: 10px;
        color: #fff;
        background-color: $bg-color;
        border-radius: 8px;
        z-index: 98;

        .row-box {
            width: 100%;
            line-height: 28px;
            display: flex;

            &>div {
                text-align: left;
            }

            .category {
                width: 96px;
            }

            .category-value {
                flex: 1;
            }
        }
    }


    .item-new-width {

 src/views/home/components/rightContainer.vue

@@ -6,10 +6,10 @@
                    <div>值班信息(当日)</div>
                </div>

                <div class="table-box">
                <div class="table-box" v-show="!showMJL">
                    <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', borderColor: '#324e75' }"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="dept" label="值班单位"></el-table-column>
                        <el-table-column prop="person" label="姓名"></el-table-column>
@@ -18,10 +18,23 @@
                    <div class="pointList">
                        <el-tooltip class="item" effect="dark" :content="item.dept" placement="top"
                            v-for="(item, index) in schedulingDeptList" :key="index">
                            <div class="point" @click="getSchedlingList(item)">
                            </div>
                            <div class="point" @click="getSchedlingList(item)"></div>
                        </el-tooltip>
                    </div>
                </div>

                <div class="table-box" v-show="showMJL">
                    <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%"
                        :show-header="false" :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center', borderColor: '#324e75' }"
                        :row-class-name="tableRowClassName">
                        <el-table-column :show-overflow-tooltip="true" v-for="(item, index) in transTitle" :label="item"
                            :key="index" align="center">
                            <template slot-scope="scope">
                                {{ scope.row[index] }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

@@ -93,7 +106,7 @@
                        <span :class="{ choosed: linetype == 1 }" @click="initEquipmentEcharts(1)">设备状态</span>
                    </div>
                </div>
                <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
                <div style="overflow: hidden" id="EquipmentEcharts" class="echarts-box"></div>
            </div>

            <svg class="border-svg">
@@ -106,10 +119,20 @@
        </div>
    </div>
</template>

 
<script>
const oneColor = ['#4caf50', '#2979ff', '#ffd600', '#0d47a1', '#b71c1c']
const twoColor = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
const oneColor = ["#4caf50", "#2979ff", "#ffd600", "#0d47a1", "#b71c1c"]
const twoColor = [
    "#5470FE",
    "#91cc75",
    "#fac858",
    "#ee6666",
    "#73c0de",
    "#3ba272",
    "#fc8452",
    "#9a60b4",
    "#ea7ccc",
]

let rightTiming = null
let equipmentmyChart = null
@@ -117,52 +140,59 @@
let timer
let equimentDataLength = 0

import recorderArr from '@/assets/data/equimentsDate/recorder.js'
import { getSchedulingList, getSchedulingDeptList } from '@/api/home/index.js'
import { fontSize } from '@/utils/fontSize.js'
import recorderArr from "@/assets/data/equimentsDate/recorder.js"
import { getSchedulingList, getSchedulingDeptList } from "@/api/home/index.js"
import { fontSize } from "@/utils/fontSize.js"

import { getCaseAll, getEquipment } from "@/api/home/index.js"

const timeEvents = []

export default {
    inject: ['userInfo'],
    inject: ["userInfo"],
    data () {
        return {
            eventTime: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }]
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit("pick", [start, end])
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit("pick", [start, end])
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                            picker.$emit("pick", [start, end])
                        },
                    },
                ],
            },
            regionTotal: 0,
            linetype: 0,
            tableHeight: 0,
            schedulingList: [],
            schedulingDeptList: [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6],
            policeStaionID: '',
            policeStaionID: "",
            showMJL: false,
            originTitle: ['值班人员', '副班、巡逻人员'],
            transTitle: ['', '人员', '人员'],
        }
    },

@@ -171,9 +201,9 @@
            ...this.pickerOptions,
            disabledDate (time) {
                // 设置可选择的日期为今天之后的一个月内
                let curDate = (new Date()).getTime()
                let curDate = new Date().getTime()
                return time.getTime() > curDate
            }
            },
        }

        this.defaultDate()
@@ -184,20 +214,23 @@
    },

    mounted () {

        this.getHomeAllData()

        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
            this.tableHeight = this.$refs.Container.offsetHeight - this.$refs.caseBox.offsetHeight - this.$refs.crowdBox.offsetHeight - this.$refs.alertBoxTitle.offsetHeight - 86
            this.tableHeight =
                this.$refs.Container.offsetHeight -
                this.$refs.caseBox.offsetHeight -
                this.$refs.crowdBox.offsetHeight -
                this.$refs.alertBoxTitle.offsetHeight -
                86
        })

    },

    methods: {
        //获取值班列表信息
        getSchedlingList (item) {
            this.$emit('showschedulingdetail', item.dept, item.dept, 'type')
            this.$emit("showschedulingdetail", item.dept, item.dept, "type")
        },
        //获取值班单位信息
        getSchedulingDeptList () {
@@ -216,7 +249,7 @@
         * @description: 获取当前组件内所有数据
         * @return {*}
         */
        getHomeAllData (id = '') {
        getHomeAllData (id = "") {
            this.policeStaionID = id

            this.initEventChangeEcharts()
@@ -229,35 +262,85 @@
            }

            rightTiming = setInterval(async () => {

                this.initEquipmentEcharts(this.linetype)

            }, 600000)
        },

        getSchedulingList () {
            const params = {
                sameday: 1
            console.log(this.userInfo, 456)
            if (this.userInfo.dept_id == "1596020515064381442") {
                const data = [
                    {
                        person:
                            "徐星逸、任圣日、娄永攀、蔡善龙、陈小强、梅祥、吕镇、刘开勇、付建冬",
                        patrol: "章正椿，夏文翔，叶江明，黄俊龙，苏茯林，王顺祥",
                    },
                    {
                        person:
                            "矢裕忠、戴饶平、余传公、杨敏、苏浩男、周安云、蒋丁岩、陈圣俊、雷智荐",
                        patrol: "潘林彬，刘志祥，李志强，杨俊浩，黄天行，叶子淳",
                    },
                    {
                        person:
                            "齐光华、周静、吕来城、周骏、邓道群、沈强、王岳、魏霄峰、夏添、李道福",
                        patrol: "余梦宝，徐宝盛，李仁豪，付涵，周林，王宗强",
                    },
                ]

                const matrixData = data.map((row) => {
                    let arr = []
                    for (let key in row) {
                        arr.push(row[key])
                    }
                    return arr
                })

                this.schedulingList = matrixData[0].map((col, i) => {
                    return [this.originTitle[i], ...matrixData.map((row) => {
                        return row[i]
                    })]
                })


                this.$nextTick(() => {
                    this.tableHeight =
                        this.$refs.Container.offsetHeight -
                        this.$refs.caseBox.offsetHeight -
                        this.$refs.crowdBox.offsetHeight -
                        this.$refs.alertBoxTitle.offsetHeight
                })

                this.showMJL = true
            } else {
                const params = {
                    sameday: 1,
                }

                this.showMJL = false
                getSchedulingList(1, 100, params).then((res) => {
                    this.schedulingList = res.data.data.records
                })
            }
            getSchedulingList(1, 100, params).then(res => {
                this.schedulingList = res.data.data.records
            })
        },

        echartsResize () {
            equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
            eventchangemychart && eventchangemychart != null && eventchangemychart.resize()
            eventchangemychart &&
                eventchangemychart != null &&
                eventchangemychart.resize()
        },

        // 案件统计中时间变化
        async caseTimeChange (e) {
            const date = e.map(item => {
            const date = e.map((item) => {
                return this.dateFormat(item)
            })

            eventchangemychart.clear()
            const optionsData = await this.getCaseAll(date[0], date[1])
            eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yData))
            eventchangemychart.setOption(
                this.initEventChangeOption(optionsData.xData, optionsData.yData)
            )
        },

        // 设置默认时间
@@ -274,22 +357,29 @@
            var date = new Date(dateData)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? ('0' + m) : m
            m = m < 10 ? "0" + m : m
            var d = date.getDate()
            d = d < 10 ? ('0' + d) : d
            const time = y + '-' + m + '-' + d
            d = d < 10 ? "0" + d : d
            const time = y + "-" + m + "-" + d
            return time
        },

        // 获取案件统计值
        getCaseAll (start, end) {
            const caseAll = getCaseAll(start, end, this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => {
            const caseAll = getCaseAll(
                start,
                end,
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                if (res.data.length > 0) {
                    return res.data.reduce((previous, current) => {
                        previous.xData.push(current.days)
                        previous.yData.push(current.cout)
                        return previous
                    }, { xData: [], yData: [] })
                    return res.data.reduce(
                        (previous, current) => {
                            previous.xData.push(current.days)
                            previous.yData.push(current.cout)
                            return previous
                        },
                        { xData: [], yData: [] }
                    )
                } else {
                    return { xData: [], yData: [] }
                }
@@ -300,78 +390,87 @@

        // 初始化案件统计
        async initEventChangeEcharts () {
            var chartDom = document.getElementById('EventChangeEcharts')
            var chartDom = document.getElementById("EventChangeEcharts")

            if (eventchangemychart != null && eventchangemychart != '' && eventchangemychart != undefined) eventchangemychart.dispose()
            if (
                eventchangemychart != null &&
                eventchangemychart != "" &&
                eventchangemychart != undefined
            )
                eventchangemychart.dispose()

            eventchangemychart = this.$echarts.init(chartDom)

            const date = this.eventTime.map(item => {
            const date = this.eventTime.map((item) => {
                return this.dateFormat(item)
            })

            const optionsData = await this.getCaseAll(date[0], date[1])

            eventchangemychart.setOption(this.initEventChangeOption(optionsData.xData, optionsData.yData))
            eventchangemychart.setOption(
                this.initEventChangeOption(optionsData.xData, optionsData.yData)
            )
        },

        // 案件统计的options
        initEventChangeOption (xData, yData) {
            let option
            if (xData.length == 0) {  //暂无数据
            if (xData.length == 0) {
                //暂无数据
                option = {
                    title: {
                        text: '暂无数据',
                        x: 'center',
                        y: 'center',
                        text: "暂无数据",
                        x: "center",
                        y: "center",
                        textStyle: {
                            color: "#fff",
                            fontSize: fontSize(14),
                            fontWeight: 'normal',
                        }
                    }
                            fontWeight: "normal",
                        },
                    },
                }
            } else {
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>'
                        trigger: "item",
                        formatter:
                            ' <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> {b0}<strong style="margin-left:10px;color:#5c7bd9">{c0}起</strong>',
                    },
                    xAxis: {
                        type: 'category',
                        type: "category",
                        data: xData,
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(14)
                            fontSize: fontSize(14),
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        }
                                color: "#fff",
                            },
                        },
                    },
                    yAxis: {
                        type: 'value',
                        type: "value",

                        minInterval: 1,

                        splitLine: {
                            show: false
                            show: false,
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(14)
                            fontSize: fontSize(14),
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        }
                                color: "#fff",
                            },
                        },
                    },
                    series: [
                        {
                            data: yData,
                            type: 'line',
                            type: "line",
                            smooth: true,
                            areaStyle: {
                                normal: {
@@ -385,33 +484,33 @@
                                            {
                                                //波形图渐变色样式
                                                offset: 0,
                                                color: "rgba(3, 108, 255, 0.7)"
                                                color: "rgba(3, 108, 255, 0.7)",
                                            },
                                            {
                                                offset: 0.8,
                                                color: "rgba(3, 108, 255, 0.1)"
                                            }
                                                color: "rgba(3, 108, 255, 0.1)",
                                            },
                                        ],
                                        false
                                    )
                                }
                                    ),
                                },
                            },
                            itemStyle: {
                                normal: {
                                    color: 'red', //改变折线点的颜色
                                    color: "red", //改变折线点的颜色
                                    lineStyle: {
                                        color: 'rgba(3, 108, 255, 1)' //改变折线颜色
                                    }
                                }
                            }
                        }
                                        color: "rgba(3, 108, 255, 1)", //改变折线颜色
                                    },
                                },
                            },
                        },
                    ],
                    grid: {
                        top: '4%',
                        left: '3%',
                        right: '2%',
                        bottom: '4%',
                        containLabel: true
                        top: "4%",
                        left: "3%",
                        right: "2%",
                        bottom: "4%",
                        containLabel: true,
                    },
                }
            }
@@ -422,27 +521,27 @@
        // 现有设备统计
        getEquipment () {
            const typeData = {
                carCount: '车辆',
                monitorCount: '摄像头',
                phoneCount: '执法记录仪',
                recorderCount: '手台',
                carCount: "车辆",
                monitorCount: "摄像头",
                phoneCount: "执法记录仪",
                recorderCount: "手台",
            }

            const typeIndexData = {
                '车辆': 0,
                '摄像头': 1,
                '手台': 2,
                '执法记录仪': 3,
                车辆: 0,
                摄像头: 1,
                手台: 2,
                执法记录仪: 3,
            }

            let data = []
            this.regionTotal = 0

            const dataAll = getEquipment(this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id).then(res => {

            const dataAll = getEquipment(
                this.policeStaionID != "" ? this.policeStaionID : this.userInfo.dept_id
            ).then((res) => {
                if (this.linetype == 0) {
                    data = res.data.map((item, index) => {

                        this.regionTotal += item.count

                        return {
@@ -451,7 +550,7 @@
                            value: Number(item.count),
                            working: Number(item.online),
                            fault: Number(item.offline),
                            label: twoColor[index]
                            label: twoColor[index],
                        }
                    })

@@ -459,10 +558,22 @@

                    return data
                } else {
                    let normalData = { value: 0, name: '在线', color: '#4caf50', online: true, label: { color: oneColor[0] } }
                    let faultData = { value: 0, name: '离线', color: '#ffd600', online: false, label: { color: oneColor[2] } }
                    let normalData = {
                        value: 0,
                        name: "在线",
                        color: "#4caf50",
                        online: true,
                        label: { color: oneColor[0] },
                    }
                    let faultData = {
                        value: 0,
                        name: "离线",
                        color: "#ffd600",
                        online: false,
                        label: { color: oneColor[2] },
                    }

                    res.data.forEach(item => {
                    res.data.forEach((item) => {
                        this.regionTotal = Number(this.regionTotal) + Number(item.count)

                        normalData.value = Number(normalData.value) + Number(item.online)
@@ -483,7 +594,6 @@

                    return data
                }

            })

            return dataAll
@@ -493,17 +603,21 @@
        async initEquipmentEcharts (type) {
            this.linetype = type

            if (equipmentmyChart != null && equipmentmyChart != '' && equipmentmyChart != undefined) {
            if (
                equipmentmyChart != null &&
                equipmentmyChart != "" &&
                equipmentmyChart != undefined
            ) {
                equipmentmyChart.dispose()
                equipmentmyChart.off('click')
                equipmentmyChart.off("click")
            }

            var chartDom = document.getElementById('EquipmentEcharts')
            var chartDom = document.getElementById("EquipmentEcharts")
            equipmentmyChart = this.$echarts.init(chartDom)

            const data = await this.getEquipment()

            const newData = data.filter(item => {
            const newData = data.filter((item) => {
                if (item.value != 0) {
                    return item
                }
@@ -517,8 +631,8 @@
                this.equipmentEchartsCarousel()
            } else {
                clearInterval(timer)
                equipmentmyChart.off('mouseover')
                equipmentmyChart.off('mouseout')
                equipmentmyChart.off("mouseover")
                equipmentmyChart.off("mouseout")
            }
        },

@@ -526,12 +640,17 @@
        initEquipmentOptions (dataArr) {
            return {
                tooltip: {
                    trigger: 'item',
                    trigger: "item",
                    confine: true,
                    formatter: function (params) {
                        let tipHtml = ``

                        if ('carCount' in params.data || 'monitorCount' in params.data || 'phoneCount' in params.data || 'recorderCount' in params.data) {
                        if (
                            "carCount" in params.data ||
                            "monitorCount" in params.data ||
                            "phoneCount" in params.data ||
                            "recorderCount" in params.data
                        ) {
                            tipHtml = `
                            ${params.marker} 
                            <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong>
@@ -548,21 +667,28 @@
                            `
                        } else {
                            tipHtml = `${params.marker} 
                            <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong>
                            <strong style="color: ${params.color}">${params.data.name
                                } ${params.data.value}台</strong>
                            <br />
                            <span style="color:#4caf50">在线：${params.data.working}台</span>
                            <span style="color:#4caf50">在线：${params.data.working
                                }台</span>
                            <br />
                            <span style="color:#ccc">离线：${params.data.fault}台</span>
                            <span style="color:#ccc">离线：${params.data.fault
                                }台</span>
                            <br />
                            <span style="margin-left:10px;color:#ccc">设备离线率：${Math.floor(params.data.fault / (params.data.working + params.data.fault) * 100)}%</span><br />`
                            <span style="margin-left:10px;color:#ccc">设备离线率：${Math.floor(
                                    (params.data.fault /
                                        (params.data.working + params.data.fault)) *
                                    100
                                )}%</span><br />`
                        }
                        return tipHtml
                    },
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
                    borderColor: 'rgba(8, 56, 185, 0.9)',
                    backgroundColor: "rgba(8, 56, 185, 0.9)",
                    borderColor: "rgba(8, 56, 185, 0.9)",
                    textStyle: {
                        fontSize: fontSize(14)
                    }
                        fontSize: fontSize(14),
                    },
                },
                graphic: {
                    type: "text",
@@ -574,8 +700,8 @@
                        textAlign: "center",
                        fill: "#fff",
                        fontSize: fontSize(18),
                        fontWeight: 700
                    }
                        fontWeight: 700,
                    },
                },
                title: {
                    text: `${this.regionTotal}`,
@@ -585,59 +711,79 @@
                        color: "#27D9C8",
                        fontSize: fontSize(20),
                        fontWeight: 700,
                        align: "center"
                    }
                        align: "center",
                    },
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['90%', '136%'],
                        top: 'middle',
                        left: 'center',
                        name: "",
                        type: "pie",
                        radius: ["90%", "136%"],
                        top: "middle",
                        left: "center",
                        data: dataArr,
                        avoidLabelOverlap: false,
                        labelLine: {
                            normal: {
                                length: fontSize(15),
                                lineStyle: {
                                    width: fontSize(3)
                                }
                            }
                                    width: fontSize(3),
                                },
                            },
                        },
                        emphasis: {
                            label: {
                                color: 'red',
                                fontSize: fontSize(16)
                            }
                                color: "red",
                                fontSize: fontSize(16),
                            },
                        },
                        label: {
                            color: function (params) {
                                let colorList = []
                                if ('carCount' in params.data) {
                                    colorList = ['#4caf50', '#787878', '#fac858', '#d766ee',]
                                if ("carCount" in params.data) {
                                    colorList = ["#4caf50", "#787878", "#fac858", "#d766ee"]
                                } else {
                                    colorList = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                                    colorList = [
                                        "#5470FE",
                                        "#91cc75",
                                        "#fac858",
                                        "#ee6666",
                                        "#73c0de",
                                        "#3ba272",
                                        "#fc8452",
                                        "#9a60b4",
                                        "#ea7ccc",
                                    ]
                                }
                                return colorList[params.dataIndex]
                            },
                            fontSize: fontSize(16)
                            fontSize: fontSize(16),
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    let colorList = []
                                    if ('carCount' in params.data) {
                                        colorList = ['#4caf50', '#787878', '#fac858', '#d766ee',]
                                    if ("carCount" in params.data) {
                                        colorList = ["#4caf50", "#787878", "#fac858", "#d766ee"]
                                    } else {
                                        colorList = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                                        colorList = [
                                            "#5470FE",
                                            "#91cc75",
                                            "#fac858",
                                            "#ee6666",
                                            "#73c0de",
                                            "#3ba272",
                                            "#fc8452",
                                            "#9a60b4",
                                            "#ea7ccc",
                                        ]
                                    }
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
                                },
                            },
                        },
                    },
                ],
            }
        },

@@ -649,38 +795,50 @@
            }

            timer = setInterval(() => {
                equipmentmyChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
                equipmentmyChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
                curIndex = (curIndex + 1) % equimentDataLength
                equipmentmyChart.dispatchAction({
                    type: 'highlight', seriesIndex: 0, dataIndex: curIndex
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: curIndex,
                })
            }, 1000)

            equipmentmyChart.on('mouseover', function (param) {
            equipmentmyChart.on("mouseover", function (param) {
                clearInterval(timer)
                equipmentmyChart.dispatchAction({
                    type: 'downplay',
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: curIndex
                    dataIndex: curIndex,
                })
                equipmentmyChart.dispatchAction({
                    type: 'highlight',
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: param.dataIndex
                    dataIndex: param.dataIndex,
                })
                curIndex = param.dataIndex
            })

            equipmentmyChart.on('mouseout', function (param) {
            equipmentmyChart.on("mouseout", function (param) {
                curIndex = param.dataIndex
                if (timer) {
                    clearInterval(timer)
                }
                timer = setInterval(() => {
                    equipmentmyChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
                    equipmentmyChart.dispatchAction({
                        type: "downplay",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                    curIndex = (curIndex + 1) % equimentDataLength
                    equipmentmyChart.dispatchAction({
                        type: 'highlight', seriesIndex: 0, dataIndex: curIndex
                        type: "highlight",
                        seriesIndex: 0,
                        dataIndex: curIndex,
                    })
                }, 1000)
            })
@@ -688,12 +846,22 @@

        // 现有设备的点击事件（显示弹窗表格）
        clickEquimentChart () {
            equipmentmyChart.on('click', params => {
            equipmentmyChart.on("click", (params) => {
                // 设备类型，摄像头弹窗显示，其他弹窗显示，【记录仪列显示，警车列显示，手台列显示】，遍历数组
                if ('equimentType' in params.data) {
                    this.$emit('showequimentdetail', params.data.name, params.data.equimentType, 'type')
                if ("equimentType" in params.data) {
                    this.$emit(
                        "showequimentdetail",
                        params.data.name,
                        params.data.equimentType,
                        "type"
                    )
                } else {
                    this.$emit('showequimentdetail', params.data.name, params.data.online, 'online')
                    this.$emit(
                        "showequimentdetail",
                        params.data.name,
                        params.data.online,
                        "online"
                    )
                }
            })
        },
@@ -721,10 +889,10 @@
            clearInterval(rightTiming)
            rightTiming = null
        }
    }
    },
}
</script>

 
<style scoped lang="scss">
.container {
    display: flex;