视频预览更换绘制线面方法、视频巡逻线面数据方法调整

guanqb

2023-02-23 92ae943f1b97e87af74d3a309afef6c66d404ca8

视频预览更换绘制线面方法、视频巡逻线面数据方法调整

 src/api/video/index.js

@@ -96,17 +96,11 @@
 * @param {*} positions 坐标
 * @param {*} name 名称
 */
export const insertRegionSaveList = (type, positions, name, patrol, extent) => {
export const insertRegionSaveList = (params) => {
    return request({
        url: '/api/range/range/insertes',
        method: 'post',
        params: {
            type,
            positions,
            name,
            patrol,
            extent
        }
        params: params
    })
}


 src/views/activity/index.vue

@@ -341,7 +341,7 @@
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video8">设备离线</div>
        </div>
        <div class="deleteVideo" v-show="videoShow" @click="videoShow = false">关闭</div>
        <div class="deleteVideo" v-show="videoShow" @click="closeVideo">关闭</div>

        <el-dialog :title="policeChooseCarTitle" :modal="false" :visible.sync="policeChooseCarVisible"
            :before-close="policeChooseCarBeforeClose" :close-on-click-modal="true" class="choose-policeCar-box">
@@ -1240,7 +1240,10 @@
                layerName: 'polygonLayer',
                type: 'VectorLayer'
            })

            this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'monitoringLayers',
            type: 'VectorLayer'
        })
            if (item.activityArea && item.activityArea.length > 0) {
                let polyGonData = item.activityArea.slice(11, item.activityArea.length - 1)
                polyGonData = polyGonData.replace(/,/g, ";")
@@ -1613,6 +1616,10 @@
            } else {
                this.lineEditVisible = false
            }
            this.$EventBus.$emit('mapRemoveLayer', {
              layerName: 'monitoringLayers',
              type: 'VectorLayer'
            })
        },

        // 保存活动标绘箭头
@@ -1861,6 +1868,7 @@
        getRegionList (positionNewStr) {
            getRegionList({ page: 1, count: 15, range: positionNewStr }).then(res => {
                let monitorData = res.data.data.list
                this.initMonitoringIcon (monitorData) 
                this.monitorOption = []
                monitorData.forEach((item, index) => {
                    let flvAddress = ''
@@ -1883,6 +1891,15 @@
                    })

                })
            })
        },

        // 关闭视频展示
        closeVideo(){
            this.videoShow = false
            this.$EventBus.$emit('mapRemoveLayer', {
              layerName: 'monitoringLayers',
              type: 'VectorLayer'
            })
        },

@@ -1929,6 +1946,23 @@
        saveLineInfo () {
            this.updateActivityCar(this.policeIconId, '', this.chooseColor, this.lineWidth)
            this.lineEditVisible = false
        },

        // 遍历监控图标
        initMonitoringIcon (monitoringList) {
            monitoringList.forEach(item => {
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'monitoringLayers',
                    type: "billboard",
                    params: {
                        name: item.name,
                        lng: item.longitude,
                        lat: item.latitude,
                        alt: 1,
                        url: '/img/icon/video.png',
                    },
                })
            })
        },

        // 修改巡逻路线位置信息
@@ -2109,6 +2143,11 @@
        })

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

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'activeHeatLayer',
            type: 'HeatLayer'
        })

 src/views/video/list.vue

@@ -22,16 +22,7 @@
            <el-button type="primary" size="mini" @click="draw('polygon')">绘制面</el-button>
                <el-button type="primary" size="mini" @click="draw('polyline')">巡查路线</el-button>
                <el-button type="primary" size="mini" @click="removeDrawLayer">清除</el-button>
                <!-- <el-button type="primary" size="mini" @click="saveDraw">保存</el-button> -->
                <el-button type="primary" size="mini" @click="draww('polyline')">绘制测试</el-button>
            </div>
            <!-- <div class="range-input" v-show="inputpopup">
                            <div class="close" @click="closeRangeInput"></div>
                            <h3>请输入距离</h3>
                            <input type="text" v-model="range" />
                            <button @click="changeRange" class="btn">确定</button>
                        </div>-->

            <div class="down-tree">
                <el-scrollbar>
                    <el-tree v-show="searchLazyFlag" :props="props" :load="loadNode" lazy node-key="id"
@@ -93,7 +84,6 @@
            <div v-show="inputpopup">
                <div>距离：</div>
                <input type="text" v-model="range" placeholder="请输入绘制线的范围" />
                <!-- <button @click="changeRange" class="btn">确定</button> -->
            </div>
            <div>
                <button @click="saveDrawInfo">保存</button>
@@ -150,9 +140,7 @@
            inputpopup: false,
            changeBtn: false,
            drawName: '',
            drawInfo: [],
            drawType: 1,
            // saveFlag: true,
            searchExtensivelyValue: '',
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],
@@ -168,6 +156,7 @@
            defaultExpandedKeys: [],
            searchLazyFlag: true,
            searchTreeData: [],
            drawPlotData:{},
        }
    },

@@ -245,7 +234,13 @@

        drawDialogBeforeClose () {
            this.drawName = ''
            this.removeDrawLayer()
            if(drawPlotLayers!=null){
                drawPlotLayers.clear()
            }
            this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'monitoringLayers',
                    type: 'VectorLayer'
            })
            this.drawDialogVisible = false
        },

@@ -267,40 +262,14 @@
            }
        },

        // 封装方法绘制线面 type:polygon/polyline
        // draww (type) {
        //     if (graphicLayer == null) graphicLayer = new EntityDraw()
        //     graphicLayer.activate(type, (lastEventData) => {
        //     })
        // },

        draw (type) {
            let flag = false
            if (graphicLayer == null) graphicLayer = new EntityDraw()

            // this.saveFlag = true
            if (type == 'polyline') {
                this.inputpopup = true
                this.drawType = 1
            } else {
                this.inputpopup = false
                this.drawType = 2
            }
            const that = this


            graphicLayer.activate(type, (lastEventData) => {
                flag = true
                this.drawInfo = lastEventData
                console.log(1111, JSON.stringify(lastEventData))
                this.getRegionList(type, JSON.stringify(lastEventData))
                this.drawDialogVisible = true

                document.oncontextmenu = function () {
                    if (flag) {
                        this.drawDialogVisible = true
                        flag = false
                    }
                    return false
                }
            })

        },

        draww (type) {
            if (type == 'polyline') {
                this.inputpopup = true
                this.drawType = 1
@@ -315,10 +284,13 @@
                    if (overlay) {
                        drawPlotLayers.addOverlay(overlay)
                        plot.edit(overlay, (e) => {
                            console.log('overlay', overlay)
                            this.drawDialogVisible = true
                            this.range = 100
                            this.drawPlotData = overlay
                            document.oncontextmenu = function () {
                                return false
                            }
                            this.getRegionList(type, overlay)
                        })
                    }
                }
@@ -328,9 +300,10 @@
        removeDrawLayer () {
            this.inputpopup = false
            this.monitoringList = this.monitoringSaveList
            graphicLayer.clearLayer()
            // this.saveFlag = true
            this.drawInfo = []
            if(drawPlotLayers!=null){
                drawPlotLayers.clear()
            }  
            this.drawPlotData = []
            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'monitoringLayers',
                type: 'VectorLayer'
@@ -340,8 +313,7 @@
        // 修改范围
        setRegion (range) {
            graphicLayer.addPolyLineGon(range, (lastEventData) => {
                this.drawInfo = lastEventData
                this.getRegionList('polyline', JSON.stringify(lastEventData))
                // this.getRegionList('polyline', JSON.stringify(lastEventData))
            })
        },

@@ -360,17 +332,25 @@

        getRegionList (type, data) {
            let positionStr = ''
            if (type == 'polyline') {
                JSON.parse(data).data.forEach(item => {
                    positionStr = positionStr + item[0] + ',' + item[1] + ';'
                })
            } else {
                JSON.parse(data).data.forEach(item => {
                    positionStr = positionStr + item.lng + ',' + item.lat + ';'
                })
                positionStr = positionStr + JSON.parse(data).data[0].lng + ',' + JSON.parse(data).data[0].lat + ';'
            if(type == 'polyline'){
               data._positions.forEach(item=>{
                   positionStr = positionStr + item._lng + ',' + item._lat + ';'
               })
               console.log('positionStr',positionStr);
               let coords = global.DC.GeoTools.polylineBuffer(positionStr, 100)
               let polygon = new global.DC.Polygon(coords)
               let position = ''
               polygon._positions.forEach(item => {
                   position += item._lng + ',' + item._lat + ';'
               })
               position += polygon._positions[0]._lng +',' + polygon._positions[0]._lat+ ';'
               positionStr = position
            }else{
                data._positions.forEach(item=>{
                   positionStr = positionStr + item._lng + ',' + item._lat + ';'
               })
               positionStr = positionStr + data._positions[0]._lng + ',' + data._positions[0]._lat + ';'
            }

            getRegionList({
                page: 1,
                count: 20,
@@ -392,7 +372,7 @@
         * @return {*}
         */
        initMonitoringIcon () {
            this.monitoringList.forEach((item, index) => {
            this.monitoringList.forEach(item => {
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'monitoringLayers',
                    type: "billboard",
@@ -410,18 +390,6 @@
            })
        },

        // saveDraw () {
        //     if (this.drawInfo.length != 0) {
        //         this.drawDialogVisible = true
        //         this.saveFlag = false
        //     } else {
        //         this.$message({
        //             message: '请先绘制线或者面',
        //             type: 'warning'
        //         })
        //     }
        // },

        // 保存绘制的线面
        saveDrawInfo () {
            if (this.drawName == '') {
@@ -431,47 +399,61 @@
                })
            } else {
                let drawPositionStr = ''
                let drawPositionLineStr = ''
                let extent = 0
                let width = 0

                if (this.drawType == 1) {
                    // 获取线坐标
                    this.drawPlotData._positions.forEach(item => {
                        drawPositionStr += item._lng + ' ' + item._lat+ ','
                    })
                    drawPositionStr = drawPositionStr.slice(0, drawPositionStr.length - 1)
                    // 求线长度
                    let linePosition = []
                    this.drawInfo.lineData.forEach(item => {
                        linePosition.push([item.lng, item.lat])
                    this.drawPlotData._positions.forEach(item => {
                        linePosition.push([item._lng, item._lat])
                    })
                    let line = this.$turf.lineString(linePosition)
                    let length = this.$turf.length(line, { units: 'kilometers' })
                    extent = length.toFixed(3)
                    this.drawInfo.data.forEach(item => {
                        drawPositionStr += item[0] + ' ' + item[1] + ','
                    })
                    this.drawInfo.lineData.forEach(item => {
                        drawPositionLineStr += item.lng + ' ' + item.lat + ','
                    })
                    drawPositionStr = drawPositionStr.slice(0, drawPositionStr.length - 1)
                    drawPositionLineStr = drawPositionLineStr.slice(0, drawPositionLineStr.length - 1)
                } else {
                    this.drawInfo.data.forEach(item => {
                    // 获取面坐标
                    this.drawPlotData._positions.forEach(item => {
                        drawPositionStr += item.lng + ' ' + item.lat + ','
                    })
                    drawPositionStr += this.drawInfo.data[0].lng + ' ' + this.drawInfo.data[0].lat
                    drawPositionStr += this.drawPlotData._positions[0]._lng + ' ' + this.drawPlotData._positions[0]._lat
                    // 求面面积
                    let polygonPosition = []
                    this.drawPlotData._positions.forEach(item => {
                        polygonPosition.push([item._lng, item._lat])
                    })
                    polygonPosition.push([this.drawPlotData._positions[0]._lng,this.drawPlotData._positions[0]._lat])
                    let polygon = this.$turf.polygon([polygonPosition]);
                    let area = this.$turf.area(polygon);
                    extent = area.toFixed(3)
                }

                this.insertRegionSaveList(this.drawType, drawPositionStr, this.drawName, drawPositionLineStr, extent)
                console.log({type:this.drawType, position:drawPositionStr, name:this.drawName, extent: extent,width:this.range},5555,this.drawPlotData._positions);
                this.insertRegionSaveList({type:this.drawType, positions:drawPositionStr, name:this.drawName, extent: extent,width:this.range})
                this.drawDialogVisible = false
                this.drawName = ''
                this.removeDrawLayer()
                if(drawPlotLayers!=null) {
                   drawPlotLayers.clear()
                }
                this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'monitoringLayers',
                    type: 'VectorLayer'
                })
            }
        },

        // 取消绘制线面
        cancelSaveDrawInfo () {
            this.removeDrawLayer()
            this.drawDialogVisible = false
            this.drawDialogBeforeClose () 
        },

        insertRegionSaveList (type, positions, name, patrol, extent) {
            insertRegionSaveList(type, positions, name, patrol, extent).then(res => {
        // type线面类型, positions坐标, name名称, width线宽度, extent线长度或面面积
        insertRegionSaveList (parmas) {
            insertRegionSaveList(parmas).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '保存成功',

 src/views/video/region.vue

@@ -31,7 +31,7 @@
                                :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
                                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                                <el-table-column prop="name" label="范围名称" min-width="50%"></el-table-column>
                                <el-table-column prop="extent" label="长度/km" min-width="50%">
                                <el-table-column prop="extent" label="长度km/面积" min-width="50%">
                                    <!-- <template slot-scope="scope">
                                                    <span>{{ scope.row.extent }}</span>
                                                    <span>千米</span>
@@ -452,25 +452,36 @@
            })

            this.saveRangeList.forEach(item => {
                let positionStr = this.convertPositionDate(item.positions, 'polygon')
                let polygonName = 'polygon' + item.id
                this.$EventBus.$emit('layerPolygonAdd', {
                let positionStr = ''
                if(item.type == 1){
                   let linePositionStr = ''
                   linePositionStr = item.positions.replace(/,/g,';')
                   linePositionStr = linePositionStr.replace(/ /g, ',')
                   linePositionStr +=';'
                    this.$EventBus.$emit('layerPolylineAdd', {
                    layerName: 'rangeLayer',
                    positions: positionStr,
                    material: global.DC.Namespace.Cesium.Color.fromBytes(
                        255, 0, 0, 100
                    ),
                    polygonName: polygonName
                })

                let polygonLine = this.convertPositionDate(item.patrol, 'line')
                this.$EventBus.$emit('layerPolylineAdd', {
                    layerName: 'rangeLayer',
                    positions: polygonLine,
                    positions: linePositionStr,
                    material: global.DC.Color.YELLOW.withAlpha(0.8),
                    width: 1,
                    })
                   let coords = global.DC.GeoTools.polylineBuffer(linePositionStr, 100)
                   let polygon = new global.DC.Polygon(coords)
                   let position = ''
                   polygon._positions.forEach(item => {
                       position += item._lng + ',' + item._lat + ';'
                   })
                   positionStr = position
                }else{
                    positionStr = this.convertPositionDate(item.positions, 'polygon')
                }
                this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'rangeLayer',
                        positions: positionStr,
                        material: global.DC.Namespace.Cesium.Color.fromBytes(
                            255, 0, 0, 100
                        ),
                        polygonName: 'polygon' + item.id
                })

            })

        },