import { lodLayer, viewer } from '@/components/dt-scene/index.vue' import Menus from '@/components/menus/index.vue' import Tools from '@/components/tools/index.vue' import DtScene from '@/components/dt-scene/index.vue' import InfoBar from '@/components/info-bar/index.vue' import TwinSituation from './components/twin-situation/index.vue' import TaskManage from './components/task-manage/index.vue' import PicturesList from './components/pictures-list/index.vue' import deviceManage from './components/device-manage/index.vue' import deviceManage1 from './components/device1-manage/index.vue' import userList from './components/user-list/index.vue' // 新增空间态势统计 // 台风列表 import SceneInfo from '@/mixin/scene-info' import { mapMutations, mapGetters, mapActions } from 'vuex' import * as DT from 'dt-sdk' import moment from 'moment' import { connectWebSocket, disconnectWebSocket } from '@/utils/web-socket' import { ICON_MODE } from '@/enum' import { getResourceList } from '@/api/home' import { getWeatherInfo } from '@/api/user' import axios from 'axios' let handler = undefined let broadcastChannel = null let broadcastChannelInterval = null let radarViewer = null let radarLayer = null let socketInstance = null let stompClientInstance = null let entityCollection = new DT.Cesium.AssociativeArray() let linePicture = {} let currentPicture = null let shipEntities = new DT.Cesium.AssociativeArray() let aisCollection = [] export default { name: 'Home', components: { Menus, Tools, DtScene, InfoBar, TwinSituation, TaskManage, PicturesList, deviceManage, deviceManage1, userList }, mixins: [SceneInfo], data() { return { timelineConfig: { height: 90 }, //menus组件 配置 menus: { situation: { index: 0, name: '系统主页', icon: 'ri-home-7-line', // defaultColor: 'rgba(75, 236, 255, 1)', defaultColor: 'rgb(255,255,255)', active: true, group: 'top' }, deviceManage: { index: 1, name: '设备管理', icon: 'ri-radar-line', // defaultColor: 'rgb(230,157,55)', defaultColor: 'rgb(255,255,255)', active: false, group: 'top' }, taskManage: { index: 2, name: '任务管理', icon: 'ri-function-line', // defaultColor: 'rgb(230,157,55)', defaultColor: 'rgb(255,255,255)', active: false, group: 'top' }, pictures: { index: 3, name: '图片管理', icon: 'ri-file-image-line', // defaultColor: 'rgb(217,52,173)', defaultColor: 'rgb(255,255,255)', active: false, group: 'top' }, userList: { index: 4, name: '用户管理', icon: 'ri-file-image-line', defaultColor: 'rgb(255,255,255)', active: false, group: 'top' } // rightManage: { // index: 0, // name: '权限', // icon: 'iconfont icon-gongju1', // defaultColor: 'rgb(27,229,41)', // active: false, // group: 'top' // } // timeline: { // index: 99, // name: '时间轴', // icon: 'ri-time-fill', // defaultColor: '#42b555', // active: false, // group: 'bottom' // } }, loadingCount: 0, sceneComplete: false, multiplierStep: [1, 3, 5, 10, 30, 60, 180, 300], // 工具栏场景加速步长数组 // 工具栏插槽按钮 tools: [ { name: '能力', type: 'ability', active: false, show: false, iconDefault: 'iconfont icon-kongjianzhichi', iconActive: 'iconfont icon-kongjianzhichi' }, { name: '实体名称', type: 'entityName', active: true, show: true, iconDefault: 'ri-lightbulb-line', iconActive: 'ri-lightbulb-flash-line' } ], hasRightPanel1: false, hasRightPanel2: false, activeTabs: [], resourceList: { visible: true, activeTabId: 1, groupList: [ { name: '全部', id: 1 }, { name: '小队1', id: 2 }, { name: '小队2', id: 3 }, { name: '小队3', id: 4 }, { name: '小队4', id: 5 }, { name: '小队5', id: 6 }, { name: '小队6', id: 7 } ], data: [], // typeDict: { // 1: '小队', // 2: '无人机', // 3: '人', // 4: '救援车', // 5: '消防车' // }, typeDict: { 1: '无人机', 2: '消防车', 3: '成员' } }, taskList: { visible: true, data: [ { id: 1, executeIcon: 'ri-dv-line', executeName: '无人机1', typeIcon: 'el-icon-camera', taskName: '拍照任务', taskProgress: 30, isFinish: false, taskProgressName: '30%', executeClass: '2', taskTime: '2024-12-28 14:00:00' }, ] }, weatherInfo: { visible: false, warning: '', windDirection: '东南风', airQuality: '50', hourForecast: [], windForecast: [2, 2, 3, 3.1, 1, 0.8], rainForecast: [0, 0, 0, 0, 0, 0], chart: { data: [ { type: 'line', name: '能见度', symbol: 'none', areaStyle: { color: '#81d3f8' }, style: { color: '#81d3f8', }, lineStyle: { color: '#81d3f8', }, data: [ [0, 80], [1, 80], [2, 68], [3, 60], [4, 58], [5, 40], ] } ], tooltip: { show: false }, legend: [{ show: false }], title: [{ show: false }], grid: [{ left: 0, top: 0, right: 0, bottom: 0, borderWidth: 0 }], xAxis: [ { type: 'value', min: 0, max: 5, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false }, } ], yAxis: [ { type: 'value', min: 0, max: 100, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false }, } ] } }, weatherInfo2: { visible: true, wendu: '-', shidu: '-', quality: '-', pm25: '-', pm10: '-', weekData: [], chart: { data: [ { type: 'line', name: '温度', symbol: 'none', areaStyle: { color: '#81d3f8' }, style: { color: '#81d3f8', }, lineStyle: { color: '#066893', }, data: [ ] } ], tooltip: { show: false }, legend: [{ show: false }], title: [{ show: false }], grid: [{ left: 0, top: 0, right: 0, bottom: 0, borderWidth: 0 }], xAxis: [ { type: 'value', min: 0, // max: 5, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false }, } ], yAxis: [ { type: 'value', min: 0, max: 60, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: true }, splitLine: { show: false }, } ] } }, radarInfo: { visible: true, }, availableList: [ { id: 1, name: '成员2' }, { id: 2, name: '成员3' } ], groupForm: { groupId: undefined, visible: false, name: '', children: [], description: '', }, groupFormRules: { name: [ { required: true, message: '请输入名称', trigger: 'blur' }, { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' } ], children: [ { required: true, message: '请选择组员', trigger: 'change' }, ], }, detailInfo: { visible: false, baseInfo: {}, taskList: [ { id: 1, executeIcon: 'ri-dv-line', executeName: '无人机1', typeIcon: 'el-icon-camera', taskName: '拍照任务', taskProgress: 30, isFinish: false, taskProgressName: '30%', executeClass: '2', taskTime: '2024-12-28 14:00:00' }, { id: 6, executeIcon: 'ri-dv-line', executeName: '无人机1', typeIcon: 'el-icon-camera', taskName: '拍照任务', taskProgress: 100, isFinish: true, taskProgressName: '完成', executeClass: '2', taskTime: '2024-12-27 15:00:00' }, ], pictureList: [ require('@/assets/img/test.png'), require('@/assets/img/test.png'), require('@/assets/img/test.png'), require('@/assets/img/test.png'), require('@/assets/img/test.png'), ] }, messageBox: { visible: false, showRecord: false, name: '', content: '', id: '', }, reqQueue: [], isSending: false, chartInfo: { unRead: 0, visible: false, }, aisBoat: { visible: false, data: [], boatTypeLegend: [] }, moveInfoBar: false } }, computed: { ...mapGetters([ 'currentTime', 'iconMode', 'showSatelliteLabel', 'shouldAnimate', 'multiplier', 'showTrack', 'showFrontier', 'showDayNight', 'showLonLatGrid', 'viewMode', 'showRoadNet', 'isFullscreen', 'iconMode', 'showGlobalAtmosphere', 'duringPlay', 'theme', 'showCloud', 'mapType', 'userId', 'splitVisible', 'menusChose' ]), isIconModeLarge() { return this.iconMode === ICON_MODE.LARGE } }, watch: { menusChose: { handler: function (nv) { window.localStorage.setItem('menusChose', nv) switch (nv) { case '1': this.menus.situation.active = true this.menus.taskManage.active = false this.menus.pictures.active = false this.menus.deviceManage.active = false this.menus.userList.active = false break case '2': this.menus.deviceManage.active = true this.menus.situation.active = false this.menus.taskManage.active = false this.menus.pictures.active = false this.menus.userList.active = false break case '3': this.menus.taskManage.active = true this.menus.situation.active = false this.menus.pictures.active = false this.menus.deviceManage.active = false this.menus.userList.active = false break case '4': this.menus.pictures.active = true this.menus.taskManage.active = false this.menus.situation.active = false this.menus.deviceManage.active = false this.menus.userList.active = false break case '5': this.menus.userList.active = true this.menus.pictures.active = false this.menus.taskManage.active = false this.menus.situation.active = false this.menus.deviceManage.active = false break; } }, }, // viewMode(nv) { // this.sendMessageByBroadcastChannel({ type: 'viewMode', form: 'home', value: nv }) // }, // showDayNight(nv) { // this.sendMessageByBroadcastChannel({ type: 'showDayNight', form: 'task', value: nv }) // }, // showFrontier(nv) { // this.sendMessageByBroadcastChannel({ type: 'showFrontier', form: 'task', value: nv }) // }, // showLonLatGrid(nv) { // this.sendMessageByBroadcastChannel({ type: 'showLonLatGrid', form: 'task', value: nv }) // }, // isFullscreen(nv) { // this.sendMessageByBroadcastChannel({ type: 'isFullscreen', form: 'task', value: nv }) // }, // mapType(nv) { // this.sendMessageByBroadcastChannel({ type: 'mapType', form: 'task', value: nv }) // }, }, created() { const menusChose = window.localStorage.getItem('menusChose') this.SET_MENUS_CHOSE(menusChose) // this.init() // this.getResourceData() // 获取字典 this.getDict() }, mounted() { // this.$refs.tools.handleMapChange('sat') // this.createBroadcastChannel() // TODO 部署打开 // window.open(window.config.homeUrl + 'task', '_blank') // window.open(window.config.homeUrl + 'monitor', '_blank') // TODO // this.resourceClick(this.resourceList.data[0]) return; viewer.entities.add({ show: true, id: 'image1', name: '美女1', rectangle: { coordinates: DT.Cesium.Rectangle.fromDegrees( 115.914508, 40.357867, 115.916869, 40.361485 ), height: 0, material: new DT.Cesium.ImageMaterialProperty({ image: process.env.BASE_URL + 'static/img/meinv.png', transparent: 1 }) } }) viewer.entities.add({ show: true, id: 'image2', name: '美女2', rectangle: { coordinates: DT.Cesium.Rectangle.fromDegrees( 115.914508, 40.357867, 115.916869, 40.361485 ), height: 100, material: new DT.Cesium.ImageMaterialProperty({ image: process.env.BASE_URL + 'static/img/meinv.png', }) } }) }, beforeDestroy() { if (handler) { handler.removeInputAction(DT.Cesium.ScreenSpaceEventType.LEFT_CLICK) } if (stompClientInstance) { disconnectWebSocket(stompClientInstance) socketInstance = null stompClientInstance = null } // if (broadcastChannel) { // this.closeBroadcastChannel() // } linePicture = {} currentPicture = null aisCollection = [] }, methods: { ...mapMutations('scene-control', [ 'SET_SWITCH', 'SET_ANIMATE', 'SET_MULTIPLIER', 'SET_TRACK', 'SET_FRONTIER', 'SET_DAY_NIGHT', 'SET_LON_LAT_GRID', 'SET_VIEW_MODE', 'SET_FULL_SCREEN', 'SET_ROAD_NET', 'SET_INIT_STATE', 'SET_GLOBAL_ATMOSPHERE_SHOW', 'SET_SATELLITE_LABEL', 'SET_INTER_VISIBLE', 'SET_VIEWABLE_VISIBLE', 'SET_CLOUD', 'SET_MAP_TYPE', 'SET_SPLIT_VISIBLE', ]), ...mapMutations('app', ['SET_THEME', 'SET_MENUS_CHOSE']), ...mapActions('dict', ['getDict']), // 工具栏操作 toggleTools(tool) { tool.active = !tool.active switch (tool.type) { case 'entityName': this.handleGlobeLabelVisible(tool.active) break case 'ability': this.abilityShow = tool.active break } }, /** * 菜单点击事件 * @author wangxueshen * @date 2022-04-29 * @param {any} menu * @param {any} active * @returns {any} */ menuClick(menu, active) { const blackList = ['setting', 'timeline'] if (blackList.includes(menu.type)) return switch (menu.type) { case 'situation': // 遥感卫星能力展示 this.menus.taskManage.active = false this.menus.pictures.active = false this.menus.deviceManage.active = false break case 'taskManage': this.menus.situation.active = false this.menus.pictures.active = false this.menus.deviceManage.active = false break case 'pictures': this.menus.taskManage.active = false this.menus.situation.active = false this.menus.deviceManage.active = false break case 'deviceManage': this.menus.situation.active = false this.menus.taskManage.active = false this.menus.pictures.active = false break } }, handleSceneComplete() { let that = this this.$nextTick(() => { this.SET_DAY_NIGHT(false) this.sceneComplete = true // this.addHandler() // this.$refs.tools.handleMapChange('sat') let position = DT.Cesium.Cartesian3.fromDegrees(window.config.defaultLocation[0], window.config.defaultLocation[1], 1000) viewer.cesiumViewer.scene.camera.flyTo({ destination: position, duration: 1 }) viewer.cesiumViewer.scene.imagerySplitPosition = 1.0 // this.temp() // this.createRadar() // this.testLine() // 移动相机 // viewer.cesiumViewer.scene.camera.moveBackward(10000000) // 加载湘江流域3Dtiles场景 // loadXJLYSceneasync(DT) // viewer.cesiumViewer.scene.camera.changed.addEventListener(function(ev) { // that.refreshRadar() // }) }) // this.startWebSocket() // this.createWebsocket() }, temp() { let position1 = [ 119.767992, 35.588417, 119.767992, 35.566652, 119.799480, 35.566652, 119.799480, 35.588417, ]; let test1Entity = viewer.entities.add({ id: 'test1', polygon: { // hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data), hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(position1), perPositionHeight: true, material: new DT.Cesium.ImageMaterialProperty({ image: process.env.BASE_URL + 'static/img/test5.png', color: DT.Cesium.Color.fromCssColorString('rgba(255,255,255,0.95)') }),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5), outline: false, // outlineColor: DT.Cesium.Color.WHITE, outlineWidth: 2, //很多电脑当宽度>1时，没用 } }); let position2 = [ 119.745771, 35.608493, 119.745771, 35.589935, 119.750658, 35.589935, 119.750658, 35.608493, ]; let test2Entity = viewer.entities.add({ id: 'test2', polygon: { // hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data), hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(position2), perPositionHeight: true, material: new DT.Cesium.ImageMaterialProperty({ image: process.env.BASE_URL + 'static/img/temp2.jpg', }),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5), outline: false, outlineColor: DT.Cesium.Color.WHITE, outlineWidth: 2, //很多电脑当宽度>1时，没用 } }); let obj = { test1: test1Entity, test2: test2Entity, } let currentPicture = null let pictureHandler = new DT.Cesium.ScreenSpaceEventHandler( viewer.cesiumViewer.scene.canvas ) pictureHandler.setInputAction(({ position }) => { let pick = viewer.cesiumViewer.scene.pick(position) if (pick && pick.id && pick.id.id && pick.id.id.indexOf('test') !== -1) { let show = obj[pick.id.id].show currentPicture = obj[pick.id.id] currentPicture.show = !show } else { if (currentPicture) { currentPicture.show = !currentPicture.show } } }, DT.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK) }, getWeather() { getWeatherInfo().then(res => { console.log('000000000000', res) if (res.data.code === 200) { let data = res.data.data this.weatherInfo2.wendu = data.wendu this.weatherInfo2.shidu = data.shidu this.weatherInfo2.quality = data.quality this.weatherInfo2.pm25 = data.pm25 this.weatherInfo2.pm10 = data.pm10 let list = data.forecast.slice(0, 5) let chart = [] list.forEach((item, index) => { let low = item.low.split(' ')[1] let high = item.high.split(' ')[1] item.temperatureRange = [low, high] // chart.push([item.week, parseFloat(high)]) chart.push([index, parseFloat(high)]) }) this.weatherInfo2.weekData = list this.weatherInfo2.chart.data[0].data = chart console.log('数据', this.weatherInfo2.chart.data) this.$refs.chart.updateData(this.weatherInfo2.chart.data) } else { this.$message.error(res.data.message) } }) }, /** * @description 添加地面站点击事件 * @author wzw * @date 2022年3月30日 */ addHandler() { let that = this handler = new DT.Cesium.ScreenSpaceEventHandler( viewer.cesiumViewer.scene.canvas ) handler.setInputAction(event => { let evt = viewer.cesiumViewer.scene.pick(event.position) // 卫星和地面站的点击事件 if (evt && evt.primitive && evt.primitive.entityId) { let id = evt.primitive.entityId // 点击的是地面站 if (id.includes('station')) { // 激活实体详情面板 if (!this.visible.entityDetail) { this.visible.entityDetail = true } let data = undefined for (let i = 0; i < this.sceneInfo.stationList.length; i++) { if ('station-' + this.sceneInfo.stationList[i].staId === id) { data = JSON.parse(JSON.stringify(this.sceneInfo.stationList[i])) break } } } // 点击的是卫星 if (id.includes('satellite')) { // 激活实体详情面板 if (!this.visible.entityDetail) { this.visible.entityDetail = true } let satId = id.split('-')[1] let satelliteInfo = this.sceneInfo.satelliteList.find( item => item.satId === +satId ) let info = JSON.parse(JSON.stringify(satelliteInfo)) this.showSatelliteInfo(info) } } // 覆盖范围属于那个卫星的提示框 if (evt && evt.id && evt.id.id.includes('area')) { let position1 let feature = viewer.cesiumViewer.scene.pick(event.position) if (feature) { position1 = viewer.cesiumViewer.scene.pickPosition(event.position) } else { let ray = viewer.cesiumViewer.scene.camera.getPickRay( event.position ) position1 = viewer.cesiumViewer.scene.globe.pick( ray, viewer.cesiumViewer.scene ) } let cartographic = viewer.cesiumViewer.scene.globe.ellipsoid.cartesianToCartographic( position1 ) let id = evt.id.id let isExist = that.eventTips.findIndex(item => { return item.id === id }) if (isExist !== -1) { that.eventTips[isExist].showAnimation = false that.eventTips[isExist].position = [ DT.Cesium.Math.toDegrees(cartographic.longitude), DT.Cesium.Math.toDegrees(cartographic.latitude), 500 ] Reflect.deleteProperty(that.eventTips[isExist], 'disappearTime') Reflect.deleteProperty(that.eventTips[isExist], 'animationTime') } else { that.eventTips.push({ id, name: evt.id.name, show: true, showAnimation: false, position: [ DT.Cesium.Math.toDegrees(cartographic.longitude), DT.Cesium.Math.toDegrees(cartographic.latitude), 500 ] }) } } else { that.eventTips.forEach(item => { item.animationTime = moment().format('YYYY-MM-DD HH:mm:ss') item.disappearTime = moment() .add(2, 's') .format('YYYY-MM-DD HH:mm:ss') }) } }, DT.Cesium.ScreenSpaceEventType.LEFT_CLICK) }, /*********************业务代码**********************/ //#region 测试代码 testLine() { let lineData = [ { lon: 116.538201, lat: 40.141529 }, { lon: 116.538216, lat: 40.143778 }, { lon: 116.546478, lat: 40.143742 }, { lon: 116.546193, lat: 40.141043 }, { lon: 116.546097, lat: 40.137875 }, { lon: 116.537818, lat: 40.138056 }, { lon: 116.537725, lat: 40.134348 } ] let cartesian3Positions = [] let minLon, maxLon, minLat, maxLat lineData.forEach((item, index) => { if (index === 0) { minLon = item.lon maxLon = item.lon minLat = item.lat maxLat = item.lat } else { minLon = Math.min(minLon, item.lon) maxLon = Math.max(maxLon, item.lon) minLat = Math.min(minLat, item.lat) maxLat = Math.max(maxLat, item.lat) } cartesian3Positions.push(DT.Cesium.Cartesian3.fromDegrees(item.lon, item.lat)) }) let pathEntity = new DT.DirectionPath({ positions: cartesian3Positions, dataFit: false, // currentPosition:current, autoStep: false, equalsEpsilon: 0.01, stepDistance: 30, leadLineOption: { width: 4, dashLength: 20, color: DT.Cesium.Color.fromCssColorString('#15cfcd'), image: process.env.BASE_URL + 'static/img/dash.png' }, passLineOption: { width: 4, color: DT.Cesium.Color.fromCssColorString('#15cfcd'), }, labelConfig: { font: '21pt Lucida Console', horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT, outlineColor: DT.Cesium.Color.BLACK, outlineWidth: 2, pixelOffset: new DT.Cesium.Cartesian2(5, -4), scale: 0.5, show: true, style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE, text: '无人机', verticalOrigin: DT.Cesium.VerticalOrigin.CENTER, disableDepthTestDistance: 10000 }, billboardConfig: { image: process.env.BASE_URL + 'static/img/icon_wrj.png', disableDepthTestDistance: 10000 // enableRotation: true }, enableRepeatAdjust: false, }) lodLayer.add(pathEntity) // 适当扩大视角范围 let lonDiff = (maxLon - minLon) / 2 let latDiff = (maxLat - minLat) / 2 minLon -= lonDiff maxLon += lonDiff minLat -= latDiff maxLat += latDiff let boundingPosition = [ DT.Cesium.Cartesian3.fromDegrees(minLon, minLat), DT.Cesium.Cartesian3.fromDegrees(minLon, maxLat), DT.Cesium.Cartesian3.fromDegrees(maxLon, minLat), DT.Cesium.Cartesian3.fromDegrees(maxLon, maxLat), ] // console.log('最小最大', minLon, maxLon, minLat, maxLat) viewer.cesiumViewer.camera.flyToBoundingSphere(DT.Cesium.BoundingSphere.fromPoints(boundingPosition), { duration: 0.1 }) this.addMarkPicture() }, addMarkPicture() { // const layer=viewer.imageryLayers.addImageryProvider( new Cesium.SingleTileImageryProvider({ // url: "图片url", // })); let cby_bg_data = [ 116.540165, 40.138266, 116.540190, 40.137485, 116.541745, 40.137458, 116.541714, 40.138282, ]; let entity = viewer.entities.add({ id: 'picture-1', name: '背景', polygon: { // hierarchy: DT.Cesium.Cartesian3.fromDegreesArrayHeights(cby_bg_data), hierarchy: DT.Cesium.Cartesian3.fromDegreesArray(cby_bg_data), perPositionHeight: true, material: new DT.Cesium.ImageMaterialProperty({ image: process.env.BASE_URL + 'static/img/pic.png', }),//new Cesium.Color(0.29, 0.85, 0.89, 0.5), //Cesium.Color.PALETURQUOISE.withAlpha(0.5), outline: true, outlineColor: DT.Cesium.Color.WHITE, outlineWidth: 2, //很多电脑当宽度>1时，没用 } }); let markPosition = DT.Cesium.Cartesian3.fromDegrees(116.540265, 40.138066, 1) let markArr = [ 116.540265, 40.138066, 1, 116.540265, 40.137866, 1, 116.540845, 40.137866, 1, 116.540845, 40.138066, 1, 116.540265, 40.138066, 1, ] let markLine = viewer.entities.add({ id: 'picture-text-1', show: false, position: markPosition, label: { text: '标注点', font: '12px sans-serif', fillColor: DT.Cesium.Color.RED, horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT, verticalOrigin: DT.Cesium.VerticalOrigin.TOP, disableDepthTestDistance: 10000, showBackground: false, backgroundColor: DT.Cesium.Color.BLACK, style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE, }, polyline: { positions: DT.Cesium.Cartesian3.fromDegreesArrayHeights(markArr), // positions: DT.Cesium.Cartesian3.fromDegreesArray(markArr), width: 1, material: DT.Cesium.Color.RED, depthFailMaterial: DT.Cesium.Color.RED, zIndex: 3, } }) linePicture['picture-1'] = { picEntity: entity, mark: markLine } let handler = new DT.Cesium.ScreenSpaceEventHandler( viewer.cesiumViewer.scene.canvas ) handler.setInputAction(({ position }) => { let pick = viewer.cesiumViewer.scene.pick(position) if (pick && pick.id && pick.id.id && pick.id.id.indexOf('picture') !== -1) { currentPicture = linePicture['picture-1'] currentPicture.picEntity.polygon.outlineColor = DT.Cesium.Color.RED currentPicture.mark.show = true } else { if (currentPicture) { currentPicture.picEntity.polygon.outlineColor = DT.Cesium.Color.WHITE currentPicture.mark.show = false } } }, DT.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK) handler.setInputAction(({ position }) => { if (currentPicture) { currentPicture.picEntity.show = !currentPicture.picEntity.show currentPicture.mark.show = !currentPicture.mark.show } }, DT.Cesium.ScreenSpaceEventType.RIGHT_CLICK) }, //#endregion //#region 资源列表 getResourceData() { getResourceList({ onlyshowonline: true }).then(response => { console.log('资源列表', response) if (response.data.code == 200) { let data = response.data.data data.forEach(item => { if (item.type === 4) { item.expand = false item.id = 'group' + item.groupId item.nickName = item.groupName } }) this.resourceList.data = response.data.data } else { } }) }, /** * 获取装备信号强度css类 * @param strength * @returns {string} */ getDeviceSignalClass(strength) { if (strength < 20) { return 'device-status__disconnect' } else if (strength < 60) { return 'device-status__weak' } else { return 'device-status__normal' } }, /** * 车航程css * @param value * @returns {string} */ getCarDistanceClass(value) { if (value < 50) { return 'battery-danger' } else if (value < 200) { return 'battery-weak' } else { return 'battery-normal' } }, /** * 获取装备电池css类 * @param strength * @returns {string} */ getDeviceBatteryClass(strength) { if (strength < 20) { return 'battery-danger' } else if (strength < 60) { return 'battery-weak' } else { return 'battery-normal' } }, /** * 切换资源列表分组 * @param tab */ resourceTabClick(tab) { if (this.resourceList.activeTabId !== tab.id) { this.resourceList.activeTabId = tab.id } }, resourceClick(info) { this.detailInfo.visible = false this.detailInfo.baseInfo = JSON.parse(JSON.stringify(info)) console.log('信息', this.detailInfo.baseInfo) this.detailInfo.visible = true }, openCreateGroupForm() { this.groupForm.name = '' this.groupForm.children = [] this.groupForm.description = '' this.groupForm.visible = true }, /** * 编辑小队 * @param info */ editResourceTeam(info) { console.log('编辑i嘻嘻你', info) this.groupForm.groupId = info.id this.groupForm.name = info.name this.groupForm.visible = true }, submitGroupForm() { this.$refs.groupForm.validate((valid) => { if (valid) { this.$message.success('添加成功') this.closeGroupForm() } else { console.log('error submit!!'); return false; } }); }, closeGroupForm() { this.groupForm = { visible: false, name: '', children: [], description: '', groupId: undefined, } }, closeGroup() { this.$confirm('确定界山吗', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(res => { this.closeGroupForm() }).catch(err => { }) }, //#endregion //#region tab通信相关代码 createBroadcastChannel() { this.closeBroadcastChannel() broadcastChannel = new BroadcastChannel('channel') broadcastChannel.onmessage = this.handleChannelMessage; broadcastChannelInterval = setInterval(() => { this.sendMessageByBroadcastChannel({ type: 'heartbeat', form: 'home' }) }, 5000) }, handleChannelMessage(data) { console.log('home收到消息', data) switch (data.data.type) { case 'heartbeat': let fromTab = data.data.from let find = this.activeTabs.find(item => item.name === fromTab) if (find) { find.lastTime = new Date().getTime() } else { this.activeTabs.push({ name: fromTab, lastTime: new Date().getTime(), }) } break case 'viewMode': console.log('收到viewmode消息') if (this.viewMode !== data.data.value) { this.SET_VIEW_MODE(data.data.value) } break case 'showDayNight': console.log('收到showDayNight消息') if (this.showDayNight !== data.data.value) { // this.SET_DAY_NIGHT(data.data.value) } break case 'showFrontier': console.log('收到showFrontier消息') if (this.showFrontier !== data.data.value) { this.SET_FRONTIER(data.data.value) } break case 'showLonLatGrid': console.log('收到showLonLatGrid消息') if (this.showLonLatGrid !== data.data.value) { this.SET_LON_LAT_GRID(data.data.value) } break case 'isFullscreen': console.log('收到isFullscreen消息') if (this.isFullscreen !== data.data.value) { this.SET_FULL_SCREEN(data.data.value) } break case 'mapType': console.log('收到mapType消息') if (this.mapType !== data.data.value) { this.SET_MAP_TYPE(data.data.value) } break } }, sendMessageByBroadcastChannel(msg) { if (broadcastChannel) { broadcastChannel.postMessage(msg) } }, closeBroadcastChannel() { if (broadcastChannel) { broadcastChannel.close() broadcastChannel = null } if (broadcastChannelInterval) { window.clearInterval(broadcastChannelInterval) broadcastChannelInterval = null } }, //#endregion //#reigion 雷达 createRadar() { let position = viewer.cesiumViewer.scene.camera.position.clone() let position2 = DT.Cesium.Cartographic.fromCartesian(position) let calHeight = Math.min(position2.height * 2, 1000000) calHeight = Math.max(calHeight, 10000) let radarPosition = DT.Cesium.Cartesian3.fromRadians(position2.longitude, position2.latitude, calHeight) let tilingScheme, satMap, vectorMap, roadMap, arcgisMap tilingScheme = new DT.Cesium.WebMercatorTilingScheme() // 开发环境或者内网生产环境，访问内网地图服务 /******************天地图************************/ let token = '0d38858cdf49c0e0ff31ebd03376c7e2'; // 服务域名 let tdtUrl = 'https://t{s}.tianditu.gov.cn/'; // 服务负载子域 let subdomains = ['0', '1', '2', '3', '4', '5', '6', '7']; let tdtImgMap = new DT.Cesium.UrlTemplateImageryProvider({ url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token, subdomains: subdomains, tilingScheme: new DT.Cesium.WebMercatorTilingScheme(), maximumLevel: 18 }); let tdtVecMap = new DT.Cesium.UrlTemplateImageryProvider({ url: tdtUrl + 'DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + token, subdomains: subdomains, tilingScheme: new DT.Cesium.WebMercatorTilingScheme(), maximumLevel: 18 }); // 叠加国界服务 let tdtIboMap = new DT.Cesium.UrlTemplateImageryProvider({ url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token, subdomains: subdomains, tilingScheme: new DT.Cesium.WebMercatorTilingScheme(), maximumLevel: 10 }); // 影像注记 let tdtImageMarkMap = new DT.Cesium.UrlTemplateImageryProvider({ url: tdtUrl + 'DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' + token, subdomains: subdomains, tilingScheme: new DT.Cesium.WebMercatorTilingScheme(), // maximumLevel : 10 }); // 叠加地形服务 let terrainUrls = new Array(); for (let i = 0; i < subdomains.length; i++) { // let url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?T=elv_c&tk=' + token; let url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?tk=' + token; terrainUrls.push(url); } /**********************************************************/ radarViewer = new DT.Viewer(this.$refs.radarCanvas, { imageryProvider: tdtImgMap, sceneMode: 2, mapProjection: new DT.Cesium.WebMercatorProjection(), mapMode2D: DT.Cesium.MapMode2D.INFINITE_SCROLL, }) radarViewer.cesiumViewer.imageryLayers.addImageryProvider(tdtVecMap, 1) radarViewer.cesiumViewer.imageryLayers.addImageryProvider(tdtIboMap, 2) radarViewer.cesiumViewer.imageryLayers.addImageryProvider(tdtImageMarkMap, 3) radarViewer.cesiumViewer.imageryLayers.get(1).show = false let vtxf_dpr = window.devicePixelRatio while (vtxf_dpr >= 2.0) { vtxf_dpr /= 2.0 } radarViewer.cesiumViewer.resolutionScale = vtxf_dpr radarLayer = new DT.LODSceneLayer() radarViewer.addLayer(radarLayer) radarViewer.cesiumViewer.scene.screenSpaceCameraController.enableTranslate = false radarViewer.cesiumViewer.scene.screenSpaceCameraController.enableRotate = false radarViewer.cesiumViewer.scene.screenSpaceCameraController.enableZoom = false radarViewer.cesiumViewer.scene.screenSpaceCameraController.enableTilt = false radarViewer.cesiumViewer.scene.screenSpaceCameraController.tiltEventTypes = [] // 去掉版权 radarViewer.cesiumViewer._innerCreditContainer.style.display = 'none' radarViewer.cesiumViewer.scene.camera.flyTo({ destination: radarPosition, duration: 0 }) radarHandler = new DT.Cesium.ScreenSpaceEventHandler( radarViewer.cesiumViewer.scene.canvas ) this.$nextTick(() => { this.refreshRadar() }) // radarHandler.setInputAction(event => { // let car = radarViewer.cesiumViewer.scene.globe.pick(radarViewer.cesiumViewer.scene.camera.getPickRay(event.position),radarViewer.cesiumViewer.scene); // let updateCartographic = DT.Cesium.Cartographic.fromCartesian(car) // let sourceCamera = DT.Cesium.Cartographic.fromCartesian(viewer.cesiumViewer.scene.camera.position.clone()) // viewer.cesiumViewer.scene.camera.flyTo({ // destination: DT.Cesium.Cartesian3.fromRadians(updateCartographic.longitude, updateCartographic.latitude, sourceCamera.height), // duration: 1 // }) // }, DT.Cesium.ScreenSpaceEventType.LEFT_CLICK) }, refreshRadar() { let position = viewer.cesiumViewer.scene.camera.position.clone() let position2 = DT.Cesium.Cartographic.fromCartesian(position) let calHeight = Math.min(position2.height * 2, 10000000) // let calHeight = position2.height * 2 calHeight = Math.max(calHeight, 10000) let radarPosition = DT.Cesium.Cartesian3.fromRadians(position2.longitude, position2.latitude, calHeight) radarViewer.cesiumViewer.scene.camera.flyTo({ destination: radarPosition, duration: 1 }) }, dealMapChange(map) { if (this.$refs.twinSituation) { this.$refs.twinSituation.dealMapChange(map) } // switch (map) { // case 'sat': // // viewer.cesiumViewer.camera.flyHome() // radarViewer.cesiumViewer.imageryLayers.get(0).show = true // radarViewer.cesiumViewer.imageryLayers.get(1).show = false // // viewer.cesiumViewer.imageryLayers.get(2).show = true // // viewer.cesiumViewer.imageryLayers.get(3).show = false // break // case 'vec': // // viewer.cesiumViewer.camera.flyHome() // radarViewer.cesiumViewer.imageryLayers.get(0).show = false // radarViewer.cesiumViewer.imageryLayers.get(1).show = true // // viewer.cesiumViewer.imageryLayers.get(2).show = // // window.config.env === 'online' // // viewer.cesiumViewer.imageryLayers.get(2).show = true // // viewer.cesiumViewer.imageryLayers.get(3).show = false // break // // } }, //#endregion //#region socket createWebsocket() { let options = { url: window.config.api + '/ws', topic: [ { name: '/topic/status', callback: this.handleWebsocketStatus }, { name: '/topic/wave', callback: this.handleWebsocketWave }, { name: '/topic/image', callback: this.handleWebsocketImage }, ], success: () => { console.log('自身websocket链接成功2') } } let { socket, stompClient } = connectWebSocket(options) socketInstance = socket stompClientInstance = stompClient }, handleWebsocketStatus(info) { // console.log('status socket', JSON.parse(info.body)) }, handleWebsocketWave(info) { // console.log('wave socket', JSON.parse(info.body)) }, handleWebsocketImage(info) { // console.log('wave socket', JSON.parse(info.body)) }, handleWebsocket(res) { let data = JSON.parse(res.body) console.log('websocket数据66666', data) this.updatePeople(data) }, stopTempWebSocket() { if (socketInstance) { disconnectWebSocket(socketInstance) socketInstance = null stompClientInstance = null } }, updatePeople(data) { let entity = lodLayer.getEntityById(data.userid) let updatePosition = DT.Cesium.Cartesian3.fromDegrees( data.lon, data.lat, Math.min(data.high, 1000) ) if (entity) { entity.position = updatePosition } else { entity = new DT.BillboardEntity({ id: data.userid, position: updatePosition, labelConfig: { text: data.username, font: '12px Microsoft YaHei', verticalOrigin: DT.Cesium.VerticalOrigin.CENTER, outlineColor: DT.Cesium.Color.BLACK, outlineWidth: 2, style: DT.Cesium.LabelStyle.FILL_AND_OUTLINE, pixelOffset: new DT.Cesium.Cartesian2(10, 0), // distanceDisplayCondition: new DT.Cesium.DistanceDisplayCondition( // 0, // 10000000 // ) }, billboardConfig: { image: process.env.BASE_URL + 'data/images/people.png', disableDepthTestDistance: Number.POSITIVE_INFINITY, width: 24, height: 24 } }) lodLayer.add(entity) entityCollection.set(data.userid, entity) } }, //#endregion sarChange(val) { // this.moveInfoBar = val }, //#region ais船 getAisData() { }, toggleAisBoat() { this.aisBoat.visible = !this.aisBoat.visible if (this.aisBoat.visible) { axios.get(process.env.BASE_URL + 'data/ais.json').then(res => { console.log('ais', res) this.addShipEntity(res.data) // res.data.forEach(element => { // // }) }) // 添加船舶 // this.addShipEntity([]) // 添加相机事件 // this.addCameraListener() } else { this.clearShipEntity() } }, toggleSplit() { let show = !this.splitVisible this.SET_SPLIT_VISIBLE(show) }, /** * 添加相机事件 * @author wangxueshen * @date 2024-01-23 * @returns {any} */ addCameraListener() { viewer.cesiumViewer.camera.percentageChanged = 0.05 //设置相机变化的识别精度，默认值为0.5 viewer.cesiumViewer.camera.changed.addEventListener(() => { const height = viewer.cesiumViewer.camera.positionCartographic.height shipEntities.values.forEach(ship => { if (ship.billboard) { ship.billboard.image = height <= 310000 ? ship.shapeIcon : ship.typeIcon } }) }) }, /** * 添加船舶 * @author wangxueshen * @date 2025-06-29 * @param {any} data * @returns {any} */ addShipEntity(data) { data.forEach(ship => { const shipEntity = viewer.entities.add({ // id: 'ship-' + ship.mmsi, position: DT.Cesium.Cartesian3.fromDegrees(ship['经度(度)'], ship['纬度(度)'], 100), billboard: { image: process.env.BASE_URL + 'data/images/boat8.png', rotation: DT.Cesium.Math.toRadians(ship['船艏向(度)']), scaleByDistance: new DT.Cesium.NearFarScalar(0, 1, 1, 0.5), }, label: { text: ship['船名'], show: true, font: '14px sans-serif', horizontalOrigin: DT.Cesium.HorizontalOrigin.LEFT, verticalOrigin: DT.Cesium.VerticalOrigin.CENTER, disableDepthTestDistance: 10000, pixelOffset: new DT.Cesium.Cartesian2(10, 0), scaleByDistance: new DT.Cesium.NearFarScalar(0, 1, 1, 0.8), distanceDisplayCondition: new DT.Cesium.DistanceDisplayCondition(0, 200000), } }) aisCollection.push(shipEntity) }) }, clearShipEntity() { aisCollection.forEach(ship => { viewer.entities.remove(ship) }) aisCollection = [] } //#endregion } }