作战标绘渲染逻辑调整

guanqb

2023-03-13 0810dc2bd20eaa151560a66872598da94af582b0

作战标绘渲染逻辑调整

 src/views/activity/components/drawBtnBox.vue

@@ -74,6 +74,7 @@
            </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>
@@ -100,6 +101,8 @@
let labelOverLayerID = []

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

export default {
    props: [
@@ -125,15 +128,12 @@
                drawLayers = new global.DC.VectorLayer('drawLayers')
                global.viewer.addLayer(drawLayers)
                plot = new global.DC.Plot(global.viewer)

            }


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

            }

            global.viewer.on(global.DC.MouseEventType.CLICK, this.viewerClick)
@@ -235,6 +235,7 @@
                    if (isAddLabel) return

                    if (overlay) {
                        addPlotOverlayData = overlay
                        drawArrowLayers.addOverlay(overlay)
                        plot.edit(overlay, (e) => {
                            flag = true
@@ -281,6 +282,7 @@
                    }
                    overlay.icon = `/img/icon/${iconType}.png`
                    if (overlay) {
                        addPlotOverlayData = overlay
                        drawArrowLayers.addOverlay(overlay)
                        plot.edit(overlay, (e) => {
                            flag = true
@@ -327,6 +329,7 @@
                            })
                            positionStr = positionStr.slice(0, positionStr.length - 1)
                            that.$parent.arrowPositionStr = positionStr
                            addPlotOverlayData = overlay
                            drawArrowLayers.addOverlay(overlay)
                            document.oncontextmenu = function () {
                                if (flag) {
@@ -354,15 +357,43 @@
            labelOverLayerID = []
        },

        // 编辑标绘位置
        plotEdit (overlayData, type) {
            if (type == "arrow") {
                if('pointOverlayData' in overlayData.attrParams){
                    overlayData.attrParams.pointOverlayData.remove()
                }
                plot.edit(overlayData, (e) => {
                    let position = ''
                    overlayData._positions.forEach(item => {
                    if('_positions' in overlayData){
                      overlayData._positions.forEach(item => {
                        position += item._lng + ' ' + item._lat + ','
                    })
                    position = position.slice(0, position.length - 1)

                      })
                      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") {
@@ -374,6 +405,100 @@
                    position = position.slice(0, position.length - 1)
                    this.updateActivityCar({ id: this.policeIconId, color: this.chooseColor, width: this.lineWidth, type: 1, position: position })
                })
            }
        },

        // 保存新增标绘样式修改
        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)
            let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
            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 ) {
               console.log(addPlotOverlayData,666);
               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)
               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]
                      }

                   }
               })
            }
        },

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

@@ -397,9 +522,10 @@
            })
        },

        updateSecurityPlot (params) {
        updateSecurityPlot (params,overlay) {
            updateSecurityPlot(params).then(res => {
                if (res.data.success) {
                    this.editPlotStyle(params,overlay)
                    this.$message({
                        message: '修改成功',
                        type: 'success'
@@ -410,8 +536,6 @@
                        type: 'error'
                    })
                }
                this.$parent.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch, 'billboard')
                this.$parent.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch, 'plot')
            })
        },

@@ -451,6 +575,7 @@
            this.labelPopupTitle = '添加文字标注'
            this.addLabelVisible = true
            this.addLabelPosition = e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat + ',' + e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat
            this.labelInput = ''
        },

        // 文字标注窗口的添加按钮
@@ -468,6 +593,12 @@
                }
                this.cancelSaveLabel()
            }
        },

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

        lableAllEvent (label) {
@@ -493,7 +624,6 @@

        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)
@@ -507,7 +637,6 @@

        updateLableMove (e) {
            this.$EventBus.$emit('closeTooltip')

            curLabelOverLayer.position = {
                lng: e.wgs84SurfacePosition.lng,
                lat: e.wgs84SurfacePosition.lat,
@@ -545,19 +674,21 @@
            isAddLabel = false
            this.addLabelVisible = false
            drawLabelStatus = 'end'

            this.$EventBus.$emit('closeTooltip')
        },

        // 单击文字标绘
        reEditLabel (e) {
            console.log(e,2233);
            lableOverlayData = e.overlay
            this.$EventBus.$emit('closeTooltip')

            this.labelId = e.overlay.attrParams.id
            this.labelPopupTitle = "修改文字标注"
            this.labelInput = e.overlay.attrParams.item.name
            this.labelInput =  lableOverlayData.text
            this.addLabelVisible = true
        },

        
    },

    destroyed () {

 src/views/activity/index.vue

@@ -183,7 +183,7 @@
            </div>
        </el-dialog>

        <el-dialog :title="polygonAddTitle" :modal="false" :visible.sync="polygonAddVisible" :close-on-click-modal="true"
        <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>
@@ -243,7 +243,6 @@

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

import { getEquipmentAll } from '@/api/home/index.js'
import activityDetail from './components/activityDetail.vue'
import drawBtnBox from './components/drawBtnBox.vue'
@@ -416,7 +415,6 @@
            userInfo: {},
            lineEditVisible: false,
            lineEditTitle: '修改巡逻路线',
            polygonAddTitle: '新增标绘',
            polygonAddVisible: false,
            polygonName: '',
            polygonPositionStr: '',
@@ -525,10 +523,6 @@
                polylineAreaLayer = new global.DC.VectorLayer('polylineAreaLayer')
                global.viewer.addLayer(polylineAreaLayer)
            }




        })
    },

@@ -766,34 +760,24 @@
                        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)
                                    // 如果完全包含就作为洞面扣去
@@ -826,21 +810,21 @@
                        chooseArrow = new global.DC.Billboard(position, `/img/icon/${iconImgName}.png`)
                        chooseArrow.size = item.type == 6 ? [24, 24] : [32, 32]
                        arrowsListLayer.addOverlay(chooseArrow)
                        chooseArrow.attrParams = { 'id': item.id, 'color': item.color, item }
                        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 }
                        point.on(global.DC.MouseEventType.CLICK, this.reeditArrowClick)
                        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]))
@@ -850,20 +834,14 @@
                        arrowsListLayer.addOverlay(label)
                    }
                    if (chooseArrow != null) {
                        chooseArrow.attrParams = { 'id': item.id, 'color': item.color, item }
                        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)
                    }


                    // let position1 = new global.DC.Position(117.94218262137659, 28.434842894894153)
                    // let Label = new global.DC.Label(position1, 'test')
                    // Label.on(global.DC.MouseEventType.LEFT_DOWN, this.reeditArrowLeftDown)
                    // Label.on(global.DC.MouseEventType.LEFT_UP, this.reeditArrowLeftUp)
                    // // Label.on(global.DC.MouseEventType.MOUSE_MOVE, this.reeditArrowMouseMove)
                    // arrowsListLayer.addOverlay(Label)
                })
            })
        },
@@ -1371,7 +1349,6 @@
        // 取消保存多边形
        cancelSavePolygon () {
            this.polygonAddVisible = false

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

@@ -1518,6 +1495,7 @@
        addSecurityPlot (params) {
            addSecurityPlot(params).then(res => {
                if (res.data.success) {
                    this.$refs.DRAWBTNBOX.addNewPlot(res.data.data)
                    this.$message({
                        message: '保存成功',
                        type: 'success'
@@ -1528,8 +1506,6 @@
                        type: 'error'
                    })
                }
                this.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch, 'billboard')
                this.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch, 'plot')
            })
        },

@@ -1563,21 +1539,6 @@
            }
        },

        // 左键按下标绘
        reeditArrowLeftDown (e) {
            console.log('reeditArrowLeftDown--ee', e)
        },

        // 左键抬起标绘
        reeditArrowLeftUp (e) {
            console.log('reeditArrowLeftUp--ee', e)
        },

        // 移动标绘
        reeditArrowMouseMove (e) {
            console.log('reeditArrowMouseMove--ee', e)
        },

        // 编辑标绘
        editPlot () {
            this.editPlotVisible = false
@@ -1586,7 +1547,7 @@

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

@@ -1640,11 +1601,6 @@

            this.$refs.DRAWBTNBOX.plotEdit(lineObjdata, 'line')
        },

        // 点击区域
        // polygonClick () {
        //     console.log('polygonClick')
        // },

        // 保存绘制区域
        savePolygonInfo () {
@@ -1731,6 +1687,10 @@
        deleteSecurityPlot (id) {
            deleteSecurityPlot(id).then(res => {
                if (res.data.success) {
                    plotOverlayData.overlay.remove()
                    if('pointOverlayData' in plotOverlayData.overlay.attrParams){
                        plotOverlayData.overlay.attrParams.pointOverlayData.remove()
                    }
                    this.$message({
                        message: '删除成功',
                        type: 'success'
@@ -1741,8 +1701,6 @@
                        type: 'error'
                    })
                }
                this.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch, 'billboard')
                this.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch, 'plot')
            })
        },

@@ -1826,6 +1784,11 @@
            return val / 100
        },

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

    },

    computed: {

 src/views/login/index.vue

@@ -105,8 +105,8 @@
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    {
                        min: 3,
                        max: 10,
                        message: '用户密码长度在3~10个字符之间',
                        // max: 10,
                        message: '用户密码长度至少3位',
                        trigger: 'blur'
                    }
                ]