|
|
|
@ -106,7 +106,8 @@ |
|
|
|
import { drawInit } from '@/utils/earthMap/earthDraw'; |
|
|
|
import { keyControlInit } from '@/utils/earthMap/keyControlInit'; |
|
|
|
import redFlag from '@/assets/earthMap/redFlag.png'; |
|
|
|
import { addModel, addPin, addViewShedRadar, addShipPrimitive } from '@/utils/earthMap/earthObj'; |
|
|
|
import { addModel, addPin, addViewShedRadar, addShipGroundImg, addShipTrack } from '@/utils/earthMap/earthObj'; |
|
|
|
import { drawAllShips } from '@/utils/earthMap/shipDraw'; |
|
|
|
import hidePng from '@/assets/earthMap/hide.png'; |
|
|
|
import alarmImg from '@/assets/earthMap/alarm.gif'; |
|
|
|
import VideoFusionWin from './components/VideoFusionWin.vue'; |
|
|
|
@ -114,7 +115,7 @@ |
|
|
|
import circleDot2 from '@/assets/earthMap/circleDot2.png'; |
|
|
|
import circleDot1 from '@/assets/earthMap/circleDot1.png'; |
|
|
|
import circleDot3 from '@/assets/earthMap/circleDot3.png'; |
|
|
|
import { nextTick } from 'vue'; |
|
|
|
import ship from '@/assets/images/ship.png'; |
|
|
|
|
|
|
|
class HandleNodeType { |
|
|
|
#sn; |
|
|
|
@ -255,130 +256,7 @@ |
|
|
|
VideoFusionWin, |
|
|
|
}, |
|
|
|
props: {}, |
|
|
|
// data() { |
|
|
|
// return { |
|
|
|
// earthTitle: '态势监控一张图', |
|
|
|
// realTime: '……', |
|
|
|
// // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！ |
|
|
|
// _earth: undefined, |
|
|
|
// _earthUI: undefined, |
|
|
|
// _viewer: undefined, |
|
|
|
// _pin: undefined, |
|
|
|
// _handler: undefined, |
|
|
|
// // sceneTree: require('@/assets/earthMap/resjson/sc.json'), |
|
|
|
// // sceneTree: new URL(`@/assets/earthMap/resjson/sc.json`, import.meta.url).href, |
|
|
|
// sceneTree: sceneTree, |
|
|
|
// // areaB: require('@/assets/earthMap/resjson/area_b.json'), |
|
|
|
// url: { |
|
|
|
// queryLabelList: 'military/msMapLabel/queryLabelAndDeviceList', |
|
|
|
// queryLineList: 'military/msMapLine/list', |
|
|
|
// queryCameraInfo: 'military/camera/site/getCameraInfoForEarth', |
|
|
|
// queryAllModelInfo: 'military/msModelPosition/queryAllModelInfo', |
|
|
|
// queryPatrolRouteInfo: 'military/msPatrolLine/getLineDetail', |
|
|
|
// queryBayoneByParam: 'military/msBayonetStatistics/getBayoneByParam', |
|
|
|
// queryAisInfo: 'checkpoint/msAisInfo/list', |
|
|
|
// keepAlive: 'mapInfo/keepAlive', |
|
|
|
// //雷达扫描列表 |
|
|
|
// radarList: '/military/RadarConfig/list', |
|
|
|
// // 删除模型 |
|
|
|
// // 传感器 |
|
|
|
// deleteSensor: '/military/msModelPosition/deleteByEventSerialNum', |
|
|
|
// // 站点 |
|
|
|
// deleteSite: '/military/camera/site/delete', |
|
|
|
// // 标志点 |
|
|
|
// deleteMapLabel: '/military/msMapLabel/delete', |
|
|
|
// updateMapLine: '/military/msMapLine/edit', |
|
|
|
// deleteMapLine: '/military/msMapLine/delete', |
|
|
|
// saveMapLine: '/military/msMapLine/add', |
|
|
|
// // 编辑 模型 |
|
|
|
// // 传感器 |
|
|
|
// updateSensor: '/military/msModelPosition/editByEventSerialNum', |
|
|
|
// // 站点 |
|
|
|
// updateSite: '/military/camera/site/edit', |
|
|
|
|
|
|
|
// // 标志点 |
|
|
|
// updateMapLabel: '/military/msMapLabel/edit', |
|
|
|
|
|
|
|
// // 模型 保存 |
|
|
|
// // 传感器 |
|
|
|
// SaveSensorModel: '/military/msModelPosition/add', |
|
|
|
// // 站点 |
|
|
|
// saveCameraSiteModel: '/military/camera/site/add', |
|
|
|
// // 标志点 |
|
|
|
// saveMapLabel: '/military/msMapLabel/addMapLabel', |
|
|
|
|
|
|
|
// // 通过 线路名称 查询 线路 |
|
|
|
// queryMapLine: '/military/msMapLine/queryByName', |
|
|
|
// querySiteById: '/military/camera/site/queryById', |
|
|
|
// // 查询设备列表 |
|
|
|
// queryDeviceInfoList: '/military/msDeviceInfo/list', |
|
|
|
// setDefenseArea: '/military/netty/microwaveDetector/defenceArea', |
|
|
|
// perimeterRegionList: '/third/api/perimeterRegionList', |
|
|
|
// perimeterControl: '/third/api/perimeterControl', |
|
|
|
// // 雷达重新发送报警信息 |
|
|
|
// sendRadarAlarmByWebSocket: '/military/warn/sendRadarAlarmByWebSocket', |
|
|
|
// }, |
|
|
|
// cameraData: {}, |
|
|
|
// cameraModalShow: false, |
|
|
|
// poiModalShow: false, |
|
|
|
// radioBtnShow: true, |
|
|
|
// glmId: [], |
|
|
|
|
|
|
|
// earthChangeSpin: false, |
|
|
|
// websock: [], |
|
|
|
// timer: null, // 保活定时器 |
|
|
|
// timer2: null, // 时间定时器 |
|
|
|
// // 报警清除-定时器 |
|
|
|
// alarmTrackClearTimer: null, |
|
|
|
// videoWindowProps: { |
|
|
|
// visible: false, |
|
|
|
// isAlarm: false, |
|
|
|
// id: '', |
|
|
|
// title: '', |
|
|
|
// videoUrl: '', |
|
|
|
// cameraIp: '', |
|
|
|
// cameraUser: '', |
|
|
|
// cameraPwd: '', |
|
|
|
// playRecord: false, |
|
|
|
// warnTime: null, |
|
|
|
// warnEvent: { |
|
|
|
// happenTime: '', |
|
|
|
// happenLoc: '', |
|
|
|
// warnNum: 0, |
|
|
|
// warnLevel: 0, |
|
|
|
// warnType: 0, |
|
|
|
// warnContent: '', |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// // 图层管理- 模型 ref 旧值 |
|
|
|
// sceneTreeOldRefValue: '', |
|
|
|
// sceneInfo: null, |
|
|
|
// // 区域节点By Ref划分 |
|
|
|
// nodeConfigByRef: new Map(), |
|
|
|
// nodeCheckedByRef: new Map(), |
|
|
|
// areaByNodeId: new Map(), |
|
|
|
// statusByNodeId: new Map(), |
|
|
|
// imgByRef: new Map(), |
|
|
|
// radarAlarmDataMap: new Map(), |
|
|
|
// wbUnifiedResponse: false, |
|
|
|
// hostDeviceMapById: new Map(), |
|
|
|
// alarmInfoMap: new Map(), |
|
|
|
// toolbarShow: false, |
|
|
|
|
|
|
|
// //addModelWin |
|
|
|
// addModelWinShow: false, |
|
|
|
// czmObject: null, |
|
|
|
// node: null, |
|
|
|
// type: '', |
|
|
|
// lineId: '', |
|
|
|
// areaCode: '', |
|
|
|
// areaByNodeIdModel: '', |
|
|
|
// el:null, |
|
|
|
// eidtId: null, |
|
|
|
// //addroamVideo |
|
|
|
// addRoamVideoShow: false |
|
|
|
// }; |
|
|
|
// }, |
|
|
|
|
|
|
|
}) |
|
|
|
export default class EarthComp extends Vue { |
|
|
|
/** |
|
|
|
@ -524,16 +402,6 @@ |
|
|
|
monitorPosition: any = []; |
|
|
|
/////////////////////////////////////////////////////////////////////////// |
|
|
|
|
|
|
|
// 当前船只位置信息 |
|
|
|
shipData: any = {}; |
|
|
|
|
|
|
|
// 在地球上绘制船只信息 |
|
|
|
drawShips() { |
|
|
|
let shipData = this.shipData; |
|
|
|
let imageUrl = new URL(`../../../assets/images/ship.png`, import.meta.url).href; // 替换为你的PNG图片路径 |
|
|
|
let shipModel = addShipPrimitive(shipData.longitude, shipData.latitude, 0, imageUrl, [shipData.azimuth, 0, 0], '123456', [1, 1, 1]); |
|
|
|
console.log('shipModel', shipModel); |
|
|
|
} |
|
|
|
|
|
|
|
mounted() { |
|
|
|
let that = this; |
|
|
|
@ -582,72 +450,6 @@ |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
{ |
|
|
|
$mitt.on('winShow', function (e: any) { |
|
|
|
that.VideoFusionWinShow = e; |
|
|
|
}); |
|
|
|
//其他页面调用本页面的methods方法 |
|
|
|
$mitt.on('openNotification', (res: any) => { |
|
|
|
// that.openNotification(msg, dt, type, top) |
|
|
|
that.openNotification(res.msg, res.dt, res.type, res.top); |
|
|
|
}); |
|
|
|
$mitt.on('listenMouseHandler', function () { |
|
|
|
that.listenMouseHandler(); |
|
|
|
}); |
|
|
|
$mitt.on('removeHandler', function () { |
|
|
|
that.removeHandler(); |
|
|
|
}); |
|
|
|
$mitt.on('createBBHLine', function () { |
|
|
|
that.createBBHLine(); |
|
|
|
}); |
|
|
|
$mitt.on('createRealTimeObj', function () { |
|
|
|
that.createRealTimeObj(); |
|
|
|
}); |
|
|
|
$mitt.on('radioChangeBtnShow', function (callback) { |
|
|
|
that.radioChangeBtnShow(callback); |
|
|
|
}); |
|
|
|
$mitt.on('loadingStatus', function () { |
|
|
|
that.loadingStatus(); |
|
|
|
}); |
|
|
|
$mitt.on('clearAlarmModel', (mittData: any) => { |
|
|
|
let { isWarnEvent, eventSerialNum } = mittData; |
|
|
|
// 清除告警模型 |
|
|
|
if (isWarnEvent) { |
|
|
|
// 是告警事件 先去后台查询预警事件获取事件编号 |
|
|
|
let url = 'military/msWarnEvent/queryWarnEventDetailList'; |
|
|
|
let params = { |
|
|
|
eventSerialNum: eventSerialNum, |
|
|
|
}; |
|
|
|
defHttp.get({ url, params }, { isTransformResponse: false }).then((res) => { |
|
|
|
if (res.success) { |
|
|
|
// 成功 |
|
|
|
let data = res.result; |
|
|
|
for (const warnEventInfo of data) { |
|
|
|
this.clearAlarmModel(warnEventInfo.eventSerialNum); |
|
|
|
} |
|
|
|
} else { |
|
|
|
// 失败 |
|
|
|
console.log('失败'); |
|
|
|
|
|
|
|
this.$message.error(res.message); |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
// 不是告警事件,直接清除 |
|
|
|
this.clearAlarmModel(eventSerialNum); |
|
|
|
} |
|
|
|
}); |
|
|
|
// 监听mqtt消息 |
|
|
|
$mitt.on('deviceCmd', (message: any) => { |
|
|
|
// 赋值船只数据 |
|
|
|
this.shipData = JSON.parse(JSON.parse(message).radarTrack); |
|
|
|
// 绘制 |
|
|
|
nextTick(() => { |
|
|
|
this.drawShips(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
// 随机数 |
|
|
|
guid() { |
|
|
|
@ -805,19 +607,22 @@ |
|
|
|
this._earth.terrainEffect.subSurfaceEnabled = false; //开启地表透明模式 |
|
|
|
|
|
|
|
this._viewer = earthUI.earth.czm.viewer; |
|
|
|
this._viewer.scene.fxaa = true //图像改善 |
|
|
|
this._viewer.scene.globe.baseColor = Cesium.Color.BLACK |
|
|
|
this._viewer.scene.fxaa = true; //图像改善 |
|
|
|
this._viewer.scene.globe.baseColor = Cesium.Color.BLACK; |
|
|
|
|
|
|
|
//加载场景资源 |
|
|
|
// console.log("this.sceneTree",this.sceneTree); |
|
|
|
// console.log("window._CONFIG['earthMapURL']",window._CONFIG['earthMapURL']); |
|
|
|
// console.log("window._CONFIG['satellite']",window._CONFIG['satellite']); |
|
|
|
|
|
|
|
this.sceneTree.children[0].czmObject.xbsjImageryProvider.TileMapServiceImageryProvider.url = window._CONFIG['earthMapURL'] + window._CONFIG['satellite']; |
|
|
|
this.sceneTree.children[1].czmObject.xbsjImageryProvider.TileMapServiceImageryProvider.url = window._CONFIG['earthMapURL'] + window._CONFIG['vector'] |
|
|
|
this.sceneTree.children[2].czmObject.xbsjTerrainProvider.XbsjCesiumTerrainProvider.url = window._CONFIG['earthMapURL'] + window._CONFIG['terrain']; |
|
|
|
this.sceneTree.children[0].czmObject.xbsjImageryProvider.TileMapServiceImageryProvider.url = |
|
|
|
window._CONFIG['earthMapURL'] + window._CONFIG['satellite']; |
|
|
|
this.sceneTree.children[1].czmObject.xbsjImageryProvider.TileMapServiceImageryProvider.url = |
|
|
|
window._CONFIG['earthMapURL'] + window._CONFIG['vector']; |
|
|
|
this.sceneTree.children[2].czmObject.xbsjTerrainProvider.XbsjCesiumTerrainProvider.url = |
|
|
|
window._CONFIG['earthMapURL'] + window._CONFIG['terrain']; |
|
|
|
// this.sceneTree.children.push(this.areaB) |
|
|
|
|
|
|
|
|
|
|
|
this._earth.sceneTree.root = { |
|
|
|
expand: true, |
|
|
|
title: '场景树', |
|
|
|
@ -833,6 +638,9 @@ |
|
|
|
//监听鼠标事件 |
|
|
|
this.listenMouseHandler(earthUI); |
|
|
|
|
|
|
|
//监听mitt |
|
|
|
this.listenMittHandler(earthUI); |
|
|
|
|
|
|
|
// 飞入方法 |
|
|
|
await this.fly(); |
|
|
|
|
|
|
|
@ -2198,9 +2006,8 @@ |
|
|
|
// console.log("pickedFeature.id._xbsjOwner.addViewShedReturn",pickedFeature.id._xbsjOwner.addViewShedReturn); |
|
|
|
|
|
|
|
//清空当前雷达，并将该方法指向undefined(清空) |
|
|
|
pickedFeature.id._xbsjOwner.addViewShedReturn.clear() |
|
|
|
pickedFeature.id._xbsjOwner.addViewShedReturn = undefined |
|
|
|
|
|
|
|
pickedFeature.id._xbsjOwner.addViewShedReturn.clear(); |
|
|
|
pickedFeature.id._xbsjOwner.addViewShedReturn = undefined; |
|
|
|
} else { |
|
|
|
defHttp.get({ url: this.url.radarList, params: { radarCode: labelCode } }, { isTransformResponse: false }).then((res) => { |
|
|
|
if (res.success) { |
|
|
|
@ -2215,38 +2022,37 @@ |
|
|
|
let radarShifting = data.angularRadian; |
|
|
|
let left = Number(radarShifting) - Number(radarRange) / 2; |
|
|
|
//参数：经纬度、半径、起始角度（正北方向）、结束角度 |
|
|
|
console.log("雷达扫描范围",data); |
|
|
|
console.log('雷达扫描范围', data); |
|
|
|
|
|
|
|
//弧度转角度 |
|
|
|
let degreePosition = radianToDegreeInLngLatHeight( |
|
|
|
pickedFeature.id._xbsjOwner.position[0], |
|
|
|
pickedFeature.id._xbsjOwner.position[1], |
|
|
|
0.1 |
|
|
|
) |
|
|
|
); |
|
|
|
//创建雷达扫描 深度 |
|
|
|
// this._viewer.scene.globe.depthTestAgainstTerrain = true; |
|
|
|
let rader = new CircleScan(this._viewer) |
|
|
|
let rader = new CircleScan(this._viewer); |
|
|
|
rader.add(degreePosition, null, radarRadius, 10000); |
|
|
|
pickedFeature.id._xbsjOwner.addViewShedReturn= rader |
|
|
|
pickedFeature.id._xbsjOwner.addViewShedReturn = rader; |
|
|
|
|
|
|
|
// 雷达扫描2 |
|
|
|
// let rader2 = this._viewer.entities.add({ |
|
|
|
// position: Cesium.Cartesian3.fromDegrees(113.528333, 22.156109), |
|
|
|
// name: '雷达扫描', |
|
|
|
// ellipse: { |
|
|
|
// semiMajorAxis: 5000.0, |
|
|
|
// semiMinorAxis: 5000.0, |
|
|
|
// material: new Cesium.RadarScanMaterialProperty({ |
|
|
|
// color: new Cesium.Color(1.0, 1.0, 0.0, 0.7), |
|
|
|
// speed: 20.0, |
|
|
|
// }), |
|
|
|
// height: 20.0, |
|
|
|
// heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, |
|
|
|
// outline: true, |
|
|
|
// outlineColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0) |
|
|
|
// } |
|
|
|
// }) |
|
|
|
|
|
|
|
// let rader2 = this._viewer.entities.add({ |
|
|
|
// position: Cesium.Cartesian3.fromDegrees(113.528333, 22.156109), |
|
|
|
// name: '雷达扫描', |
|
|
|
// ellipse: { |
|
|
|
// semiMajorAxis: 5000.0, |
|
|
|
// semiMinorAxis: 5000.0, |
|
|
|
// material: new Cesium.RadarScanMaterialProperty({ |
|
|
|
// color: new Cesium.Color(1.0, 1.0, 0.0, 0.7), |
|
|
|
// speed: 20.0, |
|
|
|
// }), |
|
|
|
// height: 20.0, |
|
|
|
// heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, |
|
|
|
// outline: true, |
|
|
|
// outlineColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0) |
|
|
|
// } |
|
|
|
// }) |
|
|
|
|
|
|
|
// pickedFeature.id._xbsjOwner.addViewShedReturn= addViewShedRadar( |
|
|
|
// pickedFeature.id._xbsjOwner.position, |
|
|
|
@ -2255,7 +2061,6 @@ |
|
|
|
// Number(radarRange) / 2 + Number(radarShifting), |
|
|
|
// [rgb.r / 255, rgb.g / 255, rgb.b / 255, rgb.a] |
|
|
|
// ); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
@ -2538,6 +2343,70 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
listenMittHandler(earthUI = null) { |
|
|
|
let that = this; |
|
|
|
{ |
|
|
|
$mitt.on('winShow', function (e: any) { |
|
|
|
that.VideoFusionWinShow = e; |
|
|
|
}); |
|
|
|
//其他页面调用本页面的methods方法 |
|
|
|
$mitt.on('openNotification', (res: any) => { |
|
|
|
// that.openNotification(msg, dt, type, top) |
|
|
|
that.openNotification(res.msg, res.dt, res.type, res.top); |
|
|
|
}); |
|
|
|
$mitt.on('listenMouseHandler', function () { |
|
|
|
that.listenMouseHandler(); |
|
|
|
}); |
|
|
|
$mitt.on('removeHandler', function () { |
|
|
|
that.removeHandler(); |
|
|
|
}); |
|
|
|
$mitt.on('createBBHLine', function () { |
|
|
|
that.createBBHLine(); |
|
|
|
}); |
|
|
|
$mitt.on('createRealTimeObj', function () { |
|
|
|
that.createRealTimeObj(); |
|
|
|
}); |
|
|
|
$mitt.on('radioChangeBtnShow', function (callback) { |
|
|
|
that.radioChangeBtnShow(callback); |
|
|
|
}); |
|
|
|
$mitt.on('loadingStatus', function () { |
|
|
|
that.loadingStatus(); |
|
|
|
}); |
|
|
|
$mitt.on('clearAlarmModel', (mittData: any) => { |
|
|
|
let { isWarnEvent, eventSerialNum } = mittData; |
|
|
|
// 清除告警模型 |
|
|
|
if (isWarnEvent) { |
|
|
|
// 是告警事件 先去后台查询预警事件获取事件编号 |
|
|
|
let url = 'military/msWarnEvent/queryWarnEventDetailList'; |
|
|
|
let params = { |
|
|
|
eventSerialNum: eventSerialNum, |
|
|
|
}; |
|
|
|
defHttp.get({ url, params }, { isTransformResponse: false }).then((res) => { |
|
|
|
if (res.success) { |
|
|
|
// 成功 |
|
|
|
let data = res.result; |
|
|
|
for (const warnEventInfo of data) { |
|
|
|
this.clearAlarmModel(warnEventInfo.eventSerialNum); |
|
|
|
} |
|
|
|
} else { |
|
|
|
// 失败 |
|
|
|
console.log('失败'); |
|
|
|
|
|
|
|
this.$message.error(res.message); |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
// 不是告警事件,直接清除 |
|
|
|
this.clearAlarmModel(eventSerialNum); |
|
|
|
} |
|
|
|
}); |
|
|
|
// 监听mqtt消息 |
|
|
|
$mitt.on('deviceCmd', (message: any) => { |
|
|
|
drawAllShips(message); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
removeHandler() { |
|
|
|
this._handler.removeInputAction(window.Cesium.ScreenSpaceEventType.MOUSE_MOVE); //移除鼠标事件 |
|
|
|
this._handler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除鼠标事件 |
|
|
|
|
