Browse Source

1、添加多种数据类型的船型,并实现船只和轨迹的切换

2、添加光电追踪窗口,视频监控依赖在电子地图中无法引入,后续抽离出单独项目后补充
master
Fuyuu 11 months ago
parent
commit
5b1eb38ee5
  1. 2
      .env.development
  2. 16
      build/vite/plugin/index.ts
  3. 113
      electron/electron.js
  4. 2
      electron/preload.js
  5. 1
      index.html
  6. BIN
      src/assets/images/ship.png
  7. BIN
      src/assets/images/ship_a.png
  8. 136
      src/components/earthMap/AISInfoWindow.vue
  9. 259
      src/components/earthMap/ShowHideControl.vue
  10. 81
      src/components/earthMap/TailAfterWindow.vue
  11. 6
      src/store/modules/earthMap.ts
  12. 121
      src/utils/earthMap/earthObj.ts
  13. 313
      src/utils/earthMap/getCameraInfo.ts
  14. 779
      src/utils/earthMap/listenMouseHandler.ts
  15. 196
      src/utils/earthMap/shipDraw.ts
  16. 29
      src/views/earthMap/edit/EarthComp.vue
  17. 2967
      src/views/earthMap/edit/EarthCompTest.vue
  18. 1851
      src/views/earthMap/show/EarthComp.vue
  19. 10
      src/views/military/modules/earthMap/camera/MsCameraSiteList.vue

2
.env.development

@ -2,7 +2,7 @@
# @Author: Fuyuu 1805498209@qq.com # @Author: Fuyuu 1805498209@qq.com
# @Date: 2023-11-24 10:15:22 # @Date: 2023-11-24 10:15:22
# @LastEditors: Fuyuu 1805498209@qq.com # @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 # @FilePath: \dt-admin-pc\.env.development
# @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE # @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
### ###

16
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 { PluginOption } from 'vite';
import vue from '@vitejs/plugin-vue'; import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx'; 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 windiCSS from 'vite-plugin-windicss';
import VitePluginCertificate from 'vite-plugin-mkcert'; import VitePluginCertificate from 'vite-plugin-mkcert';
import vueSetupExtend from 'vite-plugin-vue-setup-extend'; import vueSetupExtend from 'vite-plugin-vue-setup-extend';
// import requireTransform from 'vite-plugin-require-transform';
import { configHtmlPlugin } from './html'; import { configHtmlPlugin } from './html';
import { configPwaConfig } from './pwa'; import { configPwaConfig } from './pwa';
import { configMockPlugin } from './mock'; import { configMockPlugin } from './mock';
@ -15,8 +24,8 @@ import { configVisualizerConfig } from './visualizer';
import { configThemePlugin } from './theme'; import { configThemePlugin } from './theme';
import { configImageminPlugin } from './imagemin'; import { configImageminPlugin } from './imagemin';
import { configSvgIconsPlugin } from './svgSprite'; import { configSvgIconsPlugin } from './svgSprite';
import OptimizationPersist from 'vite-plugin-optimize-persist' import OptimizationPersist from 'vite-plugin-optimize-persist';
import PkgConfig from 'vite-plugin-package-config' import PkgConfig from 'vite-plugin-package-config';
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) { 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; 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({ VitePluginCertificate({
source: 'coding', source: 'coding',
}), }),
// requireTransform({
// fileRegex: /.js$|.vue$/,
// }),
]; ];
// vite-plugin-windicss // vite-plugin-windicss

113
electron/electron.js

@ -2,10 +2,10 @@
const path = require('path'); const path = require('path');
const { app, BrowserWindow, ipcMain } = require('electron'); 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二进制文件 // rtsp相关,ffmpeg-static会自动下载对应平台windos,linux,mac(intle),mac(M1版本)的ffmpeg二进制文件
const ffmpegPath = require('ffmpeg-static') const ffmpegPath = require('ffmpeg-static');
/** /**
stream相关配置及方法 stream相关配置及方法
name = options.name name = options.name
@ -18,35 +18,34 @@ const ffmpegPath = require('ffmpeg-static')
ffmpegPath = options?.ffmpegPath ?? ffmpeg ffmpegPath = options?.ffmpegPath ?? ffmpeg
stop() stop()
*/ */
const Stream = require('node-rtsp-stream') const Stream = require('node-rtsp-stream');
/** /**
* rtsp列表 * rtsp列表
* interface { * interface {
* rtspUrl: { * rtspUrl: {
* ws: websocket地址 * ws: websocket地址
* stream: stream实例 * stream: stream实例
* } * }
* } * }
*/ */
const rtspOpenders = {} const rtspOpenders = {};
let addPort = 9000 let addPort = 9000;
/** /**
* 开启rtsp * 开启rtsp
* @param rtsp {String} rtsp流地址 * @param rtsp {String} rtsp流地址
*/ */
ipcMain.on('openRtsp', (event, rtsp) => { ipcMain.on('openRtsp', (event, rtsp) => {
/** 判断是否已开启,若已开启,直接返回ws地址, 未开启则先开启再返回 */ /** 判断是否已开启,若已开启,直接返回ws地址, 未开启则先开启再返回 */
if (rtspOpenders[rtsp]) { if (rtspOpenders[rtsp]) {
event.returnValue = { event.returnValue = {
code: 200, code: 200,
msg: '开启成功', msg: '开启成功',
ws: rtspOpenders[rtsp].ws ws: rtspOpenders[rtsp].ws,
} };
} else { } else {
addPort++ addPort++;
const stream = new Stream({ const stream = new Stream({
name: `socket-${addPort}`, name: `socket-${addPort}`,
streamUrl: rtsp, streamUrl: rtsp,
@ -54,27 +53,27 @@ ipcMain.on('openRtsp', (event, rtsp) => {
ffmpegPath: app.isPackaged ? ffmpegPath.replace('app.asar', 'app.asar.unpacked') : ffmpegPath, ffmpegPath: app.isPackaged ? ffmpegPath.replace('app.asar', 'app.asar.unpacked') : ffmpegPath,
ffmpegOptions: { ffmpegOptions: {
'-stats': '', '-stats': '',
'-r': 30 '-r': 30,
} },
}).on('exitWithError', () => { }).on('exitWithError', () => {
stream.stop() stream.stop();
delete rtspOpenders[rtsp] delete rtspOpenders[rtsp];
event.returnValue = { event.returnValue = {
code: 400, code: 400,
msg: '开启失败' msg: '开启失败',
} };
}) });
rtspOpenders[rtsp] = { rtspOpenders[rtsp] = {
ws: `ws://localhost:${addPort}`, ws: `ws://localhost:${addPort}`,
stream: stream stream: stream,
} };
event.returnValue = { event.returnValue = {
code: 200, code: 200,
msg: '开启成功', msg: '开启成功',
ws: rtspOpenders[rtsp].ws ws: rtspOpenders[rtsp].ws,
} };
} }
}) });
/** /**
* 关闭rtsp * 关闭rtsp
@ -82,22 +81,21 @@ ipcMain.on('openRtsp', (event, rtsp) => {
ipcMain.on('closeRtsp', (event, rtsp) => { ipcMain.on('closeRtsp', (event, rtsp) => {
if (rtspOpenders[rtsp]) { if (rtspOpenders[rtsp]) {
// 停止解析 // 停止解析
rtspOpenders[rtsp].stream.stop() rtspOpenders[rtsp].stream.stop();
// 删除该项 // 删除该项
delete rtspOpenders[rtsp] delete rtspOpenders[rtsp];
// 返回结果 // 返回结果
event.returnValue = { event.returnValue = {
code: 200, code: 200,
msg: '关闭成功' msg: '关闭成功',
} };
} else { } else {
event.returnValue = { event.returnValue = {
code: 400, code: 400,
msg: '未找到该rtsp' msg: '未找到该rtsp',
} };
} }
}) });
/////////////////////////////////////////// ///////////////////////////////////////////
@ -107,31 +105,24 @@ function createWindow() {
width: 800, width: 800,
height: 600, height: 600,
webPreferences: { webPreferences: {
//preload: path.join(__dirname, 'preload.js'), preload: path.join(__dirname, 'preload.js'),
javascript: true, javascript: true,
plugins: true, plugins: true,
allowRunningInsecureContent: true, // 允许web端使用node
// 允许web断使用node
nodeIntegration: true, nodeIntegration: true,
contextIsolation: false, contextIsolation: false,
// 同源策略关闭
webSecurity: false,
}, },
}); });
// and load the index.html of the app. // and load the index.html of the app.
// win.loadFile("index.html"); // win.loadFile("index.html");
mainWindow.loadURL( mainWindow.loadURL(isDev ? 'http://localhost:3200' : `file://${path.join(__dirname, '../dist/index.html')}`);
isDev
? 'http://localhost:3200'
: `file://${path.join(__dirname, '../dist/index.html')}`
);
// mainWindow.loadURL('http://127.0.0.1:5500'); // mainWindow.loadURL('http://127.0.0.1:5500');
// Open the DevTools. // Open the DevTools.
// if (isDev) { // if (isDev) {
mainWindow.webContents.openDevTools(); mainWindow.webContents.openDevTools();
// } // }
} }
@ -139,12 +130,12 @@ function createWindow() {
// initialization and is ready to create browser windows. // initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs. // Some APIs can only be used after this event occurs.
app.whenReady().then(() => { app.whenReady().then(() => {
createWindow() createWindow();
app.on('activate', function () { app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the // 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. // 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 // Quit when all windows are closed, except on macOS. There, it's common
@ -155,3 +146,19 @@ app.on('window-all-closed', () => {
app.quit(); 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)
`
);
});
});
});

2
electron/preload.js

@ -0,0 +1,2 @@
window.ipcRenderer = require('electron').ipcRenderer;
console.log('再次运行');

1
index.html

@ -16,6 +16,7 @@
<link rel="icon" href="/zgxlogo.png" /> <link rel="icon" href="/zgxlogo.png" />
<!-- 全局配置 --> <!-- 全局配置 -->
<script> <script>
console.log('window', window);
window._CONFIG = {}; window._CONFIG = {};
</script> </script>
</head> </head>

BIN
src/assets/images/ship.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/images/ship_a.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

136
src/components/earthMap/AISInfoWindow.vue

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com * @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-05 14:18:33 * @Date: 2024-01-05 14:18:33
* @LastEditors: Fuyuu 1805498209@qq.com * @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 * @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 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
@ -12,7 +12,7 @@
:title="title" :title="title"
:width="600" :width="600"
:minWidth="600" :minWidth="600"
:height="380" :height="420"
:left="80" :left="80"
:top="70" :top="70"
@cancel="cancel" @cancel="cancel"
@ -25,11 +25,11 @@
<div class="ais_content"> <div class="ais_content">
<div class="content_item"> <div class="content_item">
<div class="item_title">船名:</div> <div class="item_title">船名:</div>
<div class="item_content">顺宏海1026</div> <div class="item_content">{{ AISInfo.name }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">MMSI:</div> <div class="item_title">MMSI:</div>
<div class="item_content">413495860</div> <div class="item_content">{{ AISInfo.mmsi }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">船首向:</div> <div class="item_title">船首向:</div>
@ -45,7 +45,7 @@
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">IMO:</div> <div class="item_title">IMO:</div>
<div class="item_content">458876</div> <div class="item_content">{{ AISInfo.imo }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">航速:</div> <div class="item_title">航速:</div>
@ -53,11 +53,11 @@
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">经度:</div> <div class="item_title">经度:</div>
<div class="item_content">113-26.578E</div> <div class="item_content">{{ AISInfo.longitude }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">纬度:</div> <div class="item_title">纬度:</div>
<div class="item_content">22-08.082N</div> <div class="item_content">{{ AISInfo.latitude }}</div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="item_title">状态:</div> <div class="item_title">状态:</div>
@ -96,6 +96,14 @@
<div class="item_title">航行轨迹:</div> <div class="item_title">航行轨迹:</div>
<a-switch v-model:checked="checked" @change="changeTrack" /> <a-switch v-model:checked="checked" @change="changeTrack" />
</div> </div>
<!-- 跟踪船只 -->
<div class="content_item">
<div class="item_title">跟踪船只:</div>
<a-button size="small" type="primary" @click="tailAfter()">
跟踪
<EyeOutlined />
</a-button>
</div>
</div> </div>
</Window> </Window>
</div> </div>
@ -106,8 +114,9 @@
import Window from '@/components/earthMap/components/Window.vue'; import Window from '@/components/earthMap/components/Window.vue';
import { useEarthMapStore } from '/@/store/modules/earthMap'; import { useEarthMapStore } from '/@/store/modules/earthMap';
import $mitt from '@/utils/earthMap/mitt'; import $mitt from '@/utils/earthMap/mitt';
// store import { EyeOutlined } from '@ant-design/icons-vue';
const store = useEarthMapStore(); import { defHttp } from '/@/utils/http/axios';
export default defineComponent({ export default defineComponent({
name: 'AISInfoWindow', name: 'AISInfoWindow',
props: { props: {
@ -122,29 +131,47 @@
}, },
components: { components: {
Window, Window,
EyeOutlined,
}, },
setup() { setup() {
// store
const store = useEarthMapStore();
const { proxy }: any = getCurrentInstance(); const { proxy }: any = getCurrentInstance();
// //
const checked = ref(false); const checked = ref(false);
// store // trackId
let foundData = store.shipDataList.filter((item) => item.guid === proxy.ship_guid); const trackId: any = ref('');
// 线id // id
let track_guid = foundData ? foundData[0].track_guid : null; const radarId: any = ref('');
// 线 // AIS
let trackData = window.$earth.getObject(track_guid); const AISInfo: any = ref({});
// // 线
checked.value = trackData.show; const trackData: any = ref({});
// guid
watch(
() => proxy.ship_guid,
(newVal, _oldVal) => {
console.log(newVal);
},
{ immediate: true }
);
// ais线
function getShipAISInfo() {
// ship_guidtrack_idAIS
trackId.value = window.$earth.getObject(proxy.ship_guid).trackId;
// trackIdid
radarId.value = store.radarShipList.filter((item) => item.trackId === trackId.value)[0].radarId;
// storeais
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() { function cancel() {
proxy.$parent.AISInfoWindowShow = false; proxy.$parent.AISInfoWindowShow = false;
@ -153,27 +180,62 @@
function changeTrack(e) { function changeTrack(e) {
checked.value = e; checked.value = e;
// 使show // 使show
trackData.show = e; trackData.value.show = e;
// 线
$mitt.emit('trackShowChange', e);
} }
//
function tailAfter() {
//
proxy.$parent.TailAfterWindowShow = true;
// idtrackIdidradarIdtracking0 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) => { $mitt.on('trackAllChange', (data: any) => {
// if (trackData.value.name.includes(data.type)) {
if (!e) { checked.value = data.status;
cancel()
} }
}) });
// guid
watch(
() => proxy.ship_guid,
(_newVal, _oldVal) => {
// AIS
getShipAISInfo();
},
{ immediate: true }
);
return { return {
checked, checked,
AISInfo,
cancel, cancel,
changeTrack, changeTrack,
tailAfter,
}; };
}, },
}); });

259
src/components/earthMap/ShowHideControl.vue

@ -1,47 +1,126 @@
<template> <template>
<div class="showhideControl"> <div class="showhideControl">
<a-dropdown :trigger="['click']"> <!-- <a-dropdown :trigger="['click']">
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<a-menu-item key="1"> <a-menu-item key="1">
<label for="ship-switch" style="margin-top: 2px">船只模型</label> <label for="ship-switch" style="margin-top: 2px">船只模型</label>
<a-switch id="ship-switch" v-model:checked="shipShow" @change="changeShipShow" checked-children="显示" un-checked-children="隐藏" /> <a-switch id="ship-switch" v-model:checked="shipShow" @change="changeShipShow" checked-children="显示" un-checked-children="隐藏" />
</a-menu-item> </a-menu-item>
<a-menu-item key="1"> <a-menu-item key="2">
<label for="track-switch" style="margin-top: 2px">船只轨迹</label> <label for="track-switch" style="margin-top: 2px">船只轨迹</label>
<a-switch id="track-switch" v-model:checked="trackShow" @change="changeTrackShow" checked-children="显示" un-checked-children="隐藏" /> <a-switch id="track-switch" v-model:checked="trackShow" @change="changeTrackShow" checked-children="显示" un-checked-children="隐藏" />
</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
</template> </template>
<a-button> 地图元素显隐 <CaretUpOutlined /></a-button> <a-button> 地图元素显隐 <CaretUpOutlined /></a-button>
</a-dropdown> </a-dropdown> -->
<!-- <div class="control_item">
<a-switch id="ship-switch" v-model:checked="shipShow" @change="changeShipShow" checked-children="显示船只" un-checked-children="隐藏船只" />
</div> -->
<!-- <div class="control_item">
<a-switch id="track-switch" v-model:checked="trackShow" @change="changeTrackShow" checked-children="显示轨迹" un-checked-children="隐藏轨迹" />
</div> -->
<div class="control_item">
<a-switch
id="ais-switch"
v-model:checked="aisTypeShow"
@change="changeAISType"
checked-children="AIS显示&nbsp;&nbsp;"
un-checked-children="AIS隐藏&nbsp;&nbsp;"
/>
</div>
<div class="control_item">
<a-switch
id="radar-switch"
v-model:checked="radarTypeShow"
@change="changeRadarType"
checked-children="雷达显示"
un-checked-children="雷达隐藏"
/>
</div>
<div class="control_item">
<a-switch id="mix-switch" v-model:checked="mixTypeShow" @change="changeMixType" checked-children="融合显示" un-checked-children="融合隐藏" />
</div>
<div class="control_item">
<a-button size="small" @click="changeTrackStatus(true)">打开轨迹</a-button>
<a-button size="small" @click="changeTrackStatus(false)">关闭轨迹</a-button>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, nextTick, watch } from 'vue'; import { defineComponent, ref, nextTick } from 'vue';
import { CaretUpOutlined } from '@ant-design/icons-vue'; import { CaretUpOutlined } from '@ant-design/icons-vue';
import $mitt from '@/utils/earthMap/mitt'; import $mitt from '@/utils/earthMap/mitt';
export default defineComponent({ export default defineComponent({
setup() { setup() {
// //
const shipShow = ref<boolean>(true); // const shipShow = ref<boolean>(true);
// //
const trackShow = ref<boolean>(true); // const trackShow = ref<boolean>(true);
//
const radarTypeShow = ref<boolean>(true);
//
const mixTypeShow = ref<boolean>(true);
// AIS
const aisTypeShow = ref<boolean>(true);
// //
const shipList = ref([]); const shipList = ref([]);
// ais
const aisShipList = ref([]);
//
const radarShipList = ref([]);
//
const mixShipList = ref([]);
// //
const trackList = ref([]); const trackList = ref([]);
//
const radarTrackList = ref([]);
// ais
const aisTrackList = ref([]);
//
const mixTrackList = ref([]);
// //
function getShipInfo() { function getShipInfo() {
// //
let earthMapElements = window.$earth.getAllObjects(); let earthMapElements = window.$earth.getAllObjects();
// //
let earthMapShips = earthMapElements.filter((item) => item.name && item.name.includes('船')); let earthMapShips = earthMapElements.filter((item) => item.name && item.name.includes('船'));
// ais
let earthMapAisShips = earthMapElements.filter((item) => item.name && item.name.includes('船_ais'));
//
let earthMapRadarShips = earthMapElements.filter((item) => item.name && item.name.includes('船_radar'));
//
let earthMapMixShips = earthMapElements.filter((item) => item.name && item.name.includes('船_mix'));
if (earthMapShips.length > 0) { if (earthMapShips.length > 0) {
// //
shipShow.value = earthMapShips.every((item) => item.show === true); // shipShow.value = earthMapShips.every((item) => item.show === true);
// //
shipList.value = earthMapShips; shipList.value = earthMapShips;
if (earthMapAisShips.length > 0) {
// ais
aisTypeShow.value = earthMapAisShips.every((item) => item.show === true);
// ais
aisShipList.value = earthMapAisShips;
} else {
console.log('当前场景没有ais船只');
}
if (earthMapRadarShips.length > 0) {
//
radarTypeShow.value = earthMapRadarShips.every((item) => item.show === true);
//
radarShipList.value = earthMapRadarShips;
} else {
console.log('当前场景没有雷达船只');
}
if (earthMapMixShips.length > 0) {
//
mixTypeShow.value = earthMapMixShips.every((item) => item.show === true);
//
mixShipList.value = earthMapMixShips;
} else {
console.log('当前场景没有融合船只');
}
} else { } else {
console.log('当前场景没有船只'); console.log('当前场景没有船只');
} }
@ -52,11 +131,29 @@
let earthMapElements = window.$earth.getAllObjects(); let earthMapElements = window.$earth.getAllObjects();
// //
let earthMapTracks = earthMapElements.filter((item) => item.name && item.name.includes('轨迹线')); let earthMapTracks = earthMapElements.filter((item) => item.name && item.name.includes('轨迹线'));
let earthMapRadarTracks = earthMapElements.filter((item) => item.name && item.name.includes('轨迹线_radar'));
let earthMapAisTracks = earthMapElements.filter((item) => item.name && item.name.includes('轨迹线_ais'));
let earthMapMixTracks = earthMapElements.filter((item) => item.name && item.name.includes('轨迹线_mix'));
if (earthMapTracks.length > 0) { if (earthMapTracks.length > 0) {
// //
trackShow.value = earthMapTracks.every((item) => item.show === true); // trackShow.value = earthMapTracks.every((item) => item.show === true);
// //
trackList.value = earthMapTracks; trackList.value = earthMapTracks;
if (earthMapRadarTracks.length > 0) {
radarTrackList.value = earthMapRadarTracks;
} else {
console.log('当前场景没有雷达轨迹线');
}
if (earthMapAisTracks.length > 0) {
aisTrackList.value = earthMapAisTracks;
} else {
console.log('当前场景没有ais轨迹线');
}
if (earthMapMixTracks.length > 0) {
mixTrackList.value = earthMapMixTracks;
} else {
console.log('当前场景没有融合轨迹线');
}
} else { } else {
console.log('当前场景没有轨迹线'); console.log('当前场景没有轨迹线');
} }
@ -66,14 +163,14 @@
if (shipList.value.length > 0) { if (shipList.value.length > 0) {
if (!e) { if (!e) {
// //
trackShow.value = false; // trackShow.value = false;
// //
trackList.value.forEach((item: any) => { trackList.value.forEach((item: any) => {
item.show = false; item.show = false;
}); });
} }
// //
shipShow.value = e; // shipShow.value = e;
shipList.value.forEach((item: any) => { shipList.value.forEach((item: any) => {
// //
item.show = e; item.show = e;
@ -85,34 +182,105 @@
// 线 // 线
function changeTrackShow(e) { function changeTrackShow(e) {
if (trackList.value.length > 0) { if (trackList.value.length > 0) {
if (shipShow.value) { // if (shipShow.value) {
// // //
trackShow.value = e; // trackShow.value = e;
trackList.value.forEach((item: any) => { // trackList.value.forEach((item: any) => {
// //
// item.show = e;
// });
// } else {
// trackShow.value = false;
// console.log('');
// }
} else {
console.log('当前场景没有轨迹线');
}
}
//
function changeRadarType(e) {
if (radarShipList.value.length > 0) {
if (!e) {
//
radarTrackList.value.forEach((item: any) => {
// //
item.show = e; item.show = e;
}); });
} else { $mitt.emit('trackChange', 'radar');
trackShow.value = false;
console.log('请先打开显示船只模型');
} }
//
radarTypeShow.value = e;
radarShipList.value.forEach((item: any) => {
//
item.show = e;
});
} else { } else {
console.log('当前场景没有船只'); console.log('当前场景没有雷达船只');
}
}
//
function changeMixType(e) {
if (mixShipList.value.length > 0) {
if (!e) {
//
mixTrackList.value.forEach((item: any) => {
//
item.show = e;
});
$mitt.emit('trackChange', 'mix');
}
//
mixTypeShow.value = e;
mixShipList.value.forEach((item: any) => {
//
item.show = e;
});
} else {
console.log('当前场景没有融合船只');
}
}
// AIS
function changeAISType(e) {
if (aisShipList.value.length > 0) {
if (!e) {
//
aisTrackList.value.forEach((item: any) => {
//
item.show = e;
});
$mitt.emit('trackChange', 'ais');
}
//
aisTypeShow.value = e;
aisShipList.value.forEach((item: any) => {
//
item.show = e;
});
} else {
console.log('当前场景没有AIS船只');
}
}
//
function changeTrackStatus(e) {
if (radarTypeShow.value) {
radarTrackList.value.forEach((item: any) => {
item.show = e;
});
$mitt.emit('trackAllChange', { status: e, type: 'radar' });
}
if (mixTypeShow.value) {
mixTrackList.value.forEach((item: any) => {
item.show = e;
});
$mitt.emit('trackAllChange', { status: e, type: 'mix' });
}
if (aisTypeShow.value) {
aisTrackList.value.forEach((item: any) => {
item.show = e;
});
$mitt.emit('trackAllChange', { status: e, type: 'ais' });
} }
} }
// 线
watch(trackShow, (newValue, _oldValue) => {
// 线
$mitt.emit('trackAllChange', newValue);
});
//
watch(shipShow, (newValue, _oldValue) => {
// 线
$mitt.emit('shipAllChange', newValue);
});
// mqtt // mqtt
$mitt.on('deviceCmd', () => { $mitt.on('deviceCmd', () => {
nextTick(() => { nextTick(() => {
@ -122,25 +290,19 @@
getTrackInfo(); getTrackInfo();
}); });
}); });
// 线
$mitt.on('trackShowChange', (e: boolean) => {
if (!e) {
//
trackShow.value = e;
} else {
//
trackShow.value = window.$earth
.getAllObjects()
.filter((item) => item.name && item.name.includes('轨迹线'))
.every((item) => item.show === true);
}
});
return { return {
shipShow, // shipShow,
trackShow, // trackShow,
radarTypeShow,
mixTypeShow,
aisTypeShow,
changeShipShow, changeShipShow,
changeTrackShow, changeTrackShow,
changeRadarType,
changeMixType,
changeAISType,
changeTrackStatus,
}; };
}, },
components: { components: {
@ -151,8 +313,11 @@
<style lang="less" scoped> <style lang="less" scoped>
.showhideControl { .showhideControl {
position: absolute; position: absolute;
left: 0; left: 10px;
bottom: 30px; bottom: 30px;
z-index: 99999; z-index: 99999;
.control_item {
margin: 8px 0;
}
} }
</style> </style>

81
src/components/earthMap/TailAfterWindow.vue

@ -0,0 +1,81 @@
<!--
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-18 16:42:29
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-20 18:02:10
* @FilePath: \dt-admin-pc-v2\src\components\earthMap\TailAfterWindow.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="TailAfter">
<Window
:title="title"
:width="1280"
:minWidth="1280"
:height="720"
:left="100"
:top="100"
@cancel="cancel"
:floatright="false"
:showCancelButton="true"
:footervisible="false"
:showcloseButton="true"
id="tailAfterWindow"
>
<div class="mpegPlayer" ref="mpegPlayer"></div>
</Window>
</div>
</template>
<script lang="ts" setup>
import { getCurrentInstance, ref, onMounted, onBeforeUnmount } from 'vue';
import Window from '@/components/earthMap/components/Window.vue';
import MpegPlayer from 'jsmpeg-player';
const props = defineProps({
title: {
type: String,
default: '光电跟踪',
},
});
// ipcRenderer
// import { ipcRenderer } from 'electron';
const ipcRenderer: any = ref(null);
const { proxy }: any = getCurrentInstance();
// DOM
const mpegPlayer = ref();
// rtsp
const videoUrl = ref('rtsp://admin:123456@192.168.1.71:554/');
//
let player: any = ref(null);
//
const open = () => {
const res = ipcRenderer.sendSync('openRtsp', videoUrl.value);
if (res.code === 200) {
player.value = new MpegPlayer.VideoElement(mpegPlayer.value, res.ws);
}
};
//
const close = () => {
ipcRenderer.sendSync('closeRtsp', videoUrl.value);
};
//
function cancel() {
proxy.$parent.TailAfterWindowShow = false;
}
onMounted(() => {
open();
});
onBeforeUnmount(() => {
close();
});
</script>
<style lang="less" scoped>
#tailAfterWindow .xbsj-model-header .xbsj-model-arrow {
right: 25px;
}
.mpegPlayer {
width: 100%;
height: 720px;
background: #000;
}
</style>

6
src/store/modules/earthMap.ts

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com * @Author: Fuyuu 1805498209@qq.com
* @Date: 2023-12-15 16:47:17 * @Date: 2023-12-15 16:47:17
* @LastEditors: Fuyuu 1805498209@qq.com * @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 * @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 * @Description: ,`customMade`, koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@ -19,7 +19,9 @@ export const useEarthMapStore = defineStore({
shapeList: <any>[], //绘画数组(区域) shapeList: <any>[], //绘画数组(区域)
shapeShowList: <any>[], //绘画存储(临时) shapeShowList: <any>[], //绘画存储(临时)
keyAreaPos: <number[][]>[], //记录创建防区的点位,重点管控区域 keyAreaPos: <number[][]>[], //记录创建防区的点位,重点管控区域
shipDataList: <any>[], //船只数据列表 aisShipList: <any>[], // ais船只数据列表
radarShipList: <any>[], // 雷达船只数据列表
mixShipList: <any>[], // 融合船只数据列表
xbsjEarthUI: <any>null, //XbsjEarthUI xbsjEarthUI: <any>null, //XbsjEarthUI
/////////////////////// ///////////////////////
cameraData: <any>{},//请求的电线杆数据 cameraData: <any>{},//请求的电线杆数据

121
src/utils/earthMap/earthObj.ts

@ -322,43 +322,101 @@ export const addCustomPrimitive = (
return cp; return cp;
}; };
// 创建船只贴地图片 // 创建船只三角模型
export const addShipGroundImg = (lon: number, lat: number, height: number, imgUrl: string, imgUrl_a: string, rt: number, trackId: number) => { export const addShipTriangle = (options: any = {}) => {
const shipGroundImg = new window.XE.Obj.GroundImage(window.$earth); const shipTriangle = new window.XE.Obj.GroundImage(window.$earth);
const objConfig = { const objConfig = {
name: `${trackId}号船只`, name: options.name, // 实例名称
trackId, imageUrls: [options.imageUrl], // 标识图片资源路径
position: [window.Cesium.Math.toRadians(lon), window.Cesium.Math.toRadians(lat), height], trackId: options.id, // 船只trackid
loopPlay: false, position: options.position, // 位置数组 [经度、纬度、高度]
imageUrls: [imgUrl], rotation: options.rotation, // 偏航角
rotation: -(Math.PI / 180) * rt, loopPlay: false, // 是否轮播
ground: false, ground: false, // 是否贴地
height: 80,
width: 60,
}; };
shipGroundImg.xbsjFromJSON(objConfig); shipTriangle.xbsjFromJSON(objConfig);
//移入事件 //移入事件
shipGroundImg.onmouseover = (e: any) => { shipTriangle.onmouseover = () => {
e.id.imageUrls = [imgUrl_a];
window.$earth.czm.viewer._container.style.cursor = 'pointer'; window.$earth.czm.viewer._container.style.cursor = 'pointer';
}; };
//移出事件 //移出事件
shipGroundImg.onmouseout = (e: any) => { shipTriangle.onmouseout = () => {
e.id.imageUrls = [imgUrl];
window.$earth.czm.viewer._container.style.cursor = 'default'; 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); const tileset = new window.XE.Obj.Model(window.$earth);
// 创建一个Model对象 // 创建一个Model对象
const objConfig = { const objConfig = {
name: name, name: options.name, // 实例名称
url: options.url, url: options.modelUrl, // 模型资源路径
id: options.id, trackId: options.id, // 船只trackid
xbsjPosition: options.position, // 位置数组 [经度、纬度、高度] xbsjPosition: options.position, // 位置数组 [经度、纬度、高度]
xbsjRotation: options.rotation, // 姿态数组 [偏航角、俯仰角、翻转角] xbsjRotation: options.rotation, // 姿态数组 [偏航角、俯仰角、翻转角]
xbsjScale: [0.5, 0.5, 0.5], // 缩放比例 xbsjScale: [1, 1, 1], // 缩放比例
show: true, 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); tileset.xbsjFromJSON(objConfig);
//移入事件 //移入事件
@ -371,23 +429,22 @@ export const addShipModel = (name: string, options: any = {}) => {
}; };
return tileset; return tileset;
}; };
// 创建船只轨迹 // 创建船只轨迹
export const addShipTrack = (positions: number[][]) => { export const addShipTrack = (positions: number[][], dataType: number) => {
const shipTrack = new window.XE.Obj.Polyline(window.$earth); const shipTrack = new window.XE.Obj.Polyline(window.$earth);
const objConfig = { const objConfig = {
width: 3.0, width: 2.0, // 线宽
name: '轨迹线', name: `轨迹线_${dataType == 1 ? 'radar' : dataType == 2 ? 'ais' : 'mix'}`, // 实例名称
positions, positions, // 点坐标经纬度数组 [经度、纬度、高度]
material: { material: {
type: 'XbsjODLineMaterial', type: 'XbsjODLineMaterial', // 材质类型
XbsjODLineMaterial: { XbsjODLineMaterial: {
bgColor: [1, 1, 0.03, 1], 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: [1, 0, 1, 1], color: dataType == 1 ? [1, 1, 0.03, 1] : dataType == 2 ? [0.94, 0.13, 0.03, 1] : [1, 1, 1, 1], // 颜色
glowPower: 0.6, glowPower: 0.6, // 发光程度
}, },
}, },
ground: true, ground: true, // 是否贴地
}; };
shipTrack.xbsjFromJSON(objConfig); shipTrack.xbsjFromJSON(objConfig);
return shipTrack; return shipTrack;

313
src/utils/earthMap/getCameraInfo.ts

@ -6,181 +6,178 @@ import { defHttp } from '/@/utils/http/axios';
import { addPin } from '@/utils/earthMap/earthObj'; import { addPin } from '@/utils/earthMap/earthObj';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { useEarthMapStore } from '/@/store/modules/earthMap'; import { useEarthMapStore } from '/@/store/modules/earthMap';
import { earthMapUrl } from '@/api/earth/earthMap' import { earthMapUrl } from '@/api/earth/earthMap';
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import $ from 'jquery'; import $ from 'jquery';
let userStore = useUserStore(); let userStore = useUserStore();
let store = useEarthMapStore(); let store = useEarthMapStore();
export default function getCameraInfo(models, type) { export default function getCameraInfo(models, type) {
console.log("加载站点"); console.log('加载站点');
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
//请求电线杆信息 //请求电线杆信息
defHttp.get({ url: earthMapUrl.queryCameraInfo }, { isTransformResponse: false }).then(async (res) => { defHttp.get({ url: earthMapUrl.queryCameraInfo }, { isTransformResponse: false }).then(async (res) => {
if (res.success) { if (res.success) {
// console.log("res",res); // console.log("res",res);
setCamera(res.result, models, type); setCamera(res.result, models, type);
store.cameraData = res.result; store.cameraData = res.result;
resolve(models); resolve(models);
} }
});
}); });
});
} }
async function setCamera(res, models, type) { async function setCamera(res, models, type) {
//根据经纬度算出该点地形高度 //根据经纬度算出该点地形高度
let posArr: any = [], let posArr: any = [],
updatedPositions: any = []; updatedPositions: any = [];
//地形是否开启 //地形是否开启
if (window.$earth.sceneTree.$refs.terrain.czmObject.show) { if (window.$earth.sceneTree.$refs.terrain.czmObject.show) {
res.forEach((data, index) => { res.forEach((data, index) => {
if (data.msCameraSiteList != null) { if (data.msCameraSiteList != null) {
data.msCameraSiteList.forEach((data, index) => { data.msCameraSiteList.forEach((data, index) => {
posArr.push(window.Cesium.Cartographic.fromDegrees(data.longitude, data.latitude)); 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 { var promise = window.Cesium.sampleTerrainMostDetailed(this._viewer.terrainProvider, posArr);
res.forEach((data, index) => { updatedPositions = await window.Cesium.when(promise);
if (data.msCameraSiteList != null) { } else {
data.msCameraSiteList.forEach((data, index) => { res.forEach((data, index) => {
updatedPositions.push(window.Cesium.Cartographic.fromDegrees(data.longitude, data.latitude, 0)); 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) => { res.forEach((data, index) => {
// console.log("data",data); // console.log("data",data);
let siteConfig: any = null; let siteConfig: any = null;
const lineId = data.id; const lineId = data.id;
let childs: any = null; let childs: any = null;
if (type == 2) { if (type == 2) {
childs = models.children; childs = models.children;
for (const child of childs) { for (const child of childs) {
if ('node_' + data.id == child.ref) { if ('node_' + data.id == child.ref) {
siteConfig = child.children[0]; siteConfig = child.children[0];
} }
} }
} else { } else {
const parentNode = store.nodeConfigByRef.get('node_' + data.id); const parentNode = store.nodeConfigByRef.get('node_' + data.id);
if (!parentNode) { if (!parentNode) {
return; 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) { let gltfStr;
return; if (!data.modelUrl) {
return;
} }
if (data.msCameraSiteList != null) { let fileInfos = data.modelUrl.split('.');
data.msCameraSiteList.forEach((data, index) => { if (num == 0) {
// 判断电线杆状态 // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + fileInfos[0] + '.' + fileInfos[1];
let num = 0; gltfStr = '/dt/sys/common/static/' + fileInfos[0] + '.' + fileInfos[1];
if (data.msCameraSettingList != null) { } else if (num < data.msCameraSettingList.length) {
data.msCameraSettingList.forEach((data, index) => { let newName = fileInfos[0].substring(0, fileInfos[0].length - 1) + 'R';
if (data.status == '3') { // gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1];
//1-在线,2-离线,3-异常 gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1];
num = num + 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];
let gltfStr; }
if (!data.modelUrl) {
return; const modelConfig = {
} ref: data.id,
let fileInfos = data.modelUrl.split('.'); name: lineId,
if (num == 0) { czmObject: {
// gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + fileInfos[0] + '.' + fileInfos[1]; name: data.sitename,
gltfStr = '/dt/sys/common/static/' + fileInfos[0] + '.' + fileInfos[1]; xbsjType: 'Model',
} else if (num < data.msCameraSettingList.length) { url: gltfStr,
let newName = fileInfos[0].substring(0, fileInfos[0].length - 1) + 'R'; // "color": [0.52, 0.6, 0.58, 1],
// gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1]; minimumPixelSize: data.minimumPixelSize,
gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1]; // maximumScale: 0.02,
} else if (num == data.msCameraSettingList.length) { scale: data.scale,
let newName = fileInfos[0].substring(0, fileInfos[0].length - 1) + 'Y'; xbsjScale: data.xyzScale ? data.xyzScale.split(',') : [1, 1, 1],
// gltfStr = window._CONFIG['domianURL'] + '/sys/common/static/' + newName + '.' + fileInfos[1]; xbsjPosition: [window.Cesium.Math.toRadians(data.longitude), window.Cesium.Math.toRadians(data.latitude), data.height],
gltfStr = '/dt/sys/common/static/' + newName + '.' + fileInfos[1]; xbsjRotation: [window.Cesium.Math.toRadians(data.yaw), window.Cesium.Math.toRadians(data.pitch), window.Cesium.Math.toRadians(data.roll)],
} viewDistance: 150,
const modelConfig = { distanceDisplayCondition: [1.0, 30000.0],
ref: data.id, customProp: 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.root.children.push(modelConfig);
//鼠标事件 //鼠标事件
window.$earth.sceneTree.$refs[data.id].czmObject.onmouseover = () => { window.$earth.sceneTree.$refs[data.id].czmObject.onmouseover = () => {
window.$viewer._container.style.cursor = 'pointer'; window.$viewer._container.style.cursor = 'pointer';
}; };
window.$earth.sceneTree.$refs[data.id].czmObject.onmouseout = () => { window.$earth.sceneTree.$refs[data.id].czmObject.onmouseout = () => {
window.$viewer._container.style.cursor = 'default'; window.$viewer._container.style.cursor = 'default';
}; };
nextTick(() => { nextTick(() => {
const divs = $('#earthContainer>div>div>div:nth-child(5)') const divs = $('#earthContainer>div>div>div:nth-child(5)')
.children('div') .children('div')
.eq(1) .eq(1)
.children() .children()
.eq(0) .eq(0)
.children() .children()
.eq(0) .eq(0)
.children() .children()
.each((index, element) => { .each((index, element) => {
$(element).css('display', 'none'); $(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);
}); });
});
//加载相机
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);
});
}
});
} }

779
src/utils/earthMap/listenMouseHandler.ts

@ -1,14 +1,14 @@
/** /**
* *
* EarthComp.vue * EarthComp.vue
* *
*/ */
import { nextTick } from 'vue'; import { nextTick } from 'vue';
import { defHttp } from '/@/utils/http/axios'; import { defHttp } from '/@/utils/http/axios';
import $ from 'jquery'; import $ from 'jquery';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { useEarthMapStore } from '/@/store/modules/earthMap'; 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 { useMessage } from '/@/hooks/web/useMessage';
import { CircleScan } from '@/utils/earthMap/radarEntity'; import { CircleScan } from '@/utils/earthMap/radarEntity';
import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth'; import { radianToDegreeInLngLatHeight } from '@/utils/earthMap/earth';
@ -19,409 +19,408 @@ let store = useEarthMapStore();
const { createMessage } = useMessage(); const { createMessage } = useMessage();
export default function listenMouseHandler(that) { 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; {
//取消双击旋转事件 handler.setInputAction((click: any) => {
window.$viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(window.Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); if (typeof that._pin !== 'undefined') {
/* MOUSE事件(有性能问题,慎用!) */ // 销毁指示线
that._pin.destroy();
}
/* 鼠标左键事件 */ let pickedFeature = window.$viewer.scene.pick(click.position);
{ console.log('点击:', pickedFeature);
handler.setInputAction((click: any) => {
if (typeof that._pin !== 'undefined') {
// 销毁指示线
that._pin.destroy();
}
let pickedFeature = window.$viewer.scene.pick(click.position);
console.log('点击:', pickedFeature);
if (pickedFeature && pickedFeature.id) { if (pickedFeature && pickedFeature.id) {
// 三维模型 // 三维模型
if (pickedFeature.id.xbsjType && pickedFeature.id.xbsjType === 'Model') { if (pickedFeature.id.xbsjType && pickedFeature.id.xbsjType === 'Model') {
//点击电线杆触发弹窗 //点击电线杆触发弹窗
store.cameraData.forEach((data) => { store.cameraData.forEach((data) => {
if (!$.isEmptyObject(data.msCameraSiteList)) { if (!$.isEmptyObject(data.msCameraSiteList)) {
if (!data.msCameraSiteList) { if (!data.msCameraSiteList) {
return; return;
} }
data.msCameraSiteList.forEach((data) => { data.msCameraSiteList.forEach((data) => {
if (pickedFeature.id.customProp === data.id) { if (pickedFeature.id.customProp === data.id) {
if ($('.cameraModal ul').length > 0) { if ($('.cameraModal ul').length > 0) {
$('.cameraModal ul').remove(); $('.cameraModal ul').remove();
} }
$('.cameraModal').append('<ul></ul>'); $('.cameraModal').append('<ul></ul>');
if (!data.msCameraSettingList) return; if (!data.msCameraSettingList) return;
// 将监控相机列表传入弹窗组件中 // 将监控相机列表传入弹窗组件中
that.cameraList = data.msCameraSettingList; that.cameraList = data.msCameraSettingList;
// 将监控点位置传入弹窗组件中 // 将监控点位置传入弹窗组件中
that.monitorPosition = pickedFeature.id._primitive.xbsjPosition; that.monitorPosition = pickedFeature.id._primitive.xbsjPosition;
data.msCameraSettingList.forEach((data, index) => { data.msCameraSettingList.forEach((data, index) => {
let camera_img = let camera_img =
data.type == '4' data.type == '4'
? window._CONFIG['staticDomainURL'] + '/qiuji.png' ? window._CONFIG['staticDomainURL'] + '/qiuji.png'
: data.type == '3' : data.type == '3'
? window._CONFIG['staticDomainURL'] + '/qiangji.png' ? window._CONFIG['staticDomainURL'] + '/qiangji.png'
: window._CONFIG['staticDomainURL'] + '/qiangji.png'; : window._CONFIG['staticDomainURL'] + '/qiangji.png';
let cameraStatus = data.status == '1' ? 'successStatus' : data.status == '2' ? 'offlineStatus' : 'errorStatus'; let cameraStatus = data.status == '1' ? 'successStatus' : data.status == '2' ? 'offlineStatus' : 'errorStatus';
let rtspUrl = data.cameraCode; let rtspUrl = data.cameraCode;
// 'rtsp://' + data.user + ':' + data.password + '@' + data.ip + window._CONFIG['cameraMain'] // 'rtsp://' + data.user + ':' + data.password + '@' + data.ip + window._CONFIG['cameraMain']
$('.cameraModal ul').append( $('.cameraModal ul').append(
'<li><a class="openIframe" id="' + '<li><a class="openIframe" id="' +
data.id + data.id +
'" videoUrl="' + '" videoUrl="' +
rtspUrl + rtspUrl +
'" cameraIP="' + '" cameraIP="' +
data.ip + data.ip +
'" cameraUser="' + '" cameraUser="' +
data.user + data.user +
'" cameraPsd="' + '" cameraPsd="' +
data.password + data.password +
'"><img src="' + '"><img src="' +
camera_img + camera_img +
'" /><div class="' + '" /><div class="' +
cameraStatus + cameraStatus +
'">' + '">' +
data.cameraName + data.cameraName +
'</div> </a></li>' '</div> </a></li>'
); );
}); });
let cameraModal: any = document.getElementById('cameraModal') let cameraModal: any = document.getElementById('cameraModal');
cameraModal.style.left = click.position.x + -45 + 'px'; cameraModal.style.left = click.position.x + -45 + 'px';
cameraModal.style.top = click.position.y + -180 + 'px'; cameraModal.style.top = click.position.y + -180 + 'px';
that.cameraModalShow = true; 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.id._xbsjOwner && });
pickedFeature.id._xbsjOwner.customProp && }
JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelAttr == '4' // 船只模型
) { if (pickedFeature.id.xbsjType && pickedFeature.id.name.includes('船')) {
let labelCode = JSON.parse(pickedFeature.id._xbsjOwner.customProp).labelCode; that.AISInfoWindowShow = true;
console.log(pickedFeature.id._xbsjOwner); // 赋值船只场景id - 唯一标识 可通过该字段获取其余信息
if (pickedFeature.id._xbsjOwner.addViewShedReturn) { that.ship_guid = pickedFeature.id.guid;
//显示/不显示雷达扫码效果 }
// pickedFeature.id._xbsjOwner.addViewShedReturn.show = !pickedFeature.id._xbsjOwner.addViewShedReturn.show; //雷达扫描范围
// console.log("pickedFeature.id._xbsjOwner.addViewShedReturn",pickedFeature.id._xbsjOwner.addViewShedReturn); 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(清空) //清空当前雷达,并将该方法指向undefined(清空)
pickedFeature.id._xbsjOwner.addViewShedReturn.clear(); pickedFeature.id._xbsjOwner.addViewShedReturn.clear();
pickedFeature.id._xbsjOwner.addViewShedReturn = undefined; pickedFeature.id._xbsjOwner.addViewShedReturn = undefined;
} else { } else {
defHttp.get({ url: earthMapUrl.radarList, params: { radarCode: labelCode } }, { isTransformResponse: false }).then((res) => { defHttp.get({ url: earthMapUrl.radarList, params: { radarCode: labelCode } }, { isTransformResponse: false }).then((res) => {
if (res.success) { if (res.success) {
if (res.result.records.length > 0) { if (res.result.records.length > 0) {
let data = res.result.records[0]; let data = res.result.records[0];
let rgb; let rgb;
if (data.customProp) { if (data.customProp) {
rgb = JSON.parse(data.customProp).color; rgb = JSON.parse(data.customProp).color;
} }
let radarRadius = data.workingRadius; let radarRadius = data.workingRadius;
let radarRange = data.elevation; let radarRange = data.elevation;
let radarShifting = data.angularRadian; let radarShifting = data.angularRadian;
let left = Number(radarShifting) - Number(radarRange) / 2; let left = Number(radarShifting) - Number(radarRange) / 2;
//参数:经纬度、半径、起始角度(正北方向)、结束角度 //参数:经纬度、半径、起始角度(正北方向)、结束角度
console.log('雷达扫描范围', data); console.log('雷达扫描范围', data);
//弧度转角度 //弧度转角度
let degreePosition = radianToDegreeInLngLatHeight( let degreePosition = radianToDegreeInLngLatHeight(
pickedFeature.id._xbsjOwner.position[0], pickedFeature.id._xbsjOwner.position[0],
pickedFeature.id._xbsjOwner.position[1], pickedFeature.id._xbsjOwner.position[1],
0.1 0.1
); );
//创建雷达扫描 深度 //创建雷达扫描 深度
// window.$viewer.scene.globe.depthTestAgainstTerrain = true; // window.$viewer.scene.globe.depthTestAgainstTerrain = true;
let rader = new CircleScan(window.$viewer); let rader = new CircleScan(window.$viewer);
rader.add(degreePosition, null, radarRadius, 10000); rader.add(degreePosition, null, radarRadius, 10000);
pickedFeature.id._xbsjOwner.addViewShedReturn = rader; pickedFeature.id._xbsjOwner.addViewShedReturn = rader;
// 雷达扫描2 // 雷达扫描2
// let rader2 = window.$viewer.entities.add({ // let rader2 = window.$viewer.entities.add({
// position: Cesium.Cartesian3.fromDegrees(113.528333, 22.156109), // position: Cesium.Cartesian3.fromDegrees(113.528333, 22.156109),
// name: '雷达扫描', // name: '雷达扫描',
// ellipse: { // ellipse: {
// semiMajorAxis: 5000.0, // semiMajorAxis: 5000.0,
// semiMinorAxis: 5000.0, // semiMinorAxis: 5000.0,
// material: new Cesium.RadarScanMaterialProperty({ // material: new Cesium.RadarScanMaterialProperty({
// color: new Cesium.Color(1.0, 1.0, 0.0, 0.7), // color: new Cesium.Color(1.0, 1.0, 0.0, 0.7),
// speed: 20.0, // speed: 20.0,
// }), // }),
// height: 20.0, // height: 20.0,
// heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, // heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
// outline: true, // outline: true,
// outlineColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0) // outlineColor: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
// } // }
// }) // })
// pickedFeature.id._xbsjOwner.addViewShedReturn= addViewShedRadar( // pickedFeature.id._xbsjOwner.addViewShedReturn= addViewShedRadar(
// pickedFeature.id._xbsjOwner.position, // pickedFeature.id._xbsjOwner.position,
// radarRadius, // radarRadius,
// left, // left,
// Number(radarRange) / 2 + Number(radarShifting), // Number(radarRange) / 2 + Number(radarShifting),
// [rgb.r / 255, rgb.g / 255, rgb.b / 255, rgb.a] // [rgb.r / 255, rgb.g / 255, rgb.b / 255, rgb.a]
// ); // );
}
}
});
}
} }
} else { }
//关闭所有气泡窗 });
that.cameraModalShow = false; }
that.poiModalShow = false; }
} } else {
}, window.Cesium.ScreenSpaceEventType.LEFT_CLICK); //关闭所有气泡窗
} that.cameraModalShow = false;
/* 鼠标右键事件 */ that.poiModalShow = false;
{ }
handler.setInputAction((click) => { }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 判断点击位置是否有实体 }
//返回具有 `primitive` 属性的对象,该属性包含场景中特定窗口坐标处的第一个(顶部)图元,如果该位置没有任何内容,则返回未定义的对象。其他属性可能会根据基元的类型进行设置,并可用于进一步识别拾取的对象。 /* 鼠标右键事件 */
let pickedFeature = window.$viewer.scene.pick(click.position); {
// console.log("pick",pickedFeature); handler.setInputAction((click) => {
// 判断点击位置是否有实体
//返回具有 `primitive` 属性的对象,该属性包含场景中特定窗口坐标处的第一个(顶部)图元,如果该位置没有任何内容,则返回未定义的对象。其他属性可能会根据基元的类型进行设置,并可用于进一步识别拾取的对象。
let pickedFeature = window.$viewer.scene.pick(click.position);
// console.log("pick",pickedFeature);
let entity = pickedFeature && pickedFeature.id; let entity = pickedFeature && pickedFeature.id;
console.log('pick', pickedFeature); console.log('pick', pickedFeature);
console.log('entity', entity); console.log('entity', entity);
if (entity == undefined) { if (entity == undefined) {
return; 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') { data.msCameraSiteList.forEach((data) => {
//点击电线杆触发弹窗 if (pickedFeature.id.customProp === data.id) {
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)
window.$uia.contextMenu.pop([ window.$uia.contextMenu.pop([
{ {
text: '编辑', text: '监控视域分析属性',
func: () => { func: () => {
$mitt.emit('addRoamPathVideoClose'); let testConfig = {
// store.commit('customPrimitive', entity.xbsjGuid); ref: 'testView',
store.customPrimitive = entity.xbsjGuid; name: '雷达视域分析',
// 打开对应的创建巡检视频窗口 position: [1.514482876761954, 0.8497520519403554, -0.7553906497788317],
nextTick(() => { rotation: [4.535844766941594, 0.32288591161895097, 0],
that.addRoamVideoShow = true; near: 1,
}); far: 400,
}, fovH: Math.PI / 3,
}, fovV: Math.PI / 6,
{ show: false,
text: '删除', };
func: () => { let Viewshed = new window.XE.Obj.Viewshed(window.$earth);
window.$uia.confirm('确认删除?', () => { Viewshed.xbsjFromJSON(testConfig);
defHttp window.$uia.showPropertyWindow(Viewshed);
.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);
});
});
},
}, },
},
]); ]);
} }
//绘画图形 });
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: '编辑', url: '/military/msAreaCustomPrimitive/delete',
func: () => { params: { id: entity.id },
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);
});
};
});
},
}, },
{ 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: '删除', url: '/military/dtMapDraw/delete',
func: () => { params: { id: entity.customProp?.id },
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);
});
});
},
}, },
]); { isTransformResponse: false, joinParamsToUrl: true }
} )
}, window.Cesium.ScreenSpaceEventType.RIGHT_CLICK); //右键事件 .then((response) => {
} if (response.code == 200) {
/* picked事件 */ let shapeList = store.shapeList;
{ shapeList.forEach((element, index) => {
/* let canvasbox = window.$viewer.canvas, pickPosition = {}, cameraModal = this.$refs.cameraModal;//cameraModal组件 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 => { canvasbox.onclick = e => {
pickPosition.x = e.offsetX; pickPosition.x = e.offsetX;
pickPosition.y = e.offsetY; pickPosition.y = e.offsetY;
@ -433,5 +432,5 @@ export default function listenMouseHandler(that) {
that.cameraModalShow = false; that.cameraModalShow = false;
} }
} */ } */
} }
} }

196
src/utils/earthMap/shipDraw.ts

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com * @Author: Fuyuu 1805498209@qq.com
* @Date: 2024-01-03 17:42:49 * @Date: 2024-01-03 17:42:49
* @LastEditors: Fuyuu 1805498209@qq.com * @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 * @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 * @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 { useEarthMapStore } from '/@/store/modules/earthMap';
import { addShipTrack, addShipModel } from '@/utils/earthMap/earthObj'; import { addShipTrack, addShipModel } from '@/utils/earthMap/earthObj';
// 暂存store // 暂存store
const store = useEarthMapStore(); const store = useEarthMapStore();
// 船只数据列表 // 雷达船只数据列表
let shipDataList: any = []; let radarShipList: any = [];
// AIS船只数据列表
let aisShipList: any = [];
// 融合船只数据列表
let mixShipList: any = [];
// 绘制单个船只 // 角度转弧度
const drawShips = function (shipItem) { function toRadians(point) {
// 引入初始图片 return window.Cesium.Math.toRadians(point);
// 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; // 绘制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 = { let options = {
id: shipItem.trackId, 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], 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; return shipModel;
}; };
// 角度转弧度 // 绘制地球上所有雷达船只
function toRadians(point) { export const drawRadarShipsList = function (radarItem) {
return window.Cesium.Math.toRadians(point); // 接收到的单个雷达船只信息
} 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) { export const drawMixShipsList = function (mixItem) {
// 接收到的单个船只信息 // 接收到的单个融合船只信息
let messageData = JSON.parse(JSON.parse(message).radarTrack); let mixData = mixItem.radarTrack;
// 获取store中的船只数据列表 // 获取store中的融合船只数据列表
shipDataList = store.shipDataList; mixShipList = store.mixShipList;
// 是否已经存在 // 是否已经存在
let existingShip = shipDataList.find((shipItem) => shipItem.trackId === messageData.trackId); let existingShip = mixShipList.find((shipItem) => shipItem.trackId === mixData.trackId);
if (existingShip) { 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); 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 { } else {
// 添加新的船只 // 添加新的融合船只
shipDataList.push({ mixShipList.push({
name: `${messageData.trackId}号船只`, // 名称 name: `${mixData.trackId}号船_mix`, // 名称
trackId: messageData.trackId, // 船只id trackId: mixData.trackId, // 船只id
guid: drawShips(messageData).xbsjGuid, // 船只模型id guid: drawMixShips(mixData).xbsjGuid, // 船只场景id
track_guid: addShipTrack([[toRadians(messageData.longitude), toRadians(messageData.latitude), 0]]).xbsjGuid, // 轨迹线guid,用于轨迹显隐 // 根据不同的数据类型绘制不同的轨迹线 轨迹线guid,用于轨迹显隐
azimuth: messageData.azimuth, // 方位角 track_guid: addShipTrack([[toRadians(mixData.longitude + 0.0001), toRadians(mixData.latitude + 0.0001), 0]], 3).xbsjGuid,
course: messageData.course, // 航向 azimuth: mixData.azimuth, // 方位角
latitude: messageData.latitude, // 纬度 course: mixData.course, // 航向
longitude: messageData.longitude, // 经度 latitude: mixData.latitude + 0.0001, // 纬度
longitude: mixData.longitude + 0.0001, // 经度
radarId: mixData.radarId, // 雷达Id
}); });
// 更新store // 更新store
store.shipDataList = shipDataList; store.mixShipList = mixShipList;
} }
}; };

29
src/views/earthMap/edit/EarthComp.vue

@ -86,7 +86,9 @@
></AddModelWin> ></AddModelWin>
<AddRoamVideo v-if="addRoamVideoShow"></AddRoamVideo> <AddRoamVideo v-if="addRoamVideoShow"></AddRoamVideo>
<!-- AIS信息显示窗口 --> <!-- AIS信息显示窗口 -->
<AISInfoWindow v-if="AISInfoWindowShow" :ship_guid="ship_guid" :ship_aisData="ship_aisData"></AISInfoWindow> <AISInfoWindow v-if="AISInfoWindowShow" :ship_guid="ship_guid"></AISInfoWindow>
<!-- 跟踪船只窗口 -->
<TailAfterWindow v-if="TailAfterWindowShow"></TailAfterWindow>
</div> </div>
</template> </template>
@ -108,6 +110,8 @@
import WarnInfoList from '@/components/earthMap/WarnInfoList.vue'; import WarnInfoList from '@/components/earthMap/WarnInfoList.vue';
import AISInfoDetail from '@/components/earthMap/AISInfoDetail.vue'; import AISInfoDetail from '@/components/earthMap/AISInfoDetail.vue';
import AISInfoWindow from '@/components/earthMap/AISInfoWindow.vue'; import AISInfoWindow from '@/components/earthMap/AISInfoWindow.vue';
import TailAfterWindow from '@/components/earthMap/TailAfterWindow.vue';
import { getRealTime } from '@/utils/date'; import { getRealTime } from '@/utils/date';
import $mitt from '@/utils/earthMap/mitt'; import $mitt from '@/utils/earthMap/mitt';
import guid from '@/utils/earthMap/guid'; import guid from '@/utils/earthMap/guid';
@ -115,8 +119,8 @@
import { handleNodeType } from '@/utils/earthMap/handleNodeType'; import { handleNodeType } from '@/utils/earthMap/handleNodeType';
import { getRandomArr, getHeigthByLonLat } from '@/utils/earthMap/earth'; import { getRandomArr, getHeigthByLonLat } from '@/utils/earthMap/earth';
import redFlag from '@/assets/earthMap/redFlag.png'; import redFlag from '@/assets/earthMap/redFlag.png';
import { addModel, addPin, addViewShedRadar, addShipGroundImg, addShipTrack } from '@/utils/earthMap/earthObj'; import { addModel, addPin, addViewShedRadar, addShipTrack } from '@/utils/earthMap/earthObj';
import { drawAllShips } from '@/utils/earthMap/shipDraw'; import { drawAISShipsList, drawMixShipsList, drawRadarShipsList } from '@/utils/earthMap/shipDraw';
import hidePng from '@/assets/earthMap/hide.png'; import hidePng from '@/assets/earthMap/hide.png';
import alarmImg from '@/assets/earthMap/alarm.gif'; import alarmImg from '@/assets/earthMap/alarm.gif';
import VideoFusionWin from './components/VideoFusionWin.vue'; import VideoFusionWin from './components/VideoFusionWin.vue';
@ -231,6 +235,7 @@ import { nextTick } from 'vue';
VideoFusionWin, VideoFusionWin,
AISInfoDetail, AISInfoDetail,
AISInfoWindow, AISInfoWindow,
TailAfterWindow,
}, },
props: { props: {
// //
@ -475,12 +480,12 @@ import { nextTick } from 'vue';
PropsDrawInitShow = this.drawInitShow; PropsDrawInitShow = this.drawInitShow;
PropsKeyControlInitShow = this.keyControlInitShow; PropsKeyControlInitShow = this.keyControlInitShow;
/////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////
//AIS // AIS
AISInfoWindowShow = false; AISInfoWindowShow = false;
// guid //
ship_guid = '123456'; TailAfterWindowShow = false;
// ais // id
ship_aisData = {}; ship_guid = '';
// //
// pin: any = undefined; // pin: any = undefined;
@ -1154,7 +1159,13 @@ import { nextTick } from 'vue';
}); });
// mqtt // mqtt
$mitt.on('deviceCmd', (message: any) => { $mitt.on('deviceCmd', (message: any) => {
drawAllShips(message); let data = JSON.parse(message);
//
drawRadarShipsList(data);
// AIS
drawAISShipsList(data);
//
drawMixShipsList(data);
}); });
} }
} }

2967
src/views/earthMap/edit/EarthCompTest.vue

File diff suppressed because it is too large

1851
src/views/earthMap/show/EarthComp.vue

File diff suppressed because it is too large

10
src/views/military/modules/earthMap/camera/MsCameraSiteList.vue

@ -2,7 +2,7 @@
视频监控点位管理 视频监控点位管理
目录位置三维地图管理 -> 视频监控点位管理 目录位置三维地图管理 -> 视频监控点位管理
功能概述所在场景下的防区的监控杆位置名称 功能概述所在场景下的防区的监控杆位置名称 已弃用
--> -->
<template> <template>
<div> <div>
@ -246,14 +246,16 @@
// } // }
// }); // });
defHttp defHttp
.get( .get(
{ {
url: '/military/msMapLine/list', url: '/military/msMapLine/list',
params: { params: {
sceneId: userStore.userInfo?.sceneId + "*" sceneId: userStore.userInfo?.sceneId + '*',
}, },
},{ isTransformResponse: false }) },
{ isTransformResponse: false }
)
.then((res) => { .then((res) => {
if (res.success) { if (res.success) {
lineSelect.value = res.result.records; lineSelect.value = res.result.records;

Loading…
Cancel
Save