安保活动相关更改

shuishen

2023-03-30 81b4bca516d37a36854181d60215e6ceaddc5e9c

 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>