安保活动相关更改

shuishen

2023-03-30 81b4bca516d37a36854181d60215e6ceaddc5e9c

安保活动相关更改

 package-lock.json

Diff too large

 package.json

@@ -8,7 +8,7 @@
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "@dvgis/dc-sdk": "^2.16.2",
        "@dvgis/dc-sdk": "^2.17.0",
        "@fullcalendar/core": "^5.10.1",
        "@fullcalendar/daygrid": "^5.10.1",
        "@fullcalendar/interaction": "^5.10.1",
@@ -53,4 +53,4 @@
        "sass-loader": "^8.0.2",
        "vue-template-compiler": "^2.6.11"
    }
}
}

 pnpm-lock.yaml

@@ -1,7 +1,7 @@
lockfileVersion: 5.4

specifiers:
  '@dvgis/dc-sdk': ^2.16.2
  '@dvgis/dc-sdk': ^2.17.0
  '@fullcalendar/core': ^5.10.1
  '@fullcalendar/daygrid': ^5.10.1
  '@fullcalendar/interaction': ^5.10.1

 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-28 23:57:07
 * @LastEditTime: 2023-03-30 11:06:04
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -13,22 +13,22 @@
        <slot ref="mainContent" name="mainContent"></slot>
        <slot name="showButton"></slot>
        <div class="over-look-btn">
            <el-tooltip content="一键俯视" placement="bottom" effect="dark">
            <el-tooltip content="一键俯视" placement="top" effect="dark">
                <i class="fa fa-eye" style="vertical-align: middle; cursor: pointer" @click="overLookClick"></i>
            </el-tooltip>
        </div>
        <!-- 全屏控制按钮 -->
        <div class="screen-full-btn">
            <el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark">
            <el-tooltip v-if="isFullscreen" content="缩放" placement="top" effect="dark">
                <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
            </el-tooltip>
            <el-tooltip v-if="!isFullscreen" content="全屏" placement="bottom" effect="dark">
            <el-tooltip v-if="!isFullscreen" content="全屏" placement="top" effect="dark">
                <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
            </el-tooltip>
        </div>
        <!-- 切换矢量图按钮 -->
        <div class="image-switch-icon-btn">
            <el-tooltip content="图层、模型、视角" placement="bottom" effect="dark">
            <el-tooltip content="图层、模型、视角" placement="top" effect="dark">
                <div class="icon-box" @click.stop="showImgBtn = !showImgBtn">
                    <img src="/img/base_map.png" alt />
                </div>
@@ -39,7 +39,8 @@
                <div class="layer-change-box">
                    <div class="title">
                        底图
                        <div class="close" @click.stop="showImgBtn = false" title="关闭"></div>
                        <div class="close" @click.stop="showImgBtn = false">
                        </div>
                    </div>

                    <div class="content">
@@ -325,7 +326,9 @@
            // global.viewer.addTerrain(terrain)

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

            // that.highOrLightChange('light')

            // 外网
            global.viewer.imageryLayers.addImageryProvider(
@@ -429,6 +432,8 @@

        global.DC.ready(initViewer)



        // global.viewer.scene.morphTo2D(1)

        // 清除控制台
@@ -515,14 +520,29 @@
            that.toPosition(params.siteJd, params.siteWd, params.siteGd, params.siteHeading, params.sitePitch, params.siteRoll, params.time)
        })

        this.$EventBus.$on('highOrLightChange', (type) => {
            // eslint-disable-next-line no-unused-vars
            that.highOrLightChange(type)
        })

        this.$EventBus.$on('addMxTileset', (params) => {
            // eslint-disable-next-line no-unused-vars
            that.addMxTileset(params.titlesetName, params.titlesetUrl, params.incident)
            that.addMxTileset(params.titlesetName, params.titlesetUrl)
        })

        this.$EventBus.$on('tilesetLayerFlag', (type, cb) => {
            // eslint-disable-next-line no-unused-vars
            that.tilesetLayerFlag(type, cb)
        })

        this.$EventBus.$on('removeMxTileset', (params) => {
            // eslint-disable-next-line no-unused-vars
            that.removeMxTileset(params.titlesetName, params.incident)
            that.removeMxTileset(params.titlesetName)
        })

        this.$EventBus.$on('activeControlRemoveTileset', () => {
            // eslint-disable-next-line no-unused-vars
            that.activeControlRemoveTileset()
        })

        this.$EventBus.$on('flytoLayer', (params) => {
@@ -590,8 +610,6 @@
            } else {
                global.viewer.setPitchRange(-90, 0)
            }

            this.showImgBtn = false
        },
        /**
         * @description: 高精度模型和轻量模型切换
@@ -600,11 +618,11 @@
         */
        highOrLightChange (type) {
            label.forEach(item => {
                this.removeMxTileset(`sdTilesetLayer${item}`, this.housingIndent)
                this.removeMxTileset(`sdTilesetLayer${item}`)
            })

            // this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/wanda/tileset.json`, this.housingIndent)
            // this.addMxTileset('sdTilesetLayer', `/mx/01/tileset.json`, this.housingIndent)
            // this.addMxTileset('sdTilesetLayer', `${tile3DUrl}/sf3d/361102/model/wanda/tileset.json`)
            // this.addMxTileset('sdTilesetLayer', `/mx/01/tileset.json`)

            if (this.tilesetLayerType == type) {
                this.tilesetLayerType = ''
@@ -613,14 +631,12 @@

                type == 'light' ?
                    label.forEach(item => {
                        this.addMxTileset(`sdTilesetLayer${item}`, `${tile3DUrl}/sf3d/361102/model/all/${item}/tileset.json`, this.housingIndent)
                        this.addMxTileset(`sdTilesetLayer${item}`, `${tile3DUrl}/sf3d/361102/model/all/${item}/tileset.json`)
                    }) :
                    label.forEach(item => {
                        this.addMxTileset(`sdTilesetLayer${item}`, `${tile3DUrl}/sf3d/361102/model/all1/${item}/tileset.json`, this.housingIndent)
                        this.addMxTileset(`sdTilesetLayer${item}`, `${tile3DUrl}/sf3d/361102/model/all1/${item}/tileset.json`)
                    })
            }

            this.showImgBtn = false
        },

        /**
@@ -668,8 +684,6 @@
            // )

            baseLayers.contrast = 0.8

            this.showImgBtn = false
        },

        switchElec () {
@@ -689,8 +703,6 @@
            )

            baseLayers.contrast = 1.0

            this.showImgBtn = false
        },

        /**
@@ -1047,7 +1059,7 @@
         * @param {*} titlesetUrl 模型地址
         * @param {*} incident 模型点击事件
         */
        addMxTileset (titlesetName, titlesetUrl, incident = (e) => { }) {
        addMxTileset (titlesetName, titlesetUrl) {
            if (!tilesetObject[titlesetName]) tilesetObject[titlesetName] = null

            tilesetObject[titlesetName] = new global.DC.Tileset(titlesetUrl, {
@@ -1060,11 +1072,45 @@

            tilesetObject[titlesetName].setHeight(-72)

            tilesetObject[titlesetName].on(global.DC.MouseEventType.CLICK, incident)
            tilesetObject[titlesetName].on(global.DC.MouseEventType.CLICK, this.housingIndent)

            tilesetLayer.addOverlay(tilesetObject[titlesetName])

            // global.viewer.flyTo(tilesetObject[titlesetName])
        },

        tilesetLayerFlag (type, cb) {
            if (type == 1) {
                if (this.tilesetLayerType != '') {
                    this.$message({
                        message: '请关闭模型再开始绘制',
                        type: 'warning'
                    })

                    cb(false)
                    return
                }
            } else {
                if (this.tilesetLayerType == '') {
                    this.$message({
                        message: '请打开模型再开始绘制',
                        type: 'warning'
                    })

                    cb(false)
                    return
                }
            }

            cb(true)
        },

        activeControlRemoveTileset () {
            label.forEach(item => {
                this.removeMxTileset(`sdTilesetLayer${item}`)
            })

            this.tilesetLayerType = ''
        },

        /**
@@ -1072,9 +1118,9 @@
         * @param {*} titlesetName 图层名称
         * @param {*} incident 模型点击事件
         */
        removeMxTileset (titlesetName, incident = (e) => { }) {
        removeMxTileset (titlesetName) {
            if (tilesetObject[titlesetName] && tilesetObject[titlesetName] != null) {
                tilesetObject[titlesetName].off(global.DC.MouseEventType.CLICK, incident)
                tilesetObject[titlesetName].off(global.DC.MouseEventType.CLICK, this.housingIndent)
                tilesetLayer.removeOverlay(tilesetObject[titlesetName])
                tilesetObject[titlesetName] = null
            }

 src/styles/dc/index.scss

@@ -180,7 +180,24 @@
        display: flex;
        flex-direction: column;

        .title {}
        .title {
            .close {
                position: absolute;
                right: 5px;
                top: 0;
            }

            .close::before {
                font-family: element-icons;
                content: '\e6db';
                cursor: pointer;
                font-size: 16px;
            }

            .close:hover::before {
                color: #3d95f3;
            }
        }

        .content {
            display: flex;

 src/styles/media/index.scss

@@ -1531,6 +1531,7 @@
                                            height: countSizeVh(32);
                                            font-size: countSizeVh(14);
                                            padding-left: countSizeVw(10, 1920);
                                            padding-right: countSizeVw(20, 1920);
                                        }


@@ -2668,23 +2669,6 @@
                            height: countSizeVh(32);
                            line-height: countSizeVh(32);
                            text-align: left;

                            .close {
                                position: absolute;
                                right: 5px;
                                top: 0;
                            }

                            .close::before {
                                font-family: element-icons;
                                content: '\e6db';
                                cursor: pointer;
                                font-size: 16px;
                            }

                            .close:hover::before {
                                color: #3d95f3;
                            }
                        }

                        .content {

 src/utils/plot/Plot.js

@@ -11,6 +11,7 @@
import EditBillboard from './edit/EditBillboard'
class Plot {
    constructor(viewer, options = {}) {
        this._currentWorker = undefined
        this._viewer = viewer
        this._options = options
        this._layer = new global.DC.Namespace.Cesium.CustomDataSource('cur-plot-layer')
@@ -51,6 +52,9 @@
            default:
                break
        }

        this._currentWorker = drawWorker

        return drawWorker
    }

@@ -74,6 +78,9 @@
            default:
                break
        }

        this._currentWorker = editWorker

        return editWorker
    }

@@ -115,6 +122,14 @@
        return this
    }

    stop (overlay) {
        if (this._state == 'draw') {
            this._currentWorker?._onDrawStop()
        } else {
            this._currentWorker?._onEditStop(overlay)
        }
    }

    /**
   *
   * @returns {Plot}

 src/utils/plot/draw/DrawBillboard.js

@@ -2,8 +2,8 @@
 * @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
 * @LastEditTime: 2023-03-29 20:29:27
 * @FilePath: \srs-police-affairs\src\utils\plot\draw\DrawBillboard.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
@@ -21,7 +21,7 @@
class DrawPoint extends Draw {
    constructor(style) {
        super()
        this._position = global.DC.Namespace.Cesium.Cartesian3.ZERO
        this._position = global.DC.Namespace.Cesium.Cartesian3.UNIT_Z
        this._style = {
            image: style.billboardImage ?? IMG_CIRCLE_RED,
            ...style
@@ -39,7 +39,7 @@
                return this._position
            }, false),
            billboard: {
                ...this._style
                ...this._style,
            }
        })
        this._layer.entities.add(this._delegate)

 src/utils/plot/edit/Edit.js

@@ -93,11 +93,11 @@
    }

    /**
   *
   * @param pickedAnchor
   * @param position
   * @private
   */
     *
     * @param pickedAnchor
     * @param position
     * @private
     */
    _onEditStop ({ pickedAnchor, position }) {
        this._unbindEvent()
        this._viewer.curEditTool.deactivate()
@@ -133,13 +133,6 @@
            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
    }

    /**

 src/views/activity/components/drawBtnBox.vue

@@ -30,19 +30,7 @@
                <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="drawThreeArrow('polygon')" title="多边形">多边形</button>
                        <button @click="drawThreeArrow('polygon', 'polygon', 'polygon')" title="多边形">多边形</button>
                    </li>
                </ul>
            </div>
@@ -52,7 +40,7 @@
                    <li>
                        <!-- <el-button
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ></el-button>-->
                        <button @click="drawThreeArrow('polyline', 'policecar')" title="巡逻路线">
                        <button @click="drawThreeArrow('polyline', 'policecar', 'polyline')" title="巡逻路线">
                            <img src="/img/icon/route1.png" style="height:100%" />
                        </button>
                    </li>
@@ -70,12 +58,14 @@

import Plot from "@/utils/plot/Plot.js"

let plotDrawEmit = null

let addPlotOverlayData = null

let currentEmitEl = null
let currentStatus = ''
let drawThreeTool = null
let drawFlag = false

const plotType = 3
export default {
    props: [
        'dialogVisible', 'isShowActivityEditBox', 'showingSecurityId',
@@ -84,12 +74,16 @@

    data () {
        return {
            startDrawFlag: false
        }
    },

    mounted () {
        this.$nextTick(() => {

            drawThreeTool = new Plot(global.viewer, {
                clampToModel: true
            })

            // global.viewer.scene.globe.depthTestAgainstTerrain = true
        })
@@ -97,52 +91,27 @@
    },

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

            plotDrawEmit && plotDrawEmit.draw(type, overlay => {
                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) })
        },

        drawThreeArrow (type, billboardType = '', typeValue = '') {
            let flag
            this.$EventBus.$emit('tilesetLayerFlag', plotType, (e) => { flag = e })
            if (flag != true) return

            drawFlag = false
            if (this.startDrawFlag == true) {
                drawFlag = true
                drawThreeTool && drawThreeTool.stop()
                drawFlag = false
                this.startDrawFlag = false
            }
            this.startDrawFlag = true

            currentStatus == 'emit' && drawThreeTool.stop(currentEmitEl)
            currentStatus = 'draw'

            global.viewer.scene.globe.depthTestAgainstTerrain = true
            const that = this
            let flag = false
            let imgUrl
            let material

            switch (typeValue) {
                case 'policeman':
                    imgUrl = 'police-people'
@@ -168,20 +137,20 @@

            if (type == 'polygon') {
                drawThreeTool && drawThreeTool.draw(type, overlay => {
                    if (drawFlag) return
                    if (overlay) {
                        addPlotOverlayData = overlay
                        overlay.customType = 'polygon'
                        that.$parent.addArrowsListLayer(overlay)
                        drawThreeTool.edit(overlay, (e) => {
                            flag = true
                            let polygonPosition = 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.addSaveNewDraw(polygonPosition, 5, altitude)
                                flag = false
                            }
                            global.viewer.scene.globe.depthTestAgainstTerrain = false
                        }, true)

                        let polygonPosition = overlay.positions.map(item => `${item.lng} ${item.lat}`).join()
                        const altitude = overlay.positions.map(item => item.alt).join()
                        setTimeout(() => {
                            that.$parent.addSaveNewDraw(polygonPosition, 5, altitude)
                        }, 100)
                        global.viewer.scene.globe.depthTestAgainstTerrain = false
                        currentStatus = ''
                        that.startDrawFlag = false
                    }
                }, {
                    material: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 122),
@@ -192,6 +161,7 @@
                }, true)
            } else if (type == 'billboard') {
                drawThreeTool && drawThreeTool.draw(type, overlay => {
                    if (drawFlag) return
                    if (overlay) {
                        addPlotOverlayData = overlay
                        overlay.customType = 'billboard'
@@ -202,28 +172,31 @@
                            that.$parent.addPointPopupShow(typeValue, overlay.position)
                        }
                        global.viewer.scene.globe.depthTestAgainstTerrain = false
                        currentStatus = ''
                        that.startDrawFlag = false
                    }
                }, {
                    size: [32, 32],
                    verticalOrigin: global.DC.Namespace.Cesium.VerticalOrigin.BOTTOM,
                    color: material,
                    // eyeOffset: new global.DC.Namespace.Cesium.Cartesian3(0, 0, -10),
                    billboardImage: `/img/icon/${imgUrl}.png`
                }, true)
            } else if (type == 'polyline') {
                drawThreeTool && drawThreeTool.draw(type, overlay => {
                    if (drawFlag) return
                    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)
                        let polylinePosition = overlay.positions.map(item => `${item.lng} ${item.lat}`).join()
                        const altitude = overlay.positions.map(item => item.alt).join()
                        setTimeout(() => {
                            that.$parent.addSaveNewDrawLine(polylinePosition, altitude)
                        }, 100)
                        global.viewer.scene.globe.depthTestAgainstTerrain = false
                        currentStatus = ''
                        that.startDrawFlag = false
                    }
                }, {
                    material: global.DC.Namespace.Cesium.Color.fromBytes(28, 160, 133, 122),
@@ -237,24 +210,27 @@

        // 编辑标绘位置
        plotEdit (overlayData, type) {
            currentStatus = 'emit'
            currentEmitEl = overlayData
            global.viewer.scene.globe.depthTestAgainstTerrain = true
            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
                    currentStatus = ''
                }, 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
                    currentStatus = ''
                }, true)
            } else if (overlayData.attrParams.lineObj.customType == 'polyline') {
                global.viewer.scene.globe.depthTestAgainstTerrain = true
                currentEmitEl = overlayData.attrParams.lineObj
                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()
@@ -267,6 +243,7 @@
                        altitude
                    }, overlayData)
                    global.viewer.scene.globe.depthTestAgainstTerrain = false
                    currentStatus = ''
                }, true)
            }
        },
@@ -574,33 +551,18 @@
            })
        },

        startDraw () {
            plotDrawEmit = new global.DC.Plot(global.viewer, {
                clampToModel: true
            })

            console.log(plotDrawEmit)

            drawThreeTool = new Plot(global.viewer, {
                clampToModel: true
            })

            drawThreeTool._currentWorker = undefined

            drawThreeTool.plot = plotDrawEmit.plot

            console.log(drawThreeTool)
        },

        stopDraw () {
            plotDrawEmit != null && plotDrawEmit.stop(), plotDrawEmit = null
            drawThreeTool != null && drawThreeTool.stop(), drawThreeTool = null
            if (drawThreeTool) {
                currentStatus == 'draw' && drawThreeTool.stop()
                currentStatus == 'emit' && drawThreeTool.stop(currentEmitEl)
            }
        }

    },

    destroyed () {
        this.stopDraw()
        drawThreeTool.destroy()
        drawThreeTool = null
    },
}
</script>

 src/views/activity/components/polygonPlot.vue

@@ -138,7 +138,7 @@

            if (type == 5) {
                this.polygonAreaType = 1
                this.isNeedPolygonType = true
                this.isNeedPolygonType = false
            } else {
                this.isNeedPolygonType = false
            }
@@ -155,7 +155,7 @@

            if (e.overlay.attrParams.item.type == 5) {
                this.polygonAreaType = e.overlay.attrParams.item.areaType != '' ? e.overlay.attrParams.item.areaType : 1
                this.isNeedPolygonType = true
                this.isNeedPolygonType = false
            } else {
                this.isNeedPolygonType = false
            }
@@ -203,12 +203,7 @@
        editPlot () {
            this.editPlotVisible = false

            this.reeditArrowDbClick(plotOverlayData)
        },

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

        // 保存标绘修改

 src/views/activity/components/publicIndex.vue

@@ -5,12 +5,18 @@
            :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>
        <two-draw-btn-box v-if="currentPlotType == 1" ref="DRAWBTNBOX" :dialogVisible="dialogVisible"
            :isShowActivityEditBox="isShowActivityEditBox" :showingSecurityId="showingSecurityId"
            :policeSwitch="policeSwitch" :polylineBtnSwitch="polylineBtnSwitch" :arrowBtnSwitch="arrowBtnSwitch"
            :policeIconId="policeIconId" :lineWidth="lineWidth" @setPoliceOption="setPoliceOption"></two-draw-btn-box>

        <draw-btn-box v-if="currentPlotType == 3" 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>
@@ -38,11 +44,11 @@
import polygonPlot from './polygonPlot.vue'
import polylinePlot from './polylinePlot.vue'
import drawBtnBox from './drawBtnBox.vue'
import twoDrawBtnBox from './twoDrawBtnBox.vue'
import policeCarChange from './policeCarChange.vue'
import policePersonChange from './policePersonChange.vue'
import activityDetail from './activityDetail.vue'
import videoControlBox from './videoControlBox.vue'


// 要素的
let pointCircleCarLayer = null
@@ -83,13 +89,15 @@
            isHavePoliceCar: false,
            isHavePoliceMan: false,
            isHavePointDraw: false,
            isHaveFactor: false
            isHaveFactor: false,
            currentPlotType: 1
        }
    },

    components: {
        layersShowControl,
        drawBtnBox,
        twoDrawBtnBox,
        polygonPlot,
        polylinePlot,
        policeCarChange,
@@ -239,8 +247,9 @@
        },

        reloadAll (params) {
            this.currentPlotType = params.item.plotType

            this.closeActivityDetails()
            this.$refs.DRAWBTNBOX.startDraw()
            // 当前选中的ID
            this.showingSecurityId = params.item.id
            // 当前选中的详情
@@ -394,10 +403,15 @@
        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,
                    extrudedHeight: null,
                    perPositionHeight: this.currentPlotType == 3 ? true : false,
                    closeTop: false,
                    closeBottom: false,
                    // classificationType: global.DC.Namespace.Cesium.ClassificationType.TERRAIN
                    outline: true,
                    outlineColor: color.outColor,
                    outlineWidth: 4.0,
@@ -405,7 +419,14 @@

                coverage.customType = 'polygon'
            } else {
                coverage.setStyle({ material: color.curColor })
                coverage.setStyle({
                    material: color.curColor,
                    outline: true,
                    outlineColor: color.outColor,
                    outlineWidth: 4.0,
                })

                coverage.customType = 'polyArrows'
            }
            coverage.attrParams = { id: params.id, color: params.color, item: params }
            coverage.on(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
@@ -498,7 +519,6 @@

        // 鼠标移入图标事件
        pointMouseOver (e) {
            console.log(e, 959999)
            this.$store.commit('SET_ACTIVITYPOLICEPOPUP', true)
            let hoverData = {}
            if ('carId' in e.overlay.attrParams.data) {
@@ -571,13 +591,12 @@
                item.polygonPositionStr = positionStr

                let lineObj = new global.DC.Polyline(positionNewArr)
                lineObj.customType == 'polyline'
                lineObj.customType = 'polyline'
                lineObj.setStyle({
                    material: lineColor,
                    clampToGround: this.currentPlotType == 3 ? false : true,
                    width: 3
                })

                item.lineObj = lineObj

                lineLayer.addOverlay(lineObj)

@@ -585,7 +604,7 @@
                    layerName: 'newCarDrawLineLayers',
                    positions: positionStr,
                    material: color,
                    params: item,
                    params: { ...item, lineObj },
                    incident: this.lineOverlayTypeClick
                })

@@ -739,8 +758,6 @@
        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(',')


 src/views/activity/components/twoDrawBtnBox.vue

New file
@@ -0,0 +1,720 @@
<template>
    <div v-show="dialogVisible && isShowActivityEditBox" class="draw-btn-box">
        <div class="left">
            <h3>预案布置</h3>
            <div>
                <span>要素资源：</span>
                <ul>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'police', 'policeman')" title="警员">
                            <img src="/img/icon/police-people-btn.png" style="height:100%" />
                        </button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'police', 'policecar')" title="警车">
                            <img src="/img/icon/car-btn.png" style="height:100%" />
                        </button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon1')" title="普通群众">普通群众</button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon2')" title="保护对象">保护对象</button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon3')" title="危险人物">危险人物</button>
                    </li>
                </ul>
            </div>
            <div>
                <span>作战标绘：</span>
                <ul>
                    <li>
                        <button @click="drawArrow('attack_arrow', 1)" title="进攻箭头">进攻箭头</button>
                    </li>
                    <li>
                        <button @click="drawArrow('double_arrow', 2)" title="双箭头">双箭头</button>
                    </li>
                    <li>
                        <button @click="drawArrow('fine_arrow', 3)" title="直箭头">直箭头</button>
                    </li>
                    <li>
                        <button @click="drawArrow('tailed_attack_arrow', 4)" title="燕尾箭头">燕尾箭头</button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('polygon', 'polygon', 'polygon')" title="多边形">多边形</button>
                    </li>
                </ul>
            </div>
            <div>
                <span>巡逻路线：</span>
                <ul>
                    <li>
                        <!-- <el-button
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ></el-button>-->
                        <button @click="drawThreeArrow('polyline', 'policecar')" title="巡逻路线">
                            <img src="/img/icon/route1.png" style="height:100%" />
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

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

import Plot from "@/utils/plot/Plot.js"

let plotDrawEmit = null

let addPlotOverlayData = null

let currentEmitEl = null
let drawThreeTool = null
let stopDrawflag = false

let drawFlag = false
let drawTwoFlag = false

let currentStatus = ''

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

    data () {
        return {
            startDrawFlag: false,
            startTwoDrawFlag: false
        }
    },

    mounted () {
        this.$nextTick(() => {

            global.viewer.scene.globe.depthTestAgainstTerrain = false

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

            drawThreeTool = new Plot(global.viewer, {
                clampToModel: true
            })

        })

    },

    methods: {
        drawArrow (type, plotType) {
            let flag
            this.$EventBus.$emit('tilesetLayerFlag', plotDrawType, (e) => { flag = e })
            if (flag != true) return

            drawTwoFlag = false
            if (this.startDrawFlag == true) {
                drawFlag = true
                drawThreeTool && drawThreeTool.stop()
                drawFlag = false
                this.startDrawFlag = false
            }
            if (this.startTwoDrawFlag == true) {
                drawTwoFlag = true
                plotDrawEmit && plotDrawEmit.stop()
                drawTwoFlag = false
                this.startTwoDrawFlag = false
            }
            this.startTwoDrawFlag = true

            currentStatus == 'emit' && drawThreeTool.stop(currentEmitEl)
            currentStatus == 'twoEmit' && plotDrawEmit.stop()
            currentStatus = 'twoDraw'

            const that = this
            plotDrawEmit && plotDrawEmit.draw(type, overlay => {
                if (drawTwoFlag) return
                if (overlay) {
                    addPlotOverlayData = overlay
                    overlay.customType = 'polyArrows'
                    that.$parent.addArrowsListLayer(overlay)
                    let polygonPosition = overlay.positions.map(item => `${item.lng} ${item.lat}`).join()
                    const altitude = overlay.positions.map(item => item.alt).join()

                    setTimeout(() => {
                        that.$parent.addSaveNewDraw(polygonPosition, plotType, altitude)
                    }, 100)

                    currentStatus = ''
                    that.startTwoDrawFlag = true
                }
            }, { material: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 122) })
        },

        drawThreeArrow (type, billboardType = '', typeValue = '') {
            let flag
            this.$EventBus.$emit('tilesetLayerFlag', plotDrawType, (e) => { flag = e })
            if (flag != true) return

            drawFlag = false
            if (this.startDrawFlag == true) {
                drawFlag = true
                drawThreeTool && drawThreeTool.stop()
                drawFlag = false
                this.startDrawFlag = false
            }
            if (this.startTwoDrawFlag == true) {
                drawTwoFlag = true
                plotDrawEmit && plotDrawEmit.stop()
                drawTwoFlag = false
                this.startTwoDrawFlag = false
            }
            this.startDrawFlag = true

            currentStatus == 'emit' && drawThreeTool.stop(currentEmitEl)
            currentStatus == 'twoEmit' && plotDrawEmit.stop()
            currentStatus = 'draw'

            const that = this
            let imgUrl
            let material
            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') {
                drawThreeTool && drawThreeTool.draw(type, overlay => {
                    if (drawFlag) return
                    if (overlay) {
                        addPlotOverlayData = overlay
                        overlay.customType = 'polygon'
                        that.$parent.addArrowsListLayer(overlay)

                        let polygonPosition = overlay.positions.map(item => `${item.lng} ${item.lat}`).join()
                        const altitude = overlay.positions.map(item => item.alt).join()
                        setTimeout(() => {
                            that.$parent.addSaveNewDraw(polygonPosition, 5, altitude)
                        }, 100)
                        currentStatus = ''
                        that.startDrawFlag = false
                    }
                }, {
                    material: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 122),
                    outline: true,
                    outlineColor: global.DC.Namespace.Cesium.Color.fromBytes(64, 158, 255, 255),
                    outlineWidth: 4.0,
                })
            } else if (type == 'billboard') {
                drawThreeTool && drawThreeTool.draw(type, overlay => {
                    if (drawFlag) return
                    if (overlay) {
                        addPlotOverlayData = overlay
                        overlay.customType = 'billboard'
                        that.$parent.addPointCircleCarLayer(overlay)
                        if (billboardType == 'police') {
                            that.$parent.addSaveNewDrawPoint(typeValue, overlay)
                        } else {
                            that.$parent.addPointPopupShow(typeValue, overlay.position)
                        }
                        currentStatus = ''
                        that.startDrawFlag = false
                    }
                }, {
                    size: [32, 32],
                    color: material,
                    billboardImage: `/img/icon/${imgUrl}.png`
                })
            } else if (type == 'polyline') {
                drawThreeTool && drawThreeTool.draw(type, overlay => {
                    if (drawFlag) return
                    if (overlay) {
                        addPlotOverlayData = overlay
                        overlay.customType = 'polyline'
                        that.$parent.addLineLayer(overlay)
                        let polylinePosition = overlay.positions.map(item => `${item.lng} ${item.lat}`).join()
                        const altitude = overlay.positions.map(item => item.alt).join()
                        setTimeout(() => {
                            that.$parent.addSaveNewDrawLine(polylinePosition, altitude)
                        }, 100)
                        currentStatus = ''
                        that.startDrawFlag = false
                    }
                }, {
                    material: global.DC.Namespace.Cesium.Color.fromBytes(28, 160, 133, 122),
                })
            }
        },

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

        // 编辑标绘位置
        plotEdit (overlayData, type) {
            currentEmitEl = overlayData
            if (overlayData.customType == 'polygon') {
                currentStatus = 'emit'
                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 })
                    currentStatus = ''
                })
            } else if (overlayData.customType == 'billboard') {
                currentStatus = 'emit'
                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 })
                    currentStatus = ''
                })
            } else if (overlayData.customType == 'polyArrows') {
                currentStatus = 'twoEmit'
                plotDrawEmit.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 })
                    currentStatus = ''
                })
            } else if (overlayData.attrParams.lineObj.customType == 'polyline') {
                currentStatus = 'twoEmit'
                currentEmitEl = overlayData.attrParams.lineObj
                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)
                    currentStatus = ''
                })
            }
        },

        // 保存新增标绘样式修改
        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)

            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(' ')

                addPlotOverlayData.setStyle({
                    color: color
                })

                addPlotOverlayData.position = {
                    lng: Number(position[0]),
                    lat: Number(position[1]),
                    alt: Number(height[0]),
                }

                this.$parent.isHaveFactor = true
            } else {
                addPlotOverlayData.setStyle({
                    material: color
                })

                this.$parent.isHaveArrow = true
            }
        },

        // 保存新增警力资源
        addNewPolice (data, type, carType) {
            // 巡逻路线添加
            if (type == 'policecar' && carType == 1) {
                // 线坐标字符串
                let positionNewArr = this.$parent.convertPolylineOrPolygonPositionDate(data, 'add')
                // 范围面坐标串
                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)
                }
                addPlotOverlayData.setStyle({
                    material: lineColor,
                    width: 3
                })

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

                addPlotOverlayData.attrParams = data

                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'newCarDrawLineLayers',
                    positions: positionStr,
                    material: color,
                    params: data,
                    incident: 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 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)
                }

                addPlotOverlayData.attrParams = positionObj
                addPlotOverlayData.position = {
                    lng: Number(positionArr[0]),
                    lat: Number(positionArr[1]),
                    alt: Number(positionObj.alt)
                }

                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
            }
        },

        // 修改标绘样式
        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)
                let outColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                overlay.attrParams.color = params.color

                if (overlay.customType == 'polygon') {
                    overlay.setStyle({
                        material: color,
                        outlineColor: outColor
                    })
                } else if (overlay.customType == 'billboard') {
                    overlay.setStyle({
                        color: 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 && overlay.customType == 'billboard') {
                overlay.attrParams.data.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.setStyle({
                    color: color, //颜色
                })
            }

            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'
                    })
                }
            })
        },

        startDraw () {
            stopDrawflag = true
        },

        stopDraw () {
            stopDrawflag = false

            if (plotDrawEmit) {
                plotDrawEmit.stop()
            }

            if (drawThreeTool) {
                currentStatus == 'draw' && drawThreeTool.stop()
                currentStatus == 'emit' && drawThreeTool.stop(currentEmitEl)
            }
        }
    },

    destroyed () {
        this.stopDraw()
        plotDrawEmit.destroy()
        plotDrawEmit = null
        drawThreeTool.destroy()
        drawThreeTool = null
    },
}
</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/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-24 16:36:55
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-29 00:07:35
 * @LastEditTime: 2023-03-30 15:41:16
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 
 * 
@@ -17,7 +17,8 @@
                <div>
                    <div class="category">名称：</div>
                    <div class="category-value search-activity">
                        <input type="text" placeholder="请输入…" v-model="searchActivity" class="category-input" />
                        <el-input size="small" placeholder="请输入…" v-model="searchActivity" @change="activeSearch" clearable>
                        </el-input>
                    </div>
                </div>
            </div>
@@ -28,7 +29,7 @@
                        @change="handleActivityChange" class="activity-list">
                        <el-collapse-item v-for="item in activityList" :name="item.id" :key="item.id">
                            <template slot="title">
                                {{ item.name }}
                                {{ item.name }}({{ item.plotType == 1 ? '二维' : '三维' }})
                            </template>
                            <el-collapse v-model="activeActivityElementIndex" accordion>
                                <el-collapse-item title="要素资源" :name="yszy">
@@ -168,7 +169,6 @@
        </div>

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


        <public-index ref="PublicIndexPage"></public-index>
    </div>
@@ -351,8 +351,6 @@
            chooseCarColor: '#1CA085',
            choosePoliceColor: '#1CA085',
            chooseLineData: {},

            isShowActivityEditBox: false,
            plotId: '',

            isNeedName: false,
@@ -471,6 +469,9 @@
         * @return {*}
         */
        activityListClick (item, index) {
            item.plotType == 1 && this.$EventBus.$emit('activeControlRemoveTileset')
            item.plotType == 3 && this.$EventBus.$emit('highOrLightChange', 'light')

            // 当前选中的ID
            this.showingSecurityId = item.id

@@ -848,6 +849,11 @@
                    clearInterval(realPoliceTimer[item])
                }
            }
        },

        activeSearch (e) {
            this.currentPage = 1
            this.getSecurityList(this.currentPage, this.pagesize, e)
        }
    },

@@ -862,11 +868,6 @@
            if (val) {
                this.$store.commit('SET_ACTIVITYPOLICEPOPUP', false)
            }
        },

        searchActivity (val) {
            this.currentPage = 1
            this.getSecurityList(this.currentPage, this.pagesize, this.searchActivity)
        }
    },


 src/views/home/components/bottomContainer.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-01-13 15:52:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-22 16:37:04
 * @LastEditTime: 2023-03-29 23:08:43
 * @FilePath: \srs-police-affairs\src\views\home\components\bottomContainer.vue
 * @Description: 
 * 
@@ -333,8 +333,8 @@
            getAnswerPolices({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
                this.policeSituationRealtimeArr = []

                if (res.data.result && res.data.result.length) {
                    this.policeSituationRealtimeArr = res.data.result.map((item, index) => {
                if (res.data && res.data.length) {
                    this.policeSituationRealtimeArr = res.data.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, position: item.ZDDWYZB ? '有' : '无' }
                    })
                } else {

 src/views/policeInfor/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-22 16:37:26
 * @LastEditTime: 2023-03-30 15:44:10
 * @FilePath: \srs-police-affairs\src\views\policeInfor\index.vue
 * @Description: 辖区管理
 * 
@@ -309,8 +309,8 @@
            getAnswerPolices({ deptId: this.userInfo.dept_id }).then(res => {
                this.realPoliceInforData = []

                if (res.data.result && res.data.result.length) {
                    this.realPoliceInforData = res.data.result.map((item, index) => {
                if (res.data && res.data.length) {
                    this.realPoliceInforData = res.data.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                    })
                } else {

 vue.config.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-09-07 09:37:07
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-22 17:22:24
 * @LastEditTime: 2023-03-29 08:54:06
 * @FilePath: \srs-police-affairs\vue.config.js
 * @Description:
 *
@@ -91,6 +91,10 @@
                    from: "./public/static",
                    to: "static",
                },
                {
                    from: "./public/images",
                    to: "images",
                },
            ],
        ])

@@ -157,8 +161,8 @@
        proxy: {
            "/api": {
                // target用于配置你允许访问数据的计算机名称，即是你的api接口的服务器地址
                // target: "http://localhost:82",
                target: "http://172.16.13.130:82",
                target: "http://localhost:82",
                // target: "http://172.16.13.130:82",
                // target: "http://17.20.10.3:82",
                // target: "http://10.141.11.11:8081/api",
                // ws: true, //启用webSocket6566