forked from srs-police-affairs
| src/views/activity/components/drawBtnBox.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/activity/index.vue | ●●●●● patch | view | raw | blame | history |
src/views/activity/components/drawBtnBox.vue
@@ -77,8 +77,6 @@ <el-button @click="cancelSaveLabel">取消</el-button> </div> </el-dialog> </div> </template> @@ -96,6 +94,8 @@ let isAddLabel = false let curLabelOverLayer = null let drawLabelStatus = 'end' let labelPositionChange = false export default { props: [ @@ -103,11 +103,11 @@ 'policeSwitch', 'polylineBtnSwitch', 'arrowBtnSwitch', 'policeIconId', 'lineWidth'], data() { data () { return { addLabelVisible:false,// 文字标注的窗口（内容是名称） labelInput:'', addLabelPosition:null, addLabelVisible: false,// 文字标注的窗口（内容是名称） labelInput: '', addLabelPosition: null, } }, @@ -127,6 +127,9 @@ } global.viewer.on(global.DC.MouseEventType.CLICK, this.viewerClick) global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.viewerLableMove) global.viewer.on(global.DC.MouseEventType.LEFT_UP, this.labelUp) }) }, @@ -157,7 +160,7 @@ flag = true overlay.on(global.DC.MouseEventType.CLICK, this.overlayTypeClick) overlay.on(global.DC.MouseEventType.CLICK, this.$parent.overlayTypeClick) overlay.drawType = poltType @@ -381,12 +384,38 @@ }) }, drawArrowLabel(){ drawArrowLabel () { isAddLabel = true this.$message({ message: '请在地图上单击选择标注位置', type: 'warning' }) drawLabelStatus = 'start' global.viewer.tooltip.enable = true this.$emit('drawLabel', drawLabelStatus) }, /** * @description: 点击覆盖物获取到的位置信息 * @param {*} e * @return {*} */ overlayClickPosition (e) { this.labelShowPopup(e) }, /** * @description: 点击地图拿到的位置信息 * @param {*} e * @return {*} */ viewerClick (e) { if (drawLabelStatus == 'start') { this.labelShowPopup(e) } }, labelShowPopup (e) { this.addLabelVisible = true this.addLabelPosition = e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat + ',' + e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat global.viewer.tooltip.enable = true }, // 文字标注窗口的添加按钮 @@ -397,8 +426,8 @@ type: 'error' }) } else { this.$parent.addSecurityPlot({ securityId: this.showingSecurityId, position: this.addLabelPosition, type: 9,name: this.labelInput}) this.cancelSaveLabel() this.$parent.addSecurityPlot({ securityId: this.showingSecurityId, position: this.addLabelPosition, type: 9, name: this.labelInput }) this.cancelSaveLabel() } // --------------------------- // 调用接口进行保存 @@ -418,38 +447,47 @@ // }) }, labelDowm (e) { // 保存当前按下的文字标注 curLabelOverLayer = e // e里面的东西（overlayer) lableAllEvent (label) { label.on(global.DC.MouseEventType.LEFT_DOWN, this.labelDowm) }, viewerLableMove (e) { // 根据e里面的坐标信息，设置当前鼠标按下的文字标注位置 // curLabelOverLayer 的坐标 = e 的坐标 labelDowm (e) { labelPositionChange = true curLabelOverLayer = e.overlay global.viewer.scene.screenSpaceCameraController.enableRotate = false global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.updateLableMove) }, labelUp (e) { global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.viewerLableMove) // 调接口，更新数据， 不要再去调接口全查了 if (labelPositionChange == true) { global.viewer.scene.screenSpaceCameraController.enableRotate = true global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.updateLableMove) // upDateLable().then(res => { // }) }, viewerClick(e) { if(isAddLabel){ this.addLabelPosition = e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat + ',' + e.wgs84SurfacePosition.lng + ' ' + e.wgs84SurfacePosition.lat this.addLabelVisible = true isAddLabel = false // curLabelOverLayer 中的位置就是移动后的位置 } }, updateLableMove (e) { curLabelOverLayer.position = { lng: e.wgs84SurfacePosition.lng, lat: e.wgs84SurfacePosition.lat, alt: e.wgs84SurfacePosition.alt, heading: curLabelOverLayer.position.heading, pitch: curLabelOverLayer.position.pitch, roll: curLabelOverLayer.position.roll, } }, viewerLableMove (e) { isAddLabel == true && global.viewer.tooltip.showAt(e.windowPosition, '单击选择文字标注位置') }, // 关闭添加标注弹窗 cancelSaveLabel(){ cancelSaveLabel () { isAddLabel = false this.addLabelVisible = false drawLabelStatus = 'end' } }, @@ -461,6 +499,8 @@ drawArrowLayers = null global.viewer.off(global.DC.MouseEventType.CLICK, this.viewerClick) global.viewer.off(global.DC.MouseEventType.MOUSE_MOVE, this.viewerLableMove) global.viewer.off(global.DC.MouseEventType.LEFT_UP, this.labelUp) }, } </script> src/views/activity/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-08 10:32:34 * @LastEditTime: 2023-03-08 16:18:18 * @FilePath: \srs-police-affairs\src\views\activity\index.vue * @Description: 安保活 * @@ -72,7 +72,7 @@ <draw-btn-box ref="DRAWBTNBOX" :dialogVisible="dialogVisible" :isShowActivityEditBox="isShowActivityEditBox" :showingSecurityId="showingSecurityId" :policeSwitch="policeSwitch" :polylineBtnSwitch="polylineBtnSwitch" :arrowBtnSwitch="arrowBtnSwitch" :policeIconId="policeIconId" :lineWidth="lineWidth" @setOverlayObj="setOverlayObj" @setPoliceOption="setPoliceOption"></draw-btn-box> @setOverlayObj="setOverlayObj" @drawLabel="drawLabel" @setPoliceOption="setPoliceOption"></draw-btn-box> <div class="second-container" :class="{ 'spread': boxShow, 'take-back': !boxShow }"> <el-tree :data="treeData" show-checkbox node-key="id" @check="treeCheckClick"></el-tree> @@ -264,7 +264,7 @@ let policecarOption = [] let cameraList = [] let carList = [] let drawLabelStatus = 'end' export default { inject: ['userInfo'], @@ -525,8 +525,8 @@ global.viewer.addLayer(polylineAreaLayer) } }) }, @@ -830,8 +830,9 @@ position = position.split(';')[0].split(',') position = new global.DC.Position(Number(position[0]), Number(position[1])) let label = new global.DC.Label(position, item.name) label.on(global.DC.MouseEventType.RIGHT_UP, this.$refs.DRAWBTNBOX.labelUp) label.on(global.DC.MouseEventType.RIGHT_DOWN, this.$refs.DRAWBTNBOX.labelDowm) label.on(global.DC.MouseEventType.LEFT_UP, e => console.log(e)) this.$refs.DRAWBTNBOX.lableAllEvent(label) arrowsListLayer.addOverlay(label) } if (chooseArrow != null) { @@ -1440,6 +1441,10 @@ } }, drawLabel (status) { drawLabelStatus = status }, // 地图绘制元素点击事件 overlayTypeClick (e) { if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) { @@ -1519,22 +1524,26 @@ // 单击。标绘箭头 reeditArrowClick (e) { plotOverlayData = e this.choosePlotColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color.slice(0, 7) : '#409EFF' this.choosePlotColorAlpha = e.overlay.attrParams.color != '' ? Number(e.overlay.attrParams.color.split(',')[1]) : 100 if (e.overlay.attrParams.item.type == 5) { this.polygonAreaType = e.overlay.attrParams.item.areaType != '' ? e.overlay.attrParams.item.areaType : 1 this.isNeedPolygonType = true if (drawLabelStatus == 'start') { this.$refs.DRAWBTNBOX.overlayClickPosition(e) } else { this.isNeedPolygonType = false } plotOverlayData = e // this.polygonName = e.overlay.attrParams.name if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) { this.plotId = e.overlay.attrParams.id this.editPlotVisible = true this.choosePlotColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color.slice(0, 7) : '#409EFF' this.choosePlotColorAlpha = e.overlay.attrParams.color != '' ? Number(e.overlay.attrParams.color.split(',')[1]) : 100 if (e.overlay.attrParams.item.type == 5) { this.polygonAreaType = e.overlay.attrParams.item.areaType != '' ? e.overlay.attrParams.item.areaType : 1 this.isNeedPolygonType = true } else { this.isNeedPolygonType = false } // this.polygonName = e.overlay.attrParams.name if (this.userInfo.dept_id == '1123598813738675201' || this.userInfo.dept_id == this.activityDeptId) { this.plotId = e.overlay.attrParams.id this.editPlotVisible = true } } }, @@ -1628,7 +1637,7 @@ positionStr = this.arrowPositionStr } else if (this.plotSaveType == 5) { positionStr = this.polygonPositionStr } else if (this.plotSaveType == 6 || this.plotSaveType == 7 || this.plotSaveType == 8 ) { } else if (this.plotSaveType == 6 || this.plotSaveType == 7 || this.plotSaveType == 8) { positionStr = this.plotPointPositionStr + ',' + this.plotPointPositionStr } this.addSecurityPlot({ securityId: this.showingSecurityId, position: positionStr, type: this.plotSaveType, color: this.choosePlotColor + ',' + this.choosePlotColorAlpha, areaType: this.polygonAreaType })
