1616 lines
49 KiB
JavaScript
1616 lines
49 KiB
JavaScript
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
|
||
}
|
||
}
|