1611 lines
49 KiB
JavaScript
1611 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: []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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) {
|
|||
|
|
console.log(nv, 33333333333);
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
immediate: true
|
|||
|
|
},
|
|||
|
|
// 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() {
|
|||
|
|
// 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']),
|
|||
|
|
...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
|
|||
|
|
|
|||
|
|
|
|||
|
|
//#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
|
|||
|
|
}
|
|||
|
|
}
|