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 36f64d5..80bb48a 100644 Binary files a/src/assets/images/ship.png and b/src/assets/images/ship.png differ diff --git a/src/assets/images/ship_a.png b/src/assets/images/ship_a.png index 62a9a9e..ff204f1 100644 Binary files a/src/assets/images/ship_a.png and b/src/assets/images/ship_a.png differ diff --git a/src/components/earthMap/AISInfoWindow.vue b/src/components/earthMap/AISInfoWindow.vue index 9b5112f..67edf32 100644 --- a/src/components/earthMap/AISInfoWindow.vue +++ b/src/components/earthMap/AISInfoWindow.vue @@ -2,7 +2,7 @@ * @Author: Fuyuu 1805498209@qq.com * @Date: 2024-01-05 14:18:33 * @LastEditors: Fuyuu 1805498209@qq.com - * @LastEditTime: 2024-01-12 17:55:17 + * @LastEditTime: 2024-01-20 14:57:59 * @FilePath: \dt-admin-pc-v2\src\components\earthMap\AISInfoWindow.vue * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> @@ -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 @@ 视频监控点位管理 目录位置：三维地图管理 -> 视频监控点位管理 - 功能概述：所在场景下的防区的监控杆，位置名称 + 功能概述：所在场景下的防区的监控杆，位置名称 （已弃用） -->