From 5b1eb38ee5c6c481bc883226f216b8a577bb0a6a Mon Sep 17 00:00:00 2001 From: Fuyuu <1805498209@qq.com> Date: Sat, 20 Jan 2024 18:05:25 +0800 Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E6=B7=BB=E5=8A=A0=E5=A4=9A=E7=A7=8D?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=B1=BB=E5=9E=8B=E7=9A=84=E8=88=B9=E5=9E=8B?= =?UTF-8?q?=EF=BC=8C=E5=B9=B6=E5=AE=9E=E7=8E=B0=E8=88=B9=E5=8F=AA=E5=92=8C?= =?UTF-8?q?=E8=BD=A8=E8=BF=B9=E7=9A=84=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2、添加光电追踪窗口，视频监控依赖在电子地图中无法引入，后续抽离出单独项目后补充 --- .env.development | 2 +- build/vite/plugin/index.ts | 16 +- electron/electron.js | 113 +- electron/preload.js | 2 + index.html | 1 + src/assets/images/ship.png | Bin 1878 -> 1778 bytes src/assets/images/ship_a.png | Bin 2858 -> 1733 bytes src/components/earthMap/AISInfoWindow.vue | 136 +- src/components/earthMap/ShowHideControl.vue | 259 +- src/components/earthMap/TailAfterWindow.vue | 81 + src/store/modules/earthMap.ts | 6 +- src/utils/earthMap/earthObj.ts | 121 +- src/utils/earthMap/getCameraInfo.ts | 313 +- src/utils/earthMap/listenMouseHandler.ts | 779 +++-- src/utils/earthMap/shipDraw.ts | 196 +- src/views/earthMap/edit/EarthComp.vue | 29 +- src/views/earthMap/edit/EarthCompTest.vue | 2967 ++++++++--------- src/views/earthMap/show/EarthComp.vue | 1851 +++++----- .../earthMap/camera/MsCameraSiteList.vue | 10 +- 19 files changed, 3713 insertions(+), 3169 deletions(-) create mode 100644 electron/preload.js create mode 100644 src/components/earthMap/TailAfterWindow.vue diff --git a/.env.development b/.env.development index 7ca989a..26f5b00 100644 --- a/.env.development +++ b/.env.development @@ -2,7 +2,7 @@ # @Author: Fuyuu 1805498209@qq.com # @Date: 2023-11-24 10:15:22 # @LastEditors: Fuyuu 1805498209@qq.com - # @LastEditTime: 2023-11-24 18:10:19 + # @LastEditTime: 2024-01-19 10:20:30 # @FilePath: \dt-admin-pc\.env.development # @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE ### diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts index 661eb4e..58065a5 100644 --- a/build/vite/plugin/index.ts +++ b/build/vite/plugin/index.ts @@ -1,3 +1,11 @@ +/* + * @Author: Fuyuu 1805498209@qq.com + * @Date: 2023-11-30 10:37:07 + * @LastEditors: Fuyuu 1805498209@qq.com + * @LastEditTime: 2024-01-20 10:31:38 + * @FilePath: \dt-admin-pc-v2\build\vite\plugin\index.ts + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ import { PluginOption } from 'vite'; import vue from '@vitejs/plugin-vue'; import vueJsx from '@vitejs/plugin-vue-jsx'; @@ -6,6 +14,7 @@ import purgeIcons from 'vite-plugin-purge-icons'; import windiCSS from 'vite-plugin-windicss'; import VitePluginCertificate from 'vite-plugin-mkcert'; import vueSetupExtend from 'vite-plugin-vue-setup-extend'; +// import requireTransform from 'vite-plugin-require-transform'; import { configHtmlPlugin } from './html'; import { configPwaConfig } from './pwa'; import { configMockPlugin } from './mock'; @@ -15,8 +24,8 @@ import { configVisualizerConfig } from './visualizer'; import { configThemePlugin } from './theme'; import { configImageminPlugin } from './imagemin'; import { configSvgIconsPlugin } from './svgSprite'; -import OptimizationPersist from 'vite-plugin-optimize-persist' -import PkgConfig from 'vite-plugin-package-config' +import OptimizationPersist from 'vite-plugin-optimize-persist'; +import PkgConfig from 'vite-plugin-package-config'; export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) { const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv; @@ -32,6 +41,9 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) { VitePluginCertificate({ source: 'coding', }), + // requireTransform({ + // fileRegex: /.js$|.vue$/, + // }), ]; // vite-plugin-windicss diff --git a/electron/electron.js b/electron/electron.js index 15a1a85..4c439e7 100644 --- a/electron/electron.js +++ b/electron/electron.js @@ -2,10 +2,10 @@ const path = require('path'); const { app, BrowserWindow, ipcMain } = require('electron'); -const isDev = process.env.IS_DEV == "true" ? true : false; +const isDev = process.env.IS_DEV == 'true' ? true : false; // rtsp相关,ffmpeg-static会自动下载对应平台windos，linux，mac(intle)，mac(M1版本)的ffmpeg二进制文件 -const ffmpegPath = require('ffmpeg-static') +const ffmpegPath = require('ffmpeg-static'); /** stream相关配置及方法 name = options.name @@ -18,35 +18,34 @@ const ffmpegPath = require('ffmpeg-static') ffmpegPath = options?.ffmpegPath ?? ffmpeg stop() */ - const Stream = require('node-rtsp-stream') - /** - * rtsp列表 - * interface { - * rtspUrl: { - * ws: websocket地址 - * stream: stream实例 - * } - * } - */ - const rtspOpenders = {} - let addPort = 9000 +const Stream = require('node-rtsp-stream'); +/** + * rtsp列表 + * interface { + * rtspUrl: { + * ws: websocket地址 + * stream: stream实例 + * } + * } + */ +const rtspOpenders = {}; +let addPort = 9000; -/** +/** * 开启rtsp * @param rtsp {String} rtsp流地址 */ - ipcMain.on('openRtsp', (event, rtsp) => { /** 判断是否已开启,若已开启,直接返回ws地址, 未开启则先开启再返回 */ if (rtspOpenders[rtsp]) { event.returnValue = { code: 200, msg: '开启成功', - ws: rtspOpenders[rtsp].ws - } + ws: rtspOpenders[rtsp].ws, + }; } else { - addPort++ + addPort++; const stream = new Stream({ name: `socket-${addPort}`, streamUrl: rtsp, @@ -54,27 +53,27 @@ ipcMain.on('openRtsp', (event, rtsp) => { ffmpegPath: app.isPackaged ? ffmpegPath.replace('app.asar', 'app.asar.unpacked') : ffmpegPath, ffmpegOptions: { '-stats': '', - '-r': 30 - } + '-r': 30, + }, }).on('exitWithError', () => { - stream.stop() - delete rtspOpenders[rtsp] + stream.stop(); + delete rtspOpenders[rtsp]; event.returnValue = { code: 400, - msg: '开启失败' - } - }) + msg: '开启失败', + }; + }); rtspOpenders[rtsp] = { ws: `ws://localhost:${addPort}`, - stream: stream - } + stream: stream, + }; event.returnValue = { code: 200, msg: '开启成功', - ws: rtspOpenders[rtsp].ws - } + ws: rtspOpenders[rtsp].ws, + }; } -}) +}); /** * 关闭rtsp @@ -82,22 +81,21 @@ ipcMain.on('openRtsp', (event, rtsp) => { ipcMain.on('closeRtsp', (event, rtsp) => { if (rtspOpenders[rtsp]) { // 停止解析 - rtspOpenders[rtsp].stream.stop() + rtspOpenders[rtsp].stream.stop(); // 删除该项 - delete rtspOpenders[rtsp] + delete rtspOpenders[rtsp]; // 返回结果 event.returnValue = { code: 200, - msg: '关闭成功' - } + msg: '关闭成功', + }; } else { event.returnValue = { code: 400, - msg: '未找到该rtsp' - } + msg: '未找到该rtsp', + }; } -}) - +}); /////////////////////////////////////////// @@ -107,31 +105,24 @@ function createWindow() { width: 800, height: 600, webPreferences: { - //preload: path.join(__dirname, 'preload.js'), + preload: path.join(__dirname, 'preload.js'), javascript: true, plugins: true, - allowRunningInsecureContent: true, - // 允许web断使用node + // 允许web端使用node nodeIntegration: true, contextIsolation: false, - // 同源策略关闭 - webSecurity: false, }, }); // and load the index.html of the app. // win.loadFile("index.html"); - mainWindow.loadURL( - isDev - ? 'http://localhost:3200' - : `file://${path.join(__dirname, '../dist/index.html')}` - ); + mainWindow.loadURL(isDev ? 'http://localhost:3200' : `file://${path.join(__dirname, '../dist/index.html')}`); // mainWindow.loadURL('http://127.0.0.1:5500'); // Open the DevTools. // if (isDev) { - mainWindow.webContents.openDevTools(); + mainWindow.webContents.openDevTools(); // } } @@ -139,12 +130,12 @@ function createWindow() { // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.whenReady().then(() => { - createWindow() + createWindow(); app.on('activate', function () { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. - if (BrowserWindow.getAllWindows().length === 0) createWindow() - }) + if (BrowserWindow.getAllWindows().length === 0) createWindow(); + }); }); // Quit when all windows are closed, except on macOS. There, it's common @@ -155,3 +146,19 @@ app.on('window-all-closed', () => { app.quit(); } }); + +// 在主进程中监听 webContents 的 did-create-window 事件 +app.on('web-contents-created', (event, webContents) => { + // 监听新窗口创建事件 + webContents.on('did-create-window', (Window, details) => { + console.log('Window---', Window); + // 在新窗口创建完成后重新加载预加载脚本 + Window.webContents.on('dom-ready', () => { + Window.webContents.executeJavaScript( + ` + console.log('window----',window) + ` + ); + }); + }); +}); diff --git a/electron/preload.js b/electron/preload.js new file mode 100644 index 0000000..834f2df --- /dev/null +++ b/electron/preload.js @@ -0,0 +1,2 @@ +window.ipcRenderer = require('electron').ipcRenderer; +console.log('再次运行'); diff --git a/index.html b/index.html index e01b99f..c7d7b73 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@ diff --git a/src/assets/images/ship.png b/src/assets/images/ship.png index 36f64d58f4647ed87682766d8399abb1cfc5a778..80bb48afa91353e0a18575dc6a78a3013f8ea499 100644 GIT binary patch delta 1760 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 b17YlcoW(R=x9J<600000NkvXXu0mjf2!}$I literal 2858 zcmV+_3)S?AP)Px<9s z2Ye|$0^mmkJnSkxnzQy_(rzyA0QHLaDKkFUb)ra}Jw_Xox8)UrTms-%#M5BBX2Z}g z_LM$;2tZC8s8>n{F!S$U)b6;a^unC9|B5zqcL%6foXeQ$uopW~Eb#85YlGYK2tn=u zsFg*72=ZmazQ|MhgdqSKcVK*;v$WlzSN_6BSnV~moALHH+Fq{i0Df7V3&JTIbE44U zr3)v5JMsoWz5tNoJ^p9iUcrK0!p^>t$-hysO&`?&@W27S`kf0AGr$0KBi4ff3<+x1l%sr(!ShX-i!OR)~X+W#<^ZopO&U!4pM8@0eBF=wu2bMz{;x91H}%K&s0oi0az); zSP^(AjIkZ!ofb8Md&6kh9-CPJd?~swdR`c60E~0IranEChULMT1)wfV%NYE|F#a>} zP*v&0VKi)y%_IP;DzDn2z>|+fVSbx<$FWAxeUT)SS0(|dSDb^G>B=Z3#=zNCrO${$ z%SMe%0^m#WYXI+x#Bjn2uc4PjqGh2-<^UL9fKppO|L|udD!8wKD@iO^QDguzTDFatGU0Cv^8cgG^kR0N~-dv&)ks zZI#GG2&a1ueNG~|5=fE>0Q|CZD2Tq1fM4Ad_j*e2lu)kN(_{jGniRhy;K113+K`|K zY&)v-%B1qenJ4uCtlSi@F3uMJjMJo7XcJEJ8v5KsbH!UViMm@%qT{_r>*7c?V-`yn08*?4 zP>I=-f#n&vt*Z1M0}B`kObr05<~d6X8$0sNfN9gEYF2%hJq~P1RwA@pzJ%<29=s<1D(n2b7YCdZZm=-KimRx{Bj0R-gh02tsugOp>LmKH8i42a=`CzH@@;k!W<;KY3R`=P^=l&6jZn~P z00uhpEkbj`N)gl1ZnO2}usU(ZTMa->mM$mor{gprPHh6+;;Po0;>;0N+iC!ODJB4H z8MaB2@mwg(udZF+eTZe{Wi0@8IkG3CaI2NB^;Hxd<*C-CeT5{r*jfN;Qhb4c6BG0z zo>aukyhgBhJmTS1tp&iBqPrt!CeG_|MhcZ}9$lZzE@pi)VI=_LQY>l%nb?Hszw@Ba zd#d%7K4+82aw`GwE2ZPWoVqt`r<@q`AH8Og-4C~{xvT@T|XUb9Ez|I1|3mV zt*=EW8CuFJ0BRNS9%B45bXV32@J*fyta`J_DggYl_zno4vUYwE6h@umR_?^J>mrbf zM8YZn>e6|fL7PX?nWZ93e0a4HeBGAvtO1}lZ)9)k6mGV~nE2}88$A{57oUEA%GLnj zm&L^(9NS;{DP7GYTYAlBB01hZtOND{5ciR9VV#OFo`^r|HiD#1IGMI`D**7f65FAG z%pJ=*mGca~p{j!YBV=k|DJuY|mBq;v^O0`@I}}r3heqZuYCL27BX27J@TFJ|AXVS1 z56uPhVO}%%W@w#|0>%M&aPI7~lhl!KAV%0m4nSRs-!kxyFioU3mibVx8GOrR{YC+JU~_CzDm{PXo6$N< z4S<2`s!AK(^46&Fz7+2V@N-iGupw_y)N>ZE!4sxxF$zFkiXSlWF;mUkke9)SR8?@f zsalKzP?O>*GI8XaDYrM0mw{`mO25riNyY$JEobf5LFal?joXyB<><|qJc1`p)MN|* z(?`CUFng+;4E{`21y`7;$ru1NDaHv{V4`W;auVYjx2X>>QI`<_#w*T_ZKiunG;C|m zqSl*@K90oqLNWqCU5e8gILp>yn5e6}4}z8mz{RKsMZndr(g#MZ zJCk1G0Qi+z^T8eKw@;hNxHx`JlX_G4G5jqK?Wr^q2cTYYKF3T}y&IpT;nU?J;)C5r z@a-h)NgM#bBCY|$nwKJzG<&981YGMXo#=zH!~vMegyGMVbzlfUvVL2aZ3uvMBT2TP zApptxZC$n@0M?Bp*@A`uB @@ -12,7 +12,7 @@ :title="title" :width="600" :minWidth="600" - :height="380" + :height="420" :left="80" :top="70" @cancel="cancel" @@ -25,11 +25,11 @@
船名:
-
顺宏海1026
+
{{ AISInfo.name }}
MMSI:
-
413495860
+
{{ AISInfo.mmsi }}
船首向:
@@ -45,7 +45,7 @@
IMO:
-
458876
+
{{ AISInfo.imo }}
航速:
@@ -53,11 +53,11 @@
经度:
-
113-26.578E
+
{{ AISInfo.longitude }}
纬度:
-
22-08.082N
+
{{ AISInfo.latitude }}
状态:
@@ -96,6 +96,14 @@
航行轨迹:
+ +
+
跟踪船只:
+ + 跟踪 + + +
@@ -106,8 +114,9 @@ import Window from '@/components/earthMap/components/Window.vue'; import { useEarthMapStore } from '/@/store/modules/earthMap'; import $mitt from '@/utils/earthMap/mitt'; - // 暂存store - const store = useEarthMapStore(); + import { EyeOutlined } from '@ant-design/icons-vue'; + import { defHttp } from '/@/utils/http/axios'; + export default defineComponent({ name: 'AISInfoWindow', props: { @@ -122,29 +131,47 @@ }, components: { Window, + EyeOutlined, }, setup() { + // 暂存store + const store = useEarthMapStore(); const { proxy }: any = getCurrentInstance(); // 打开状态 const checked = ref(false); - // 获取store中的船只数据列表 - let foundData = store.shipDataList.filter((item) => item.guid === proxy.ship_guid); - // 轨迹线id - let track_guid = foundData ? foundData[0].track_guid : null; - // 轨迹线数据 - let trackData = window.$earth.getObject(track_guid); - // 初始化打开状态 - checked.value = trackData.show; - - // 监听船只guid变化，更新信息 - watch( - () => proxy.ship_guid, - (newVal, _oldVal) => { - console.log(newVal); - }, - { immediate: true } - ); + // 点击船只的trackId + const trackId: any = ref(''); + // 船只数据来源的雷达id + const radarId: any = ref(''); + // 点击船只的AIS信息对象 + const AISInfo: any = ref({}); + // 点击船只的轨迹线数据 + const trackData: any = ref({}); + // 获取点击船只的ais信息以及每个类型船只的轨迹线 + function getShipAISInfo() { + // 根据ship_guid获取track_id后获取AIS信息 + trackId.value = window.$earth.getObject(proxy.ship_guid).trackId; + // 根据trackId获取雷达id + radarId.value = store.radarShipList.filter((item) => item.trackId === trackId.value)[0].radarId; + // 获取store中的ais船只数据列表 + AISInfo.value = store.aisShipList.filter((item) => item.trackId === trackId.value)[0]; + // 根据ship_guid判断点击船只累心后获取轨迹线信息 + let shipName = window.$earth.getObject(proxy.ship_guid).name; + // ais类型 + if (shipName.includes('船_ais')) { + trackData.value = window.$earth.getObject(store.aisShipList.filter((item) => item.trackId === trackId.value)[0].track_guid); + } else if (shipName.includes('船_radar')) { + // 雷达类型 + trackData.value = window.$earth.getObject(store.radarShipList.filter((item) => item.trackId === trackId.value)[0].track_guid); + } else if (shipName.includes('船_mix')) { + // 融合类型 + trackData.value = window.$earth.getObject(store.mixShipList.filter((item) => item.trackId === trackId.value)[0].track_guid); + } else { + console.log('未知船只'); + } + checked.value = trackData.value.show; + } // 关闭弹窗 function cancel() { proxy.$parent.AISInfoWindowShow = false; @@ -153,27 +180,62 @@ function changeTrack(e) { checked.value = e; // 使用show字段控制轨迹显隐 - trackData.show = e; - // 发送轨迹线消息 - $mitt.emit('trackShowChange', e); + trackData.value.show = e; } + // 跟踪船只 + function tailAfter() { + // 打开光电跟踪窗口 + proxy.$parent.TailAfterWindowShow = true; + // 发送船只id（trackId）、雷达id（radarId）、跟踪状态（tracking）（0 取消跟踪 1 跟踪） + // 使用API请求，提交数据到后端 + // defHttp + // .post( + // { + // url: '/military/tracking/target', + // params: { + // trackId: trackId.value, + // radarId: radarId.value, + // tracking: 1, + // }, + // }, + // { isTransformResponse: false } + // ) + // .then((res) => { + // console.log('跟踪结果：', res); + // // 提交数据，后端进行分析计算后，将跟踪画面传回显示 - $mitt.on('trackAllChange', (e: boolean) => { + // }); + console.log('window', window); + } + // 监听轨迹线变化 + $mitt.on('trackChange', (e: boolean) => { // 当前船只轨迹线状态 - checked.value = e; + if (trackData.value.name.includes(e)) { + checked.value = false; + } }); - - $mitt.on('shipAllChange', (e: boolean) => { - // 当前船只模型状态 - if (!e) { - cancel() + // 监听开关轨迹变化 + $mitt.on('trackAllChange', (data: any) => { + if (trackData.value.name.includes(data.type)) { + checked.value = data.status; } - }) + }); + // 监听船只guid变化，更新信息 + watch( + () => proxy.ship_guid, + (_newVal, _oldVal) => { + // 获取AIS信息 + getShipAISInfo(); + }, + { immediate: true } + ); return { checked, + AISInfo, cancel, changeTrack, + tailAfter, }; }, }); diff --git a/src/components/earthMap/ShowHideControl.vue b/src/components/earthMap/ShowHideControl.vue index 775a72c..382a899 100644 --- a/src/components/earthMap/ShowHideControl.vue +++ b/src/components/earthMap/ShowHideControl.vue @@ -1,47 +1,126 @@ + diff --git a/src/store/modules/earthMap.ts b/src/store/modules/earthMap.ts index 579e137..0fed726 100644 --- a/src/store/modules/earthMap.ts +++ b/src/store/modules/earthMap.ts @@ -2,7 +2,7 @@ * @Author: Fuyuu 1805498209@qq.com * @Date: 2023-12-15 16:47:17 * @LastEditors: Fuyuu 1805498209@qq.com - * @LastEditTime: 2024-01-03 10:47:55 + * @LastEditTime: 2024-01-16 09:16:16 * @FilePath: \dt-admin-pc-v2\src\store\modules\earthMap.ts * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -19,7 +19,9 @@ export const useEarthMapStore = defineStore({ shapeList: [], //绘画数组（区域） shapeShowList: [], //绘画存储（临时） keyAreaPos: [], //记录创建防区的点位,重点管控区域 - shipDataList: [], //船只数据列表 + aisShipList: [], // ais船只数据列表 + radarShipList: [], // 雷达船只数据列表 + mixShipList: [], // 融合船只数据列表 xbsjEarthUI: null, //XbsjEarthUI /////////////////////// cameraData: {},//请求的电线杆数据 diff --git a/src/utils/earthMap/earthObj.ts b/src/utils/earthMap/earthObj.ts index 439536d..20da327 100644 --- a/src/utils/earthMap/earthObj.ts +++ b/src/utils/earthMap/earthObj.ts @@ -322,43 +322,101 @@ export const addCustomPrimitive = ( return cp; }; -// 创建船只贴地图片 -export const addShipGroundImg = (lon: number, lat: number, height: number, imgUrl: string, imgUrl_a: string, rt: number, trackId: number) => { - const shipGroundImg = new window.XE.Obj.GroundImage(window.$earth); +// 创建船只三角模型 +export const addShipTriangle = (options: any = {}) => { + const shipTriangle = new window.XE.Obj.GroundImage(window.$earth); const objConfig = { - name: `${trackId}号船只`, - trackId, - position: [window.Cesium.Math.toRadians(lon), window.Cesium.Math.toRadians(lat), height], - loopPlay: false, - imageUrls: [imgUrl], - rotation: -(Math.PI / 180) * rt, - ground: false, + name: options.name, // 实例名称 + imageUrls: [options.imageUrl], // 标识图片资源路径 + trackId: options.id, // 船只trackid + position: options.position, // 位置数组 [经度、纬度、高度] + rotation: options.rotation, // 偏航角 + loopPlay: false, // 是否轮播 + ground: false, // 是否贴地 + height: 80, + width: 60, }; - shipGroundImg.xbsjFromJSON(objConfig); + shipTriangle.xbsjFromJSON(objConfig); //移入事件 - shipGroundImg.onmouseover = (e: any) => { - e.id.imageUrls = [imgUrl_a]; + shipTriangle.onmouseover = () => { window.$earth.czm.viewer._container.style.cursor = 'pointer'; }; //移出事件 - shipGroundImg.onmouseout = (e: any) => { - e.id.imageUrls = [imgUrl]; + shipTriangle.onmouseout = () => { window.$earth.czm.viewer._container.style.cursor = 'default'; }; - return shipGroundImg; + return shipTriangle; +}; +// 创建船只自定义图元 +export const addShipPrimitive = (options: any = {}) => { + const shipCp = new window.XE.Obj.CustomPrimitive(window.$earth); + const objConfig = { + _name: options.name, // 实例名称 + trackId: options.id, // 船只trackid + xbsjType: 'CustomPrimitive', // 图元类型 + position: options.position, // 位置数组 [经度、纬度、高度] + rotation: options.rotation, // 姿态数组 [偏航角、俯仰角、翻转角] + imageUrl: options.imageUrl, // 标识图片资源路径 + positions: [0, -1, 0, 0, 1, 0, 0, 1, 2, 0, -1, 2], + sts: [0, 0, 1, 0, 1, 1, 0, 1], + indices: [0, 1, 2, 0, 2, 3], // 索引数组 + scale: [1, 5, 4], + renderState: { + cull: { + enabled: true, + }, + polygonOffset: {}, + scissorTest: { + rectangle: {}, + }, + depthRange: {}, + depthTest: { + enabled: true, + }, + colorMask: {}, + depthMask: false, + blending: { + enabled: true, + color: {}, + equationRgb: 32774, + equationAlpha: 32774, + functionSourceRgb: 770, + functionDestinationRgb: 771, + functionDestinationAlpha: 771, + }, + stencilTest: { + frontOperation: {}, + backOperation: {}, + }, + sampleCoverage: {}, + }, + color: [1, 1, 1, 1], // 颜色 + canvasWidth: 500, + canvasHeight: 256, + autoRegisterEditing: true, + }; + shipCp.xbsjFromJSON(objConfig); + return shipCp; }; // 创建船只三维模型 -export const addShipModel = (name: string, options: any = {}) => { +// 融合船只-船模型 ais船只-黄色三角 雷达船只-红色三角 +export const addShipModel = (options: any = {}, dataType: number) => { const tileset = new window.XE.Obj.Model(window.$earth); // 创建一个Model对象 const objConfig = { - name: name, - url: options.url, - id: options.id, + name: options.name, // 实例名称 + url: options.modelUrl, // 模型资源路径 + trackId: options.id, // 船只trackid xbsjPosition: options.position, // 位置数组 [经度、纬度、高度] xbsjRotation: options.rotation, // 姿态数组 [偏航角、俯仰角、翻转角] - xbsjScale: [0.5, 0.5, 0.5], // 缩放比例 - show: true, + xbsjScale: [1, 1, 1], // 缩放比例 + show: true, // 显隐状态 + distanceDisplayCondition: [1.0, 30000.0], + scale: 0.5, + minimumPixelSize: 80, + colorBlendAmount: dataType == 3 ? 0.0 : 1.0, // 1.0 模型颜色 0.0 设置纯色 + color: dataType == 3 ? [1, 1, 1, 1] : dataType == 2 ? [1, 1, 0.03, 1] : [0.94, 0.13, 0.03, 1], + colorBlendMode: dataType == 3 ? 'ColorBlendMode.HIGHLIGHT' : 'ColorBlendMode.REPLACE', }; tileset.xbsjFromJSON(objConfig); //移入事件 @@ -371,23 +429,22 @@ export const addShipModel = (name: string, options: any = {}) => { }; return tileset; }; - // 创建船只轨迹 -export const addShipTrack = (positions: number[][]) => { +export const addShipTrack = (positions: number[][], dataType: number) => { const shipTrack = new window.XE.Obj.Polyline(window.$earth); const objConfig = { - width: 3.0, - name: '轨迹线', - positions, + width: 2.0, // 线宽 + name: `轨迹线_${dataType == 1 ? 'radar' : dataType == 2 ? 'ais' : 'mix'}`, // 实例名称 + positions, // 点坐标经纬度数组 [经度、纬度、高度] material: { - type: 'XbsjODLineMaterial', + type: 'XbsjODLineMaterial', // 材质类型 XbsjODLineMaterial: { - bgColor: [1, 1, 0.03, 1], - color: [1, 0, 1, 1], - glowPower: 0.6, + bgColor: dataType == 1 ? [0.94, 0.13, 0.03, 1] : dataType == 2 ? [1, 1, 0.03, 1] : [0.03, 0.32, 1, 0.85], // 背景颜色 + color: dataType == 1 ? [1, 1, 0.03, 1] : dataType == 2 ? [0.94, 0.13, 0.03, 1] : [1, 1, 1, 1], // 颜色 + glowPower: 0.6, // 发光程度 }, }, - ground: true, + ground: true, // 是否贴地 }; shipTrack.xbsjFromJSON(objConfig); return shipTrack; diff --git a/src/utils/earthMap/getCameraInfo.ts b/src/utils/earthMap/getCameraInfo.ts index 70953ff..f09d432 100644 --- a/src/utils/earthMap/getCameraInfo.ts +++ b/src/utils/earthMap/getCameraInfo.ts @@ -6,181 +6,178 @@ import { defHttp } from '/@/utils/http/axios'; import { addPin } from '@/utils/earthMap/earthObj'; import { useUserStore } from '/@/store/modules/user'; import { useEarthMapStore } from '/@/store/modules/earthMap'; -import { earthMapUrl } from '@/api/earth/earthMap' +import { earthMapUrl } from '@/api/earth/earthMap'; import { nextTick } from 'vue'; import $ from 'jquery'; let userStore = useUserStore(); let store = useEarthMapStore(); export default function getCameraInfo(models, type) { - console.log("加载站点"); - return new Promise((resolve, reject) => { - //请求电线杆信息 - defHttp.get({ url: earthMapUrl.queryCameraInfo }, { isTransformResponse: false }).then(async (res) => { - if (res.success) { - // console.log("res",res); - setCamera(res.result, models, type); - store.cameraData = res.result; - resolve(models); - } - }); + console.log('加载站点'); + return new Promise((resolve, reject) => { + //请求电线杆信息 + defHttp.get({ url: earthMapUrl.queryCameraInfo }, { isTransformResponse: false }).then(async (res) => { + if (res.success) { + // console.log("res",res); + setCamera(res.result, models, type); + store.cameraData = res.result; + resolve(models); + } }); + }); } async function setCamera(res, models, type) { - //根据经纬度算出该点地形高度 - let posArr: any = [], - updatedPositions: any = []; - //地形是否开启 - if (window.$earth.sceneTree.$refs.terrain.czmObject.show) { - res.forEach((data, index) => { - if (data.msCameraSiteList != null) { - data.msCameraSiteList.forEach((data, index) => { - posArr.push(window.Cesium.Cartographic.fromDegrees(data.longitude, data.latitude)); - }); - } + //根据经纬度算出该点地形高度 + let posArr: any = [], + updatedPositions: any = []; + //地形是否开启 + if (window.$earth.sceneTree.$refs.terrain.czmObject.show) { + res.forEach((data, index) => { + if (data.msCameraSiteList != null) { + data.msCameraSiteList.forEach((data, index) => { + posArr.push(window.Cesium.Cartographic.fromDegrees(data.longitude, data.latitude)); }); - var promise = window.Cesium.sampleTerrainMostDetailed(this._viewer.terrainProvider, posArr); - updatedPositions = await window.Cesium.when(promise); - } else { - res.forEach((data, index) => { - if (data.msCameraSiteList != null) { - data.msCameraSiteList.forEach((data, index) => { - updatedPositions.push(window.Cesium.Cartographic.fromDegrees(data.longitude, data.latitude, 0)); - }); - } + } + }); + var promise = window.Cesium.sampleTerrainMostDetailed(this._viewer.terrainProvider, posArr); + updatedPositions = await window.Cesium.when(promise); + } else { + res.forEach((data, index) => { + if (data.msCameraSiteList != null) { + data.msCameraSiteList.forEach((data, index) => { + updatedPositions.push(window.Cesium.Cartographic.fromDegrees(data.longitude, data.latitude, 0)); }); - } - // console.log("根据经纬度算出该点地形高度",res); - // console.log("根据经纬度算出该点地形高度",updatedPositions); + } + }); + } + // console.log("根据经纬度算出该点地形高度",res); + // console.log("根据经纬度算出该点地形高度",updatedPositions); - //设置电线杆 - res.forEach((data, index) => { - // console.log("data",data); - let siteConfig: any = null; - const lineId = data.id; - let childs: any = null; - if (type == 2) { - childs = models.children; - for (const child of childs) { - if ('node_' + data.id == child.ref) { - siteConfig = child.children[0]; - } - } - } else { - const parentNode = store.nodeConfigByRef.get('node_' + data.id); - if (!parentNode) { - return; + //设置电线杆 + res.forEach((data, index) => { + // console.log("data",data); + let siteConfig: any = null; + const lineId = data.id; + let childs: any = null; + if (type == 2) { + childs = models.children; + for (const child of childs) { + if ('node_' + data.id == child.ref) { + siteConfig = child.children[0]; + } + } + } else { + const parentNode = store.nodeConfigByRef.get('node_' + data.id); + if (!parentNode) { + return; + } + childs = parentNode.children; + siteConfig = childs[0]; + // console.log("parentNode",parentNode); + } + if (!siteConfig) { + return; + } + if (data.msCameraSiteList != null) { + data.msCameraSiteList.forEach((data, index) => { + // 判断电线杆状态 + let num = 0; + if (data.msCameraSettingList != null) { + data.msCameraSettingList.forEach((data, index) => { + if (data.status == '3') { + //1-在线，2-离线，3-异常 + num = num + 1; } - childs = parentNode.children; - siteConfig = childs[0]; - // console.log("parentNode",parentNode); + }); } - if (!siteConfig) { - return; + let gltfStr; + if (!data.modelUrl) { + return; } - if (data.msCameraSiteList != null) { - data.msCameraSiteList.forEach((data, index) => { - // 判断电线杆状态 - let num = 0; - if (data.msCameraSettingList != null) { - data.msCameraSettingList.forEach((data, index) => { - if (data.status == '3') { - //1-在线，2-离线，3-异常 - num = num + 1; - } - }); - } - let gltfStr; - if (!data.modelUrl) { - return; - } - let fileInfos = data.modelUrl.split('.'); - if (num == 0) { - // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + fileInfos[0] + '.' + fileInfos[1]; - gltfStr = '/dt/sys/common/static/' + fileInfos[0] + '.' + fileInfos[1]; - } else if (num < data.msCameraSettingList.length) { - let newName = fileInfos[0].substring(0, fileInfos[0].length - 1) + 'R'; - // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1]; - gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1]; - } else if (num == data.msCameraSettingList.length) { - let newName = fileInfos[0].substring(0, fileInfos[0].length - 1) + 'Y'; - // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1]; - gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1]; - } - const modelConfig = { - ref: data.id, - name: lineId, - czmObject: { - name: data.sitename, - xbsjType: 'Model', - url: gltfStr, - // "color": [0.52, 0.6, 0.58, 1], - minimumPixelSize: data.minimumPixelSize, - // maximumScale: 0.02, - scale: data.scale, - xbsjScale: data.xyzScale ? data.xyzScale.split(',') : [1, 1, 1], - xbsjPosition: [window.Cesium.Math.toRadians(data.longitude), window.Cesium.Math.toRadians(data.latitude), data.height], - xbsjRotation: [ - window.Cesium.Math.toRadians(data.yaw), - window.Cesium.Math.toRadians(data.pitch), - window.Cesium.Math.toRadians(data.roll), - ], - viewDistance: 150, - distanceDisplayCondition: [1.0, 30000.0], - customProp: data.id, - }, - }; + let fileInfos = data.modelUrl.split('.'); + if (num == 0) { + // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + fileInfos[0] + '.' + fileInfos[1]; + gltfStr = '/dt/sys/common/static/' + fileInfos[0] + '.' + fileInfos[1]; + } else if (num < data.msCameraSettingList.length) { + let newName = fileInfos[0].substring(0, fileInfos[0].length - 1) + 'R'; + // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1]; + gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1]; + } else if (num == data.msCameraSettingList.length) { + let newName = fileInfos[0].substring(0, fileInfos[0].length - 1) + 'Y'; + // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1]; + gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1]; + } + + const modelConfig = { + ref: data.id, + name: lineId, + czmObject: { + name: data.sitename, + xbsjType: 'Model', + url: gltfStr, + // "color": [0.52, 0.6, 0.58, 1], + minimumPixelSize: data.minimumPixelSize, + // maximumScale: 0.02, + scale: data.scale, + xbsjScale: data.xyzScale ? data.xyzScale.split(',') : [1, 1, 1], + xbsjPosition: [window.Cesium.Math.toRadians(data.longitude), window.Cesium.Math.toRadians(data.latitude), data.height], + xbsjRotation: [window.Cesium.Math.toRadians(data.yaw), window.Cesium.Math.toRadians(data.pitch), window.Cesium.Math.toRadians(data.roll)], + viewDistance: 150, + distanceDisplayCondition: [1.0, 30000.0], + customProp: data.id, + }, + }; - window.$earth.sceneTree.root.children.push(modelConfig); - //鼠标事件 - window.$earth.sceneTree.$refs[data.id].czmObject.onmouseover = () => { - window.$viewer._container.style.cursor = 'pointer'; - }; - window.$earth.sceneTree.$refs[data.id].czmObject.onmouseout = () => { - window.$viewer._container.style.cursor = 'default'; - }; + window.$earth.sceneTree.root.children.push(modelConfig); + //鼠标事件 + window.$earth.sceneTree.$refs[data.id].czmObject.onmouseover = () => { + window.$viewer._container.style.cursor = 'pointer'; + }; + window.$earth.sceneTree.$refs[data.id].czmObject.onmouseout = () => { + window.$viewer._container.style.cursor = 'default'; + }; - nextTick(() => { - const divs = $('#earthContainer>div>div>div:nth-child(5)') - .children('div') - .eq(1) - .children() - .eq(0) - .children() - .eq(0) - .children() - .each((index, element) => { - $(element).css('display', 'none'); - }); - }); - //加载相机 - let cameraList: any = []; - if (data.msCameraSettingList) { - for (let camera of data.msCameraSettingList) { - let name = camera.cameraName; - const obj = { - ref: 'camera_' + camera.id, - expand: false, - title: name, - czmObject: { - name: name, - xbsjType: 'Model', - }, - }; - // let id = camera.id - cameraList.push(obj); - // 默认设置为在线 - } - } - // 杆 - const node = { - ref: 'node_' + data.id, - title: data.sitename, - expand: false, - children: cameraList, - }; - siteConfig.children.push(node); + nextTick(() => { + const divs = $('#earthContainer>div>div>div:nth-child(5)') + .children('div') + .eq(1) + .children() + .eq(0) + .children() + .eq(0) + .children() + .each((index, element) => { + $(element).css('display', 'none'); }); + }); + //加载相机 + let cameraList: any = []; + if (data.msCameraSettingList) { + for (let camera of data.msCameraSettingList) { + let name = camera.cameraName; + const obj = { + ref: 'camera_' + camera.id, + expand: false, + title: name, + czmObject: { + name: name, + xbsjType: 'Model', + }, + }; + // let id = camera.id + cameraList.push(obj); + // 默认设置为在线 + } } - }); + // 杆 + const node = { + ref: 'node_' + data.id, + title: data.sitename, + expand: false, + children: cameraList, + }; + siteConfig.children.push(node); + }); + } + }); } diff --git a/src/utils/earthMap/listenMouseHandler.ts b/src/utils/earthMap/listenMouseHandler.ts index f10ad01..7290481 100644 --- a/src/utils/earthMap/listenMouseHandler.ts +++ b/src/utils/earthMap/listenMouseHandler.ts @@ -1,14 +1,14 @@ /** * 监听鼠标事件 * 用于EarthComp.vue - * + * */ -import { nextTick } from 'vue'; +import { nextTick } from 'vue'; import { defHttp } from '/@/utils/http/axios'; import $ from 'jquery'; import { useUserStore } from '/@/store/modules/user'; import { useEarthMapStore } from '/@/store/modules/earthMap'; -import { earthMapUrl } from '@/api/earth/earthMap' +import { earthMapUrl } from '@/api/earth/earthMap'; import { useMessage } from '/@/hooks/web/useMessage'; import { CircleScan } from '@/utils/earthMap/radarEntity'; import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth'; @@ -19,409 +19,408 @@ let store = useEarthMapStore(); const { createMessage } = useMessage(); export default function listenMouseHandler(that) { + const handler = new window.Cesium.ScreenSpaceEventHandler(window.$viewer.scene.canvas); + that._handler = handler; + //取消双击旋转事件 + window.$viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); + /* MOUSE事件（有性能问题，慎用！） */ - const handler = new window.Cesium.ScreenSpaceEventHandler(window.$viewer.scene.canvas); - that._handler = handler; - //取消双击旋转事件 - window.$viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); - /* MOUSE事件（有性能问题，慎用！） */ + /* 鼠标左键事件 */ + { + handler.setInputAction((click: any) => { + if (typeof that._pin !== 'undefined') { + // 销毁指示线 + that._pin.destroy(); + } - /* 鼠标左键事件 */ - { - handler.setInputAction((click: any) => { - if (typeof that._pin !== 'undefined') { - // 销毁指示线 - that._pin.destroy(); - } - - let pickedFeature = window.$viewer.scene.pick(click.position); - console.log('点击:', pickedFeature); + let pickedFeature = window.$viewer.scene.pick(click.position); + console.log('点击:', pickedFeature); - if (pickedFeature && pickedFeature.id) { - // 三维模型 - if (pickedFeature.id.xbsjType && pickedFeature.id.xbsjType === 'Model') { - //点击电线杆触发弹窗 - store.cameraData.forEach((data) => { - if (!$.isEmptyObject(data.msCameraSiteList)) { - if (!data.msCameraSiteList) { - return; - } - data.msCameraSiteList.forEach((data) => { - if (pickedFeature.id.customProp === data.id) { - if ($('.cameraModal ul').length > 0) { - $('.cameraModal ul').remove(); - } - $('.cameraModal').append('
    '); - if (!data.msCameraSettingList) return; - // 将监控相机列表传入弹窗组件中 - that.cameraList = data.msCameraSettingList; - // 将监控点位置传入弹窗组件中 - that.monitorPosition = pickedFeature.id._primitive.xbsjPosition; - data.msCameraSettingList.forEach((data, index) => { - let camera_img = - data.type == '4' - ? window._CONFIG['staticDomainURL'] + '/qiuji.png' - : data.type == '3' - ? window._CONFIG['staticDomainURL'] + '/qiangji.png' - : window._CONFIG['staticDomainURL'] + '/qiangji.png'; - let cameraStatus = data.status == '1' ? 'successStatus' : data.status == '2' ? 'offlineStatus' : 'errorStatus'; - let rtspUrl = data.cameraCode; - // 'rtsp://' + data.user + ':' + data.password + '@' + data.ip + window._CONFIG['cameraMain'] - $('.cameraModal ul').append( - '
  • ' + - data.cameraName + - '
    • ' - ); - }); - let cameraModal: any = document.getElementById('cameraModal') - cameraModal.style.left = click.position.x + -45 + 'px'; - cameraModal.style.top = click.position.y + -180 + 'px'; - that.cameraModalShow = true; - } - }); - } - }); - } - // 船只模型 - if (pickedFeature.id.xbsjType && pickedFeature.id.name.includes('船') && pickedFeature.id.xbsjType === 'Model') { - that.AISInfoWindowShow = true; - // 赋值船只场景id - that.ship_guid = pickedFeature.id.guid; + if (pickedFeature && pickedFeature.id) { + // 三维模型 + if (pickedFeature.id.xbsjType && pickedFeature.id.xbsjType === 'Model') { + //点击电线杆触发弹窗 + store.cameraData.forEach((data) => { + if (!$.isEmptyObject(data.msCameraSiteList)) { + if (!data.msCameraSiteList) { + return; + } + data.msCameraSiteList.forEach((data) => { + if (pickedFeature.id.customProp === data.id) { + if ($('.cameraModal ul').length > 0) { + $('.cameraModal ul').remove(); + } + $('.cameraModal').append('
      '); + if (!data.msCameraSettingList) return; + // 将监控相机列表传入弹窗组件中 + that.cameraList = data.msCameraSettingList; + // 将监控点位置传入弹窗组件中 + that.monitorPosition = pickedFeature.id._primitive.xbsjPosition; + data.msCameraSettingList.forEach((data, index) => { + let camera_img = + data.type == '4' + ? window._CONFIG['staticDomainURL'] + '/qiuji.png' + : data.type == '3' + ? window._CONFIG['staticDomainURL'] + '/qiangji.png' + : window._CONFIG['staticDomainURL'] + '/qiangji.png'; + let cameraStatus = data.status == '1' ? 'successStatus' : data.status == '2' ? 'offlineStatus' : 'errorStatus'; + let rtspUrl = data.cameraCode; + // 'rtsp://' + data.user + ':' + data.password + '@' + data.ip + window._CONFIG['cameraMain'] + $('.cameraModal ul').append( + '
    • ' + + data.cameraName + + '
      • ' + ); + }); + let cameraModal: any = document.getElementById('cameraModal'); + cameraModal.style.left = click.position.x + -45 + 'px'; + cameraModal.style.top = click.position.y + -180 + 'px'; + that.cameraModalShow = true; } - //雷达扫描范围 - if ( - pickedFeature.id._xbsjOwner && - pickedFeature.id._xbsjOwner.customProp && - JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelAttr == '4' - ) { - let labelCode = JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelCode; - console.log(pickedFeature.id._xbsjOwner); - if (pickedFeature.id._xbsjOwner.addViewShedReturn) { - //显示/不显示雷达扫码效果 - // pickedFeature.id._xbsjOwner.addViewShedReturn.show = !pickedFeature.id._xbsjOwner.addViewShedReturn.show; - // console.log("pickedFeature.id._xbsjOwner.addViewShedReturn",pickedFeature.id._xbsjOwner.addViewShedReturn); + }); + } + }); + } + // 船只模型 + if (pickedFeature.id.xbsjType && pickedFeature.id.name.includes('船')) { + that.AISInfoWindowShow = true; + // 赋值船只场景id - 唯一标识 可通过该字段获取其余信息 + that.ship_guid = pickedFeature.id.guid; + } + //雷达扫描范围 + if ( + pickedFeature.id._xbsjOwner && + pickedFeature.id._xbsjOwner.customProp && + JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelAttr == '4' + ) { + let labelCode = JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelCode; + console.log(pickedFeature.id._xbsjOwner); + if (pickedFeature.id._xbsjOwner.addViewShedReturn) { + //显示/不显示雷达扫码效果 + // pickedFeature.id._xbsjOwner.addViewShedReturn.show = !pickedFeature.id._xbsjOwner.addViewShedReturn.show; + // console.log("pickedFeature.id._xbsjOwner.addViewShedReturn",pickedFeature.id._xbsjOwner.addViewShedReturn); - //清空当前雷达，并将该方法指向undefined(清空) - pickedFeature.id._xbsjOwner.addViewShedReturn.clear(); - pickedFeature.id._xbsjOwner.addViewShedReturn = undefined; - } else { - defHttp.get({ url: earthMapUrl.radarList, params: { radarCode: labelCode } }, { isTransformResponse: false }).then((res) => { - if (res.success) { - if (res.result.records.length > 0) { - let data = res.result.records[0]; - let rgb; - if (data.customProp) { - rgb = JSON.parse(data.customProp).color; - } - let radarRadius = data.workingRadius; - let radarRange = data.elevation; - let radarShifting = data.angularRadian; - let left = Number(radarShifting) - Number(radarRange) / 2; - //参数：经纬度、半径、起始角度（正北方向）、结束角度 - console.log('雷达扫描范围', data); + //清空当前雷达，并将该方法指向undefined(清空) + pickedFeature.id._xbsjOwner.addViewShedReturn.clear(); + pickedFeature.id._xbsjOwner.addViewShedReturn = undefined; + } else { + defHttp.get({ url: earthMapUrl.radarList, params: { radarCode: labelCode } }, { isTransformResponse: false }).then((res) => { + if (res.success) { + if (res.result.records.length > 0) { + let data = res.result.records[0]; + let rgb; + if (data.customProp) { + rgb = JSON.parse(data.customProp).color; + } + let radarRadius = data.workingRadius; + let radarRange = data.elevation; + let radarShifting = data.angularRadian; + let left = Number(radarShifting) - Number(radarRange) / 2; + //参数：经纬度、半径、起始角度（正北方向）、结束角度 + console.log('雷达扫描范围', data); - //弧度转角度 - let degreePosition = radianToDegreeInLngLatHeight( - pickedFeature.id._xbsjOwner.position[0], - pickedFeature.id._xbsjOwner.position[1], - 0.1 - ); - //创建雷达扫描 深度 - // window.$viewer.scene.globe.depthTestAgainstTerrain = true; - let rader = new CircleScan(window.$viewer); - rader.add(degreePosition, null, radarRadius, 10000); - pickedFeature.id._xbsjOwner.addViewShedReturn = rader; + //弧度转角度 + let degreePosition = radianToDegreeInLngLatHeight( + pickedFeature.id._xbsjOwner.position[0], + pickedFeature.id._xbsjOwner.position[1], + 0.1 + ); + //创建雷达扫描 深度 + // window.$viewer.scene.globe.depthTestAgainstTerrain = true; + let rader = new CircleScan(window.$viewer); + rader.add(degreePosition, null, radarRadius, 10000); + pickedFeature.id._xbsjOwner.addViewShedReturn = rader; - // 雷达扫描2 - // let rader2 = window.$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) - // } - // }) + // 雷达扫描2 + // let rader2 = window.$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, - // radarRadius, - // left, - // Number(radarRange) / 2 + Number(radarShifting), - // [rgb.r / 255, rgb.g / 255, rgb.b / 255, rgb.a] - // ); - } - } - }); - } + // pickedFeature.id._xbsjOwner.addViewShedReturn= addViewShedRadar( + // pickedFeature.id._xbsjOwner.position, + // radarRadius, + // left, + // Number(radarRange) / 2 + Number(radarShifting), + // [rgb.r / 255, rgb.g / 255, rgb.b / 255, rgb.a] + // ); } - } else { - //关闭所有气泡窗 - that.cameraModalShow = false; - that.poiModalShow = false; - } - }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK); - } - /* 鼠标右键事件 */ - { - handler.setInputAction((click) => { - // 判断点击位置是否有实体 - //返回具有 `primitive` 属性的对象，该属性包含场景中特定窗口坐标处的第一个（顶部）图元，如果该位置没有任何内容，则返回未定义的对象。其他属性可能会根据基元的类型进行设置，并可用于进一步识别拾取的对象。 - let pickedFeature = window.$viewer.scene.pick(click.position); - // console.log("pick",pickedFeature); + } + }); + } + } + } else { + //关闭所有气泡窗 + that.cameraModalShow = false; + that.poiModalShow = false; + } + }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK); + } + /* 鼠标右键事件 */ + { + handler.setInputAction((click) => { + // 判断点击位置是否有实体 + //返回具有 `primitive` 属性的对象，该属性包含场景中特定窗口坐标处的第一个（顶部）图元，如果该位置没有任何内容，则返回未定义的对象。其他属性可能会根据基元的类型进行设置，并可用于进一步识别拾取的对象。 + let pickedFeature = window.$viewer.scene.pick(click.position); + // console.log("pick",pickedFeature); - let entity = pickedFeature && pickedFeature.id; - console.log('pick', pickedFeature); - console.log('entity', entity); - if (entity == undefined) { - return; + let entity = pickedFeature && pickedFeature.id; + console.log('pick', pickedFeature); + console.log('entity', entity); + if (entity == undefined) { + return; + } + if (typeof pickedFeature !== 'undefined' && pickedFeature.id.xbsjType == 'Model') { + //点击电线杆触发弹窗 + store.cameraData.forEach((data) => { + if (!$.isEmptyObject(data.msCameraSiteList)) { + if (!data.msCameraSettingList) { + return; } - if (typeof pickedFeature !== 'undefined' && pickedFeature.id.xbsjType == 'Model') { - //点击电线杆触发弹窗 - store.cameraData.forEach((data) => { - if (!$.isEmptyObject(data.msCameraSiteList)) { - if (!data.msCameraSettingList) { - return; - } - data.msCameraSiteList.forEach((data) => { - if (pickedFeature.id.customProp === data.id) { - window.$uia.contextMenu.pop([ - { - text: '监控视域分析属性', - func: () => { - let testConfig = { - ref: 'testView', - name: '雷达视域分析', - position: [1.514482876761954, 0.8497520519403554, -0.7553906497788317], - rotation: [4.535844766941594, 0.32288591161895097, 0], - near: 1, - far: 400, - fovH: Math.PI / 3, - fovV: Math.PI / 6, - show: false, - }; - let Viewshed = new window.XE.Obj.Viewshed(window.$earth); - Viewshed.xbsjFromJSON(testConfig); - window.$uia.showPropertyWindow(Viewshed); - }, - }, - ]); - } - }); - } - }); - } - //巡检监控视频 - else if (typeof pickedFeature !== 'undefined' && entity._name == '视频图元') { - // console.log(pickedFeature) - // console.log("entity",entity) + data.msCameraSiteList.forEach((data) => { + if (pickedFeature.id.customProp === data.id) { window.$uia.contextMenu.pop([ - { - text: '编辑', - func: () => { - $mitt.emit('addRoamPathVideoClose'); - // store.commit('customPrimitive', entity.xbsjGuid); - store.customPrimitive = entity.xbsjGuid; - // 打开对应的创建巡检视频窗口 - nextTick(() => { - that.addRoamVideoShow = true; - }); - }, - }, - { - text: '删除', - func: () => { - window.$uia.confirm('确认删除?', () => { - defHttp - .delete( - { - url: '/military/msAreaCustomPrimitive/delete', - params: { id: entity.id }, - }, - { isTransformResponse: false, joinParamsToUrl: true } - ) - .then((response) => { - if (response.code == 200) { - let customPrimitiveList = store.customPrimitiveList; - // console.log("a",customPrimitiveList); - customPrimitiveList.forEach((element, index) => { - const model = window.$earth.getObject(element); - // console.log("model.id",model.id); - // console.log("entity.id",entity.id); - if (model.id == entity.id) { - let customPrimitive = customPrimitiveList.splice(index, 1)[0]; - model.destroy(); - } - }); - // store.dispatch('asyncCustomPrimitive', customPrimitiveList); - store.customPrimitiveList = customPrimitiveList; - - // notification.close("RoamVideoSet"); - // sessionStorage.setItem("RoamVideoSet", "false"); - } else { - createMessage.error('修改失败', 2); - console.error('删除失败', response); - } - }) - .catch((res) => { - console.error('错误', res); - }); - }); - }, + { + text: '监控视域分析属性', + func: () => { + let testConfig = { + ref: 'testView', + name: '雷达视域分析', + position: [1.514482876761954, 0.8497520519403554, -0.7553906497788317], + rotation: [4.535844766941594, 0.32288591161895097, 0], + near: 1, + far: 400, + fovH: Math.PI / 3, + fovV: Math.PI / 6, + show: false, + }; + let Viewshed = new window.XE.Obj.Viewshed(window.$earth); + Viewshed.xbsjFromJSON(testConfig); + window.$uia.showPropertyWindow(Viewshed); }, + }, ]); - } - //绘画图形 - else if (typeof pickedFeature !== 'undefined' && entity.name == '绘画') { - // console.log("entity", entity); - window.$uia.contextMenu.pop([ + } + }); + } + }); + } + //巡检监控视频 + else if (typeof pickedFeature !== 'undefined' && entity._name == '视频图元') { + // console.log(pickedFeature) + // console.log("entity",entity) + window.$uia.contextMenu.pop([ + { + text: '编辑', + func: () => { + $mitt.emit('addRoamPathVideoClose'); + // store.commit('customPrimitive', entity.xbsjGuid); + store.customPrimitive = entity.xbsjGuid; + // 打开对应的创建巡检视频窗口 + nextTick(() => { + that.addRoamVideoShow = true; + }); + }, + }, + { + text: '删除', + func: () => { + window.$uia.confirm('确认删除?', () => { + defHttp + .delete( { - text: '编辑', - func: () => { - window.$uia.showPropertyWindow(entity); - //记录编辑前信息 - let oldEntity = { - depthTest: entity.depthTest, //深度检测 - color: [...entity.color], //颜色 - outline: { - color: [...entity.outline.color], //边框颜色 - show: entity.outline.show, //边框显示 - width: entity.outline.width, //边框宽度 - }, - positions: [...entity.positions], - }; - nextTick(() => { - // 主要ui窗口 - const mainUI = window.$uia._vm.$refs.mainUI; - // 所有打开的ui窗口Ref值 - const windowsAttrList = Object.keys(mainUI.$refs); - // 寻找当前窗体的工具对象 - const modelToolKey = windowsAttrList.filter((f) => f.indexOf(entity.guid) > -1)[0]; - const modelTool = mainUI.$refs[modelToolKey][0]; - // 当前窗体的元素 - const el = modelTool.$el; - // this.cloneEl(el) - // 样式 - el.style.width = '380px'; //宽度 - el.children[2].style.padding = '0px'; - el.children[2].style.transition = 'none'; - el.children[2].children[0].children[0].style.minWidth = '370px'; - // 关闭名称input - el.children[2].children[0].children[0].children[0].style.display = 'none'; - // 关闭创建按钮 - el.children[2].children[0].children[0].children[1].children[0].children[1].style.display = 'none'; - // 关闭贴地 - el.children[2].children[0].children[0].children[2].children[0].style.display = 'none'; - // 关闭拉伸 - el.children[2].children[0].children[0].children[3].children[0].style.display = 'none'; - el.children[2].children[0].children[0].children[3].children[1].style.display = 'none'; - el.children[2].children[0].children[0].children[3].children[2].style.display = 'none'; - el.children[2].children[0].children[0].children[3].children[3].style.marginLeft = '8px'; - // 右上角关闭 - const cancelTopRightBtn = el.children[1].children[1]; - // 取消按钮元素 - const cancelBtn = el.children[3].children[0]; - // 确认按钮元素 - const okBtn = el.children[3].children[1]; - // 取消按钮 - cancelTopRightBtn.onclick = cancelBtn.onclick = function () { - //恢复原来设置 - // console.log("oldEntity", oldEntity); - // console.log("entity", entity); - // entity.xbsjFromJSON(oldEntity) - // entity = JSON.parse(oldEntity) - entity.depthTest = oldEntity.depthTest; - entity.color = oldEntity.color; - entity.outline = oldEntity.outline; - entity.positions = oldEntity.positions; - entity.editing = false; - }; - okBtn.onclick = function () { - let params = { - id: entity.customProp?.id, - drawData: JSON.stringify(entity), - }; - // console.log("submit", entity); - defHttp - .post( - { - url: '/military/dtMapDraw/edit', - params: params, - }, - { isTransformResponse: false } - ) - .then(() => { - createMessage.success('编辑成功', 2); - }) - .catch(() => { - createMessage.error('编辑失败', 2); - }); - }; - }); - }, + url: '/military/msAreaCustomPrimitive/delete', + params: { id: entity.id }, }, + { isTransformResponse: false, joinParamsToUrl: true } + ) + .then((response) => { + if (response.code == 200) { + let customPrimitiveList = store.customPrimitiveList; + // console.log("a",customPrimitiveList); + customPrimitiveList.forEach((element, index) => { + const model = window.$earth.getObject(element); + // console.log("model.id",model.id); + // console.log("entity.id",entity.id); + if (model.id == entity.id) { + let customPrimitive = customPrimitiveList.splice(index, 1)[0]; + model.destroy(); + } + }); + // store.dispatch('asyncCustomPrimitive', customPrimitiveList); + store.customPrimitiveList = customPrimitiveList; + + // notification.close("RoamVideoSet"); + // sessionStorage.setItem("RoamVideoSet", "false"); + } else { + createMessage.error('修改失败', 2); + console.error('删除失败', response); + } + }) + .catch((res) => { + console.error('错误', res); + }); + }); + }, + }, + ]); + } + //绘画图形 + else if (typeof pickedFeature !== 'undefined' && entity.name == '绘画') { + // console.log("entity", entity); + window.$uia.contextMenu.pop([ + { + text: '编辑', + func: () => { + window.$uia.showPropertyWindow(entity); + //记录编辑前信息 + let oldEntity = { + depthTest: entity.depthTest, //深度检测 + color: [...entity.color], //颜色 + outline: { + color: [...entity.outline.color], //边框颜色 + show: entity.outline.show, //边框显示 + width: entity.outline.width, //边框宽度 + }, + positions: [...entity.positions], + }; + nextTick(() => { + // 主要ui窗口 + const mainUI = window.$uia._vm.$refs.mainUI; + // 所有打开的ui窗口Ref值 + const windowsAttrList = Object.keys(mainUI.$refs); + // 寻找当前窗体的工具对象 + const modelToolKey = windowsAttrList.filter((f) => f.indexOf(entity.guid) > -1)[0]; + const modelTool = mainUI.$refs[modelToolKey][0]; + // 当前窗体的元素 + const el = modelTool.$el; + // this.cloneEl(el) + // 样式 + el.style.width = '380px'; //宽度 + el.children[2].style.padding = '0px'; + el.children[2].style.transition = 'none'; + el.children[2].children[0].children[0].style.minWidth = '370px'; + // 关闭名称input + el.children[2].children[0].children[0].children[0].style.display = 'none'; + // 关闭创建按钮 + el.children[2].children[0].children[0].children[1].children[0].children[1].style.display = 'none'; + // 关闭贴地 + el.children[2].children[0].children[0].children[2].children[0].style.display = 'none'; + // 关闭拉伸 + el.children[2].children[0].children[0].children[3].children[0].style.display = 'none'; + el.children[2].children[0].children[0].children[3].children[1].style.display = 'none'; + el.children[2].children[0].children[0].children[3].children[2].style.display = 'none'; + el.children[2].children[0].children[0].children[3].children[3].style.marginLeft = '8px'; + // 右上角关闭 + const cancelTopRightBtn = el.children[1].children[1]; + // 取消按钮元素 + const cancelBtn = el.children[3].children[0]; + // 确认按钮元素 + const okBtn = el.children[3].children[1]; + // 取消按钮 + cancelTopRightBtn.onclick = cancelBtn.onclick = function () { + //恢复原来设置 + // console.log("oldEntity", oldEntity); + // console.log("entity", entity); + // entity.xbsjFromJSON(oldEntity) + // entity = JSON.parse(oldEntity) + entity.depthTest = oldEntity.depthTest; + entity.color = oldEntity.color; + entity.outline = oldEntity.outline; + entity.positions = oldEntity.positions; + entity.editing = false; + }; + okBtn.onclick = function () { + let params = { + id: entity.customProp?.id, + drawData: JSON.stringify(entity), + }; + // console.log("submit", entity); + defHttp + .post( + { + url: '/military/dtMapDraw/edit', + params: params, + }, + { isTransformResponse: false } + ) + .then(() => { + createMessage.success('编辑成功', 2); + }) + .catch(() => { + createMessage.error('编辑失败', 2); + }); + }; + }); + }, + }, + { + text: '删除', + func: () => { + window.$uia.confirm('确认删除?', () => { + defHttp + .delete( { - text: '删除', - func: () => { - window.$uia.confirm('确认删除?', () => { - defHttp - .delete( - { - url: '/military/dtMapDraw/delete', - params: { id: entity.customProp?.id }, - }, - { isTransformResponse: false, joinParamsToUrl: true } - ) - .then((response) => { - if (response.code == 200) { - let shapeList = store.shapeList; - shapeList.forEach((element, index) => { - const model = window.$earth.getObject(element); - if (model.id == entity.customProp?.id) { - let shape = shapeList.splice(index, 1)[0]; - model.destroy(); - } - }); - store.shapeList = shapeList; - } else { - createMessage.error('删除失败', 2); - console.error('删除失败', response); - } - }) - .catch((res) => { - console.error('错误', res); - }); - }); - }, + url: '/military/dtMapDraw/delete', + params: { id: entity.customProp?.id }, }, - ]); - } - }, window.Cesium.ScreenSpaceEventType.RIGHT_CLICK); //右键事件 - } - /* picked事件 */ - { - /* let canvasbox = window.$viewer.canvas, pickPosition = {}, cameraModal = this.$refs.cameraModal;//操作cameraModal组件 + { isTransformResponse: false, joinParamsToUrl: true } + ) + .then((response) => { + if (response.code == 200) { + let shapeList = store.shapeList; + shapeList.forEach((element, index) => { + const model = window.$earth.getObject(element); + if (model.id == entity.customProp?.id) { + let shape = shapeList.splice(index, 1)[0]; + model.destroy(); + } + }); + store.shapeList = shapeList; + } else { + createMessage.error('删除失败', 2); + console.error('删除失败', response); + } + }) + .catch((res) => { + console.error('错误', res); + }); + }); + }, + }, + ]); + } + }, window.Cesium.ScreenSpaceEventType.RIGHT_CLICK); //右键事件 + } + /* picked事件 */ + { + /* let canvasbox = window.$viewer.canvas, pickPosition = {}, cameraModal = this.$refs.cameraModal;//操作cameraModal组件 canvasbox.onclick = e => { pickPosition.x = e.offsetX; pickPosition.y = e.offsetY; @@ -433,5 +432,5 @@ export default function listenMouseHandler(that) { that.cameraModalShow = false; } } */ - } -} \ No newline at end of file + } +} diff --git a/src/utils/earthMap/shipDraw.ts b/src/utils/earthMap/shipDraw.ts index 4770170..d3873e5 100644 --- a/src/utils/earthMap/shipDraw.ts +++ b/src/utils/earthMap/shipDraw.ts @@ -2,7 +2,7 @@ * @Author: Fuyuu 1805498209@qq.com * @Date: 2024-01-03 17:42:49 * @LastEditors: Fuyuu 1805498209@qq.com - * @LastEditTime: 2024-01-09 10:35:50 + * @LastEditTime: 2024-01-19 09:44:33 * @FilePath: \dt-admin-pc-v2\src\utils\earthMap\shipDraw.ts * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ @@ -12,66 +12,186 @@ import { useEarthMapStore } from '/@/store/modules/earthMap'; import { addShipTrack, addShipModel } from '@/utils/earthMap/earthObj'; - // 暂存store const store = useEarthMapStore(); -// 船只数据列表 -let shipDataList: any = []; +// 雷达船只数据列表 +let radarShipList: any = []; +// AIS船只数据列表 +let aisShipList: any = []; +// 融合船只数据列表 +let mixShipList: any = []; -// 绘制单个船只 -const drawShips = function (shipItem) { - // 引入初始图片 - // let imageUrl = new URL(`../../assets/images/ship.png`, import.meta.url).href; - // 引入高亮图片 - // let imageUrl_a = new URL(`../../assets/images/ship_a.png`, import.meta.url).href; +// 角度转弧度 +function toRadians(point) { + return window.Cesium.Math.toRadians(point); +} + +// 绘制AIS船只 +const drawAISShips = function (shipItem) { + // 模型配置参数 + let options = { + id: shipItem.trackId, + name: `${shipItem.trackId}号船_ais`, + modelUrl: window._CONFIG['domianURL'] + '/sys/common/static/greenShip.gltf', + position: [toRadians(shipItem.longitude + 0.00005), toRadians(shipItem.latitude + 0.00005), 0], + rotation: [(Math.PI / 180) * (shipItem.course - 90), 0, 0], + }; + // 绘制船只 + let shipModel = addShipModel(options, 1); + // 返回船只绘制信息 + return shipModel; +}; +// 绘制雷达船只 +const drawRadarShips = function (shipItem) { // 模型配置参数 let options = { id: shipItem.trackId, - url: window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf', + name: `${shipItem.trackId}号船_radar`, + modelUrl: window._CONFIG['domianURL'] + '/sys/common/static/yellowShip.gltf', position: [toRadians(shipItem.longitude), toRadians(shipItem.latitude), 0], - rotation: [(Math.PI / 180) * (shipItem.course + 90), 0, 0], + rotation: [(Math.PI / 180) * (shipItem.course - 90), 0, 0], }; // 绘制船只 - let shipModel = addShipModel(`${shipItem.trackId}号船`, options); + let shipModel = addShipModel(options, 2); + // 返回船只绘制信息 + return shipModel; +}; +// 绘制融合船只 +const drawMixShips = function (shipItem) { + // 模型配置参数 + let options = { + id: shipItem.trackId, + name: `${shipItem.trackId}号船_mix`, + modelUrl: window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf', + position: [toRadians(shipItem.longitude + 0.0001), toRadians(shipItem.latitude + 0.0001), 0], + rotation: [(Math.PI / 180) * (shipItem.course - 90), 0, 0], + }; + // 绘制船只 + let shipModel = addShipModel(options, 3); // 返回船只绘制信息 return shipModel; }; -// 角度转弧度 -function toRadians(point) { - return window.Cesium.Math.toRadians(point); -} +// 绘制地球上所有雷达船只 +export const drawRadarShipsList = function (radarItem) { + // 接收到的单个雷达船只信息 + let radarData = radarItem.radarTrack; + // 获取store中的雷达船只数据列表 + radarShipList = store.radarShipList; + // 是否已经存在 + let existingShip = radarShipList.find((shipItem) => shipItem.trackId === radarData.trackId); + if (existingShip) { + // 添加新的轨迹点 + window.$earth.getObject(existingShip.track_guid).positions.push([toRadians(radarData.longitude), toRadians(radarData.latitude), 0]); + // 获取场景中的船只信息 + let shipData = window.$earth.getObject(existingShip.guid); + // 更新位置和航向 + shipData.xbsjPosition = [toRadians(radarData.longitude), toRadians(radarData.latitude), 0]; + // 航向需要后续调整。。。 + shipData.xbsjRotation = [(Math.PI / 180) * (radarData.course - 90), 0, 0]; + } else { + // 添加新的雷达船只 + radarShipList.push({ + name: `${radarData.trackId}号船_radar`, // 名称 + trackId: radarData.trackId, // 船只id + guid: drawRadarShips(radarData).xbsjGuid, // 船只场景id + // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid，用于轨迹显隐 + track_guid: addShipTrack([[toRadians(radarData.longitude), toRadians(radarData.latitude), 0]], 1).xbsjGuid, + azimuth: radarData.azimuth, // 方位角 + course: radarData.course, // 航向 + latitude: radarData.latitude, // 纬度 + longitude: radarData.longitude, // 经度 + radarId: radarData.radarId, // 雷达id + }); + // 更新store + store.radarShipList = radarShipList; + } +}; + +// 绘制地球上所有ais船只（暂无AIS数据，使用雷达数据进行模拟） +export const drawAISShipsList = function (aisItem) { + // 接收到的单个ais船只信息 + let aisData = aisItem.radarTrack; + // 获取store中的ais船只数据列表 + aisShipList = store.aisShipList; + // 是否已经存在 + let existingShip = aisShipList.find((shipItem) => shipItem.trackId === aisData.trackId); + if (existingShip) { + // 添加新的轨迹点 + window.$earth + .getObject(existingShip.track_guid) + .positions.push([toRadians(aisData.longitude + 0.00005), toRadians(aisData.latitude + 0.00005), 0]); + // 获取场景中的船只信息 + let shipData = window.$earth.getObject(existingShip.guid); + // 更新位置和航向 + shipData.xbsjPosition = [toRadians(aisData.longitude + 0.00005), toRadians(aisData.latitude + 0.00005), 0]; + // 航向需要后续调整。。。 + shipData.xbsjRotation = [(Math.PI / 180) * (aisData.course - 90), 0, 0]; + } else { + // 添加新的ais船只 + aisShipList.push({ + name: `${aisData.trackId}号船_ais`, // 名称 + mmsi: aisData.trackId * 66, // MMSI + call_sign: aisData.trackId * 6, // 呼号 + imo: aisData.trackId * 5, // IMO + bow_direction: 511.0, // 船首向 + track_direction: 342.0, // 航迹向 + ship_status: '锚泊', // 状态 + ship_length: 85.4, // 船长 + ship_width: 19.0, // 船宽 + draft: 0.0, // 吃水 + ship_type: '货船', // 类型 + ship_speed: '20m/s', // 航速 + destination: 'JIANGMEN,CN', // 目的地 + nationality: 'CN', // 国籍 + pre_arrival_time: '2024-01-08 14:40:11', // 预到时间 + trackId: aisData.trackId, // 船只id + guid: drawAISShips(aisData).xbsjGuid, // 船只场景id + // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid，用于轨迹显隐 + track_guid: addShipTrack([[toRadians(aisData.longitude + 0.00005), toRadians(aisData.latitude + 0.00005), 0]], 2).xbsjGuid, + azimuth: aisData.azimuth, // 方位角 + course: aisData.course, // 航向 + latitude: aisData.latitude + 0.00005, // 纬度 + longitude: aisData.longitude + 0.00005, // 经度 + radarId: aisData.radarId, // 雷达Id + }); + // 更新store + store.aisShipList = aisShipList; + } +}; -// 绘制地球上所有船只和轨迹 -export const drawAllShips = function (message) { - // 接收到的单个船只信息 - let messageData = JSON.parse(JSON.parse(message).radarTrack); - // 获取store中的船只数据列表 - shipDataList = store.shipDataList; +// 绘制地球上所有融合船只（暂无融合数据，使用雷达数据进行模拟） +export const drawMixShipsList = function (mixItem) { + // 接收到的单个融合船只信息 + let mixData = mixItem.radarTrack; + // 获取store中的融合船只数据列表 + mixShipList = store.mixShipList; // 是否已经存在 - let existingShip = shipDataList.find((shipItem) => shipItem.trackId === messageData.trackId); + let existingShip = mixShipList.find((shipItem) => shipItem.trackId === mixData.trackId); if (existingShip) { // 添加新的轨迹点 - window.$earth.getObject(existingShip.track_guid).positions.push([toRadians(messageData.longitude), toRadians(messageData.latitude), 0]); + window.$earth.getObject(existingShip.track_guid).positions.push([toRadians(mixData.longitude + 0.0001), toRadians(mixData.latitude + 0.0001), 0]); // 获取场景中的船只信息 let shipData = window.$earth.getObject(existingShip.guid); // 更新位置和航向 - shipData.xbsjPosition = [toRadians(messageData.longitude), toRadians(messageData.latitude), 0]; + shipData.xbsjPosition = [toRadians(mixData.longitude + 0.0001), toRadians(mixData.latitude + 0.0001), 0]; // 航向需要后续调整。。。 - shipData.xbsjRotation = [(Math.PI / 180) * (messageData.course + 90), 0, 0]; + shipData.xbsjRotation = [(Math.PI / 180) * (mixData.course - 90), 0, 0]; } else { - // 添加新的船只 - shipDataList.push({ - name: `${messageData.trackId}号船只`, // 名称 - trackId: messageData.trackId, // 船只id - guid: drawShips(messageData).xbsjGuid, // 船只模型id - track_guid: addShipTrack([[toRadians(messageData.longitude), toRadians(messageData.latitude), 0]]).xbsjGuid, // 轨迹线guid，用于轨迹显隐 - azimuth: messageData.azimuth, // 方位角 - course: messageData.course, // 航向 - latitude: messageData.latitude, // 纬度 - longitude: messageData.longitude, // 经度 + // 添加新的融合船只 + mixShipList.push({ + name: `${mixData.trackId}号船_mix`, // 名称 + trackId: mixData.trackId, // 船只id + guid: drawMixShips(mixData).xbsjGuid, // 船只场景id + // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid，用于轨迹显隐 + track_guid: addShipTrack([[toRadians(mixData.longitude + 0.0001), toRadians(mixData.latitude + 0.0001), 0]], 3).xbsjGuid, + azimuth: mixData.azimuth, // 方位角 + course: mixData.course, // 航向 + latitude: mixData.latitude + 0.0001, // 纬度 + longitude: mixData.longitude + 0.0001, // 经度 + radarId: mixData.radarId, // 雷达Id }); // 更新store - store.shipDataList = shipDataList; + store.mixShipList = mixShipList; } }; diff --git a/src/views/earthMap/edit/EarthComp.vue b/src/views/earthMap/edit/EarthComp.vue index 6c99f5b..a768e37 100644 --- a/src/views/earthMap/edit/EarthComp.vue +++ b/src/views/earthMap/edit/EarthComp.vue @@ -86,7 +86,9 @@ > - + + + @@ -108,6 +110,8 @@ import WarnInfoList from '@/components/earthMap/WarnInfoList.vue'; import AISInfoDetail from '@/components/earthMap/AISInfoDetail.vue'; import AISInfoWindow from '@/components/earthMap/AISInfoWindow.vue'; + + import TailAfterWindow from '@/components/earthMap/TailAfterWindow.vue'; import { getRealTime } from '@/utils/date'; import $mitt from '@/utils/earthMap/mitt'; import guid from '@/utils/earthMap/guid'; @@ -115,8 +119,8 @@ import { handleNodeType } from '@/utils/earthMap/handleNodeType'; import { getRandomArr, getHeigthByLonLat } from '@/utils/earthMap/earth'; import redFlag from '@/assets/earthMap/redFlag.png'; - import { addModel, addPin, addViewShedRadar, addShipGroundImg, addShipTrack } from '@/utils/earthMap/earthObj'; - import { drawAllShips } from '@/utils/earthMap/shipDraw'; + import { addModel, addPin, addViewShedRadar, addShipTrack } from '@/utils/earthMap/earthObj'; + import { drawAISShipsList, drawMixShipsList, drawRadarShipsList } from '@/utils/earthMap/shipDraw'; import hidePng from '@/assets/earthMap/hide.png'; import alarmImg from '@/assets/earthMap/alarm.gif'; import VideoFusionWin from './components/VideoFusionWin.vue'; @@ -231,6 +235,7 @@ import { nextTick } from 'vue'; VideoFusionWin, AISInfoDetail, AISInfoWindow, + TailAfterWindow, }, props: { //全部显示 @@ -475,12 +480,12 @@ import { nextTick } from 'vue'; PropsDrawInitShow = this.drawInitShow; PropsKeyControlInitShow = this.keyControlInitShow; /////////////////////////////////////////////////////////////////////////// - //AIS信息窗口显示 + // AIS信息窗口显隐状态 AISInfoWindowShow = false; - // 船只guid - ship_guid = '123456'; - // 船只ais信息 - ship_aisData = {}; + // 跟踪窗口显隐状态 + TailAfterWindowShow = false; + // 船只场景id + ship_guid = ''; // 添加地图上的鼠标监听事件 // pin: any = undefined; @@ -1154,7 +1159,13 @@ import { nextTick } from 'vue'; }); // 监听mqtt消息 $mitt.on('deviceCmd', (message: any) => { - drawAllShips(message); + let data = JSON.parse(message); + // 绘制雷达船只 + drawRadarShipsList(data); + // 绘制AIS船只 + drawAISShipsList(data); + // 绘制融合船只 + drawMixShipsList(data); }); } } diff --git a/src/views/earthMap/edit/EarthCompTest.vue b/src/views/earthMap/edit/EarthCompTest.vue index ed9008e..e7f34bf 100644 --- a/src/views/earthMap/edit/EarthCompTest.vue +++ b/src/views/earthMap/edit/EarthCompTest.vue @@ -4,108 +4,129 @@ --更换创建方式 --> - diff --git a/src/views/earthMap/show/EarthComp.vue b/src/views/earthMap/show/EarthComp.vue index 86d1a7f..63124ba 100644 --- a/src/views/earthMap/show/EarthComp.vue +++ b/src/views/earthMap/show/EarthComp.vue @@ -78,102 +78,100 @@ diff --git a/src/views/military/modules/earthMap/camera/MsCameraSiteList.vue b/src/views/military/modules/earthMap/camera/MsCameraSiteList.vue index 73fc0c2..d6c4e88 100644 --- a/src/views/military/modules/earthMap/camera/MsCameraSiteList.vue +++ b/src/views/military/modules/earthMap/camera/MsCameraSiteList.vue @@ -2,7 +2,7 @@ 视频监控点位管理 目录位置：三维地图管理 -> 视频监控点位管理 - 功能概述：所在场景下的防区的监控杆，位置名称 + 功能概述：所在场景下的防区的监控杆，位置名称 （已弃用） -->