Browse Source

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

2、添加光电追踪窗口,视频监控依赖在电子地图中无法引入,后续抽离出单独项目后补充
master
Fuyuu 8 months ago
parent
commit
5b1eb38ee5
  1. 2
      .env.development
  2. 16
      build/vite/plugin/index.ts
  3. 111
      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. 775
      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
# @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
###

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 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

111
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)
`
);
});
});
});

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" />
<!-- 全局配置 -->
<script>
console.log('window', window);
window._CONFIG = {};
</script>
</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
* @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 @@
<div class="ais_content">
<div class="content_item">
<div class="item_title">船名:</div>
<div class="item_content">顺宏海1026</div>
<div class="item_content">{{ AISInfo.name }}</div>
</div>
<div class="content_item">
<div class="item_title">MMSI:</div>
<div class="item_content">413495860</div>
<div class="item_content">{{ AISInfo.mmsi }}</div>
</div>
<div class="content_item">
<div class="item_title">船首向:</div>
@ -45,7 +45,7 @@
</div>
<div class="content_item">
<div class="item_title">IMO:</div>
<div class="item_content">458876</div>
<div class="item_content">{{ AISInfo.imo }}</div>
</div>
<div class="content_item">
<div class="item_title">航速:</div>
@ -53,11 +53,11 @@
</div>
<div class="content_item">
<div class="item_title">经度:</div>
<div class="item_content">113-26.578E</div>
<div class="item_content">{{ AISInfo.longitude }}</div>
</div>
<div class="content_item">
<div class="item_title">纬度:</div>
<div class="item_content">22-08.082N</div>
<div class="item_content">{{ AISInfo.latitude }}</div>
</div>
<div class="content_item">
<div class="item_title">状态:</div>
@ -96,6 +96,14 @@
<div class="item_title">航行轨迹:</div>
<a-switch v-model:checked="checked" @change="changeTrack" />
</div>
<!-- 跟踪船只 -->
<div class="content_item">
<div class="item_title">跟踪船只:</div>
<a-button size="small" type="primary" @click="tailAfter()">
跟踪
<EyeOutlined />
</a-button>
</div>
</div>
</Window>
</div>
@ -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_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() {
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;
// 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) => {
//
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,
};
},
});

259
src/components/earthMap/ShowHideControl.vue

@ -1,47 +1,126 @@
<template>
<div class="showhideControl">
<a-dropdown :trigger="['click']">
<!-- <a-dropdown :trigger="['click']">
<template #overlay>
<a-menu>
<a-menu-item key="1">
<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-menu-item>
<a-menu-item key="1">
<a-menu-item key="2">
<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-menu-item>
</a-menu>
</template>
<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>
</template>
<script lang="ts">
import { defineComponent, ref, nextTick, watch } from 'vue';
import { defineComponent, ref, nextTick } from 'vue';
import { CaretUpOutlined } from '@ant-design/icons-vue';
import $mitt from '@/utils/earthMap/mitt';
export default defineComponent({
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([]);
// ais
const aisShipList = ref([]);
//
const radarShipList = ref([]);
//
const mixShipList = ref([]);
//
const trackList = ref([]);
//
const radarTrackList = ref([]);
// ais
const aisTrackList = ref([]);
//
const mixTrackList = ref([]);
//
function getShipInfo() {
//
let earthMapElements = window.$earth.getAllObjects();
//
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) {
//
shipShow.value = earthMapShips.every((item) => item.show === true);
// shipShow.value = earthMapShips.every((item) => item.show === true);
//
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 {
console.log('当前场景没有船只');
}
@ -52,11 +131,29 @@
let earthMapElements = window.$earth.getAllObjects();
//
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) {
//
trackShow.value = earthMapTracks.every((item) => item.show === true);
// trackShow.value = earthMapTracks.every((item) => item.show === true);
//
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 {
console.log('当前场景没有轨迹线');
}
@ -66,14 +163,14 @@
if (shipList.value.length > 0) {
if (!e) {
//
trackShow.value = false;
// trackShow.value = false;
//
trackList.value.forEach((item: any) => {
item.show = false;
});
}
//
shipShow.value = e;
// shipShow.value = e;
shipList.value.forEach((item: any) => {
//
item.show = e;
@ -85,34 +182,105 @@
// 线
function changeTrackShow(e) {
if (trackList.value.length > 0) {
if (shipShow.value) {
//
trackShow.value = e;
trackList.value.forEach((item: any) => {
// if (shipShow.value) {
// //
// trackShow.value = e;
// 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;
});
} else {
trackShow.value = false;
console.log('请先打开显示船只模型');
$mitt.emit('trackChange', 'radar');
}
//
radarTypeShow.value = e;
radarShipList.value.forEach((item: any) => {
//
item.show = e;
});
} 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
$mitt.on('deviceCmd', () => {
nextTick(() => {
@ -122,25 +290,19 @@
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 {
shipShow,
trackShow,
// shipShow,
// trackShow,
radarTypeShow,
mixTypeShow,
aisTypeShow,
changeShipShow,
changeTrackShow,
changeRadarType,
changeMixType,
changeAISType,
changeTrackStatus,
};
},
components: {
@ -151,8 +313,11 @@
<style lang="less" scoped>
.showhideControl {
position: absolute;
left: 0;
left: 10px;
bottom: 30px;
z-index: 99999;
.control_item {
margin: 8px 0;
}
}
</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
* @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: <any>[], //绘画数组(区域)
shapeShowList: <any>[], //绘画存储(临时)
keyAreaPos: <number[][]>[], //记录创建防区的点位,重点管控区域
shipDataList: <any>[], //船只数据列表
aisShipList: <any>[], // ais船只数据列表
radarShipList: <any>[], // 雷达船只数据列表
mixShipList: <any>[], // 融合船只数据列表
xbsjEarthUI: <any>null, //XbsjEarthUI
///////////////////////
cameraData: <any>{},//请求的电线杆数据

121
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;

313
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);
});
}
});
}

775
src/utils/earthMap/listenMouseHandler.ts

@ -3,12 +3,12 @@
* 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('<ul></ul>');
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(
'<li><a class="openIframe" id="' +
data.id +
'" videoUrl="' +
rtspUrl +
'" cameraIP="' +
data.ip +
'" cameraUser="' +
data.user +
'" cameraPsd="' +
data.password +
'"><img src="' +
camera_img +
'" /><div class="' +
cameraStatus +
'">' +
data.cameraName +
'</div> </a></li>'
);
});
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('<ul></ul>');
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(
'<li><a class="openIframe" id="' +
data.id +
'" videoUrl="' +
rtspUrl +
'" cameraIP="' +
data.ip +
'" cameraUser="' +
data.user +
'" cameraPsd="' +
data.password +
'"><img src="' +
camera_img +
'" /><div class="' +
cameraStatus +
'">' +
data.cameraName +
'</div> </a></li>'
);
});
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;
}
} */
}
}
}

196
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;
}
};

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

@ -86,7 +86,9 @@
></AddModelWin>
<AddRoamVideo v-if="addRoamVideoShow"></AddRoamVideo>
<!-- 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>
</template>
@ -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);
});
}
}

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>
<div>
@ -246,14 +246,16 @@
// }
// });
defHttp
defHttp
.get(
{
url: '/military/msMapLine/list',
params: {
sceneId: userStore.userInfo?.sceneId + "*"
sceneId: userStore.userInfo?.sceneId + '*',
},
},{ isTransformResponse: false })
},
{ isTransformResponse: false }
)
.then((res) => {
if (res.success) {
lineSelect.value = res.result.records;

Loading…
Cancel
Save