|
|
@ -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, |
|
|
|
url: window._CONFIG['domianURL'] + '/sys/common/static/tongyongchuan.gltf', |
|
|
|
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, |
|
|
|
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(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(`${shipItem.trackId}号船`, options); |
|
|
|
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; |
|
|
|
} |
|
|
|
}; |
|
|
|