视频监控中视频预览添加范围聚合功能

shuishen

2023-02-13 20d39c274c849c9d5bed01fe436568ba46c636f3

视频监控中视频预览添加范围聚合功能

 src/api/video/index.js

@@ -164,4 +164,23 @@
            ...params
        }
    })
}
}

/**
 * 获取监控树形数据附近数据
 * @param {*} 
 * @returns 
 */
export const getTreeDevicesNearby = (params) => {
    return request({
        url: '/api/deviceChannel/deviceChannel/getDeviceChannelByMileage',
        method: 'get',
        params: {
            // 内网
            deviceId: '36110000002009999000',
            // 外网
            // deviceId: '34020000002000000003',
            ...params
        }
    })
}

 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-02-09 14:52:36
 * @LastEditTime: 2023-02-13 10:51:47
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -218,15 +218,15 @@
            that.switchImg()

            // 外网
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
            //         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            //         format: 'image/jpeg',
            //         show: true,
            //         maximumLevel: 18
            //     })
            // )
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )

            // 设置地图初始位置，角度等
            global.viewer.camera.setView({
@@ -556,7 +556,9 @@
            } else if (type == 'ClusterLayer') {
                if (!layersObjcect[layerName]) layersObjcect[layerName] = null

                layersObjcect[layerName] = new global.DC.ClusterLayer(layerName)
                layersObjcect[layerName] = new global.DC.ClusterLayer(layerName, {
                    pixelRange: 4
                })

                layersObjcect[layerName].addTo(global.viewer)
            } else if (type == 'HeatLayer') {
@@ -611,6 +613,7 @@
            }

            let pointElement
            let labelElement

            if (type == "billboard") {
                pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.url)
@@ -619,8 +622,8 @@
                layersObjcect[layerName].addOverlay(pointElement)
                pointElement.on(global.DC.MouseEventType.CLICK, incident)
            } else if (type == "label") {
                pointElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text)
                pointElement.setStyle({
                labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text)
                labelElement.setStyle({
                    fillColor: global.DC.Color.CRIMSON,
                    style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                    outlineColor: global.DC.Color.WHITE, // 边框颜色
@@ -629,9 +632,28 @@
                    pixelOffset: { x: 0, y: -30 },
                    distanceDisplayCondition: distanceDisplayCondition
                })
                labelElement.attrParams = params
                layersObjcect[layerName].addOverlay(labelElement)
                labelElement.on(global.DC.MouseEventType.CLICK, incident)
            } else if (type == "billboardOrLabel") {
                pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.url)
                pointElement.size = [32, 32]
                pointElement.attrParams = params
                layersObjcect[layerName].addOverlay(pointElement)
                pointElement.on(global.DC.MouseEventType.CLICK, incident)

                labelElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.text)
                labelElement.setStyle({
                    fillColor: global.DC.Color.CRIMSON,
                    style: global.DC.Namespace.Cesium.LabelStyle.FILL_AND_OUTLINE,
                    outlineColor: global.DC.Color.WHITE, // 边框颜色
                    outlineWidth: 4, // 边框大小，
                    font: '16px sans-serif',
                    pixelOffset: { x: 0, y: -30 }
                })
                labelElement.attrParams = params
                layersObjcect[layerName].addOverlay(labelElement)
                labelElement.on(global.DC.MouseEventType.CLICK, incident)
            } else if (type == 'HeatPoint') {
                layersObjcect[layerName].setPositions(params.positions)
            }

 src/views/video/list.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-11 15:23:52
 * @LastEditTime: 2023-02-13 11:05:29
 * @FilePath: \srs-police-affairs\src\views\video\list.vue
 * @Description: 辖区管理
 * 
@@ -199,7 +199,15 @@
<script>
import EntityDraw from "@/utils/EntityDraw.js"
import { listQuery, accurateSearch } from "@/utils/search.js"
import { getVideoList, getDevices, getRegionList, insertRegionSaveList, getTreeDevices, getSearchTreeDevices } from '@/api/video/index.js'
import {
    getVideoList,
    getDevices,
    getRegionList,
    insertRegionSaveList,
    getTreeDevices,
    getSearchTreeDevices,
    getTreeDevicesNearby
} from '@/api/video/index.js'
import { getSearchExtensively } from '@/api/dept/index.js'
import flvjs from 'flv.js'

@@ -674,6 +682,8 @@
        async treeClick (node) {
            if (node.parent == true) return

            const { longitude, latitude } = node

            this.$EventBus.$emit('toPosition', {
                siteJd: node.longitude,
                siteWd: node.latitude,
@@ -681,12 +691,17 @@
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                layerName: 'treeValLayer',
                type: 'VectorLayer'
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'treeValAllLayer',
                type: 'VectorLayer'
            })

            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                layerName: 'treeValLayer',
                type: 'label',
                params: {
                    lng: node.longitude,
@@ -697,18 +712,43 @@
            })

            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                layerName: 'treeValLayer',
                type: "billboard",
                params: {
                    name: node.name,
                    lng: node.longitude,
                    lat: node.latitude,
                    alt: 100,
                    alt: 0,
                    url: '/img/icon/video.png',
                    channelId: node.id
                },
                incident: this.siteClick
            })

            getTreeDevicesNearby({ longitude, latitude, mileage: 1 }).then(res => {

                res.data.data.forEach(item => {
                    if (item.longitude && item.latitude) {
                        this.$EventBus.$emit('layerPointAdd', {
                            layerName: 'treeValAllLayer',
                            type: "billboard",
                            layerType: 'ClusterLayer',
                            params: {
                                ...item,
                                text: item.name,
                                lng: item.longitude,
                                lat: item.latitude,
                                alt: 0,
                                url: '/img/icon/video.png',
                                channelId: node.id
                            },
                            incident: this.siteClick
                        })
                    }
                })

            })

        },
    },

@@ -723,6 +763,16 @@
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'treeValLayer',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'treeValAllLayer',
            type: 'VectorLayer'
        })

        graphicLayer.destroy()

        this.$parent.$parent.$parent.resize('0px')