293 lines
8.6 KiB
JavaScript
293 lines
8.6 KiB
JavaScript
|
|
|||
|
|
import * as maptalks from 'maptalks'
|
|||
|
|
import { PointLayer } from '@maptalks/vt'
|
|||
|
|
import GlobalMap from '../js/GlobalMap.js'
|
|||
|
|
import { getAssetsFile } from '@/utils/common'
|
|||
|
|
import WebSocketClient from '@/utils/WebSocketClient'
|
|||
|
|
import { findByCurrent } from '@/api/map/index.js'
|
|||
|
|
import dayjs from 'dayjs'
|
|||
|
|
|
|||
|
|
const danger = getAssetsFile('map/boat/danger.png')
|
|||
|
|
const passenger = getAssetsFile('map/boat/passenger.png')
|
|||
|
|
const trawler = getAssetsFile('map/boat/trawler.png')
|
|||
|
|
const other = getAssetsFile('map/boat/other.png')
|
|||
|
|
const radar = getAssetsFile('map/boat/radar.png')
|
|||
|
|
const netsonde = getAssetsFile('map/boat/netsonde.png')
|
|||
|
|
|
|||
|
|
let storeInstance = null
|
|||
|
|
let globalMap = null
|
|||
|
|
let glgroup = null
|
|||
|
|
let dynamicBoatInfoWebSocket = null // websock
|
|||
|
|
let boatsMarkerlayer = null // 渔船图层
|
|||
|
|
let cleanupTimer = null
|
|||
|
|
|
|||
|
|
const init = (store) => {
|
|||
|
|
storeInstance = store
|
|||
|
|
globalMap = GlobalMap.instance
|
|||
|
|
glgroup = globalMap.glGroup
|
|||
|
|
glgroup.setZIndex(8)
|
|||
|
|
setStyleToBoatLayer('_trawler_dynamic_boat', 8)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置渔船样式
|
|||
|
|
const setStyleToBoatLayer = (key, zIndex) => {
|
|||
|
|
const style = {
|
|||
|
|
style: [
|
|||
|
|
{
|
|||
|
|
name: 'boatStyle',
|
|||
|
|
filter: true,
|
|||
|
|
renderPlugin: {
|
|||
|
|
dataConfig: {
|
|||
|
|
type: 'point',
|
|||
|
|
only2D: true
|
|||
|
|
},
|
|||
|
|
sceneConfig: {
|
|||
|
|
fading: true,
|
|||
|
|
depthFunc: 'always'
|
|||
|
|
},
|
|||
|
|
type: 'icon'
|
|||
|
|
},
|
|||
|
|
symbol: [
|
|||
|
|
{
|
|||
|
|
markerType: 'triangle',
|
|||
|
|
markerWidth: {
|
|||
|
|
type: 'interval',
|
|||
|
|
stops: [
|
|||
|
|
[ 5, 5 ],
|
|||
|
|
[ 10, 10 ],
|
|||
|
|
[ 11, 0 ]
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
markerHeight: {
|
|||
|
|
type: 'interval',
|
|||
|
|
stops: [
|
|||
|
|
[ 5, 10 ],
|
|||
|
|
[ 10, 20 ],
|
|||
|
|
[ 11, 0 ]
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
markerFill: {
|
|||
|
|
type: 'categorical',
|
|||
|
|
property: 'deviceType',
|
|||
|
|
default: '#f4ea2a',
|
|||
|
|
// stops: [
|
|||
|
|
// [ 'AIS', { type: 'categorical', property: 'boatType', stops: [
|
|||
|
|
// [ '危险品货物运输船', '#d81e06' ],
|
|||
|
|
// [ '液货船', '#d81e06' ],
|
|||
|
|
// [ '客船', '#73f34f' ],
|
|||
|
|
// [ '公务船', '#73f34f' ],
|
|||
|
|
// [ '拖轮', '#73f34f' ],
|
|||
|
|
// [ '渔船', '#fff' ],
|
|||
|
|
// [ '其他', '#f4ea2a' ],
|
|||
|
|
// [ '网位移', '#e6e6e6' ],
|
|||
|
|
// [ '无线索船', '#e6e6e6' ]
|
|||
|
|
// ] } ],
|
|||
|
|
// [ 'RADAR', radar ]
|
|||
|
|
// ],
|
|||
|
|
stops: [
|
|||
|
|
[ 'AIS', '#f4ea2a' ]
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
markerLineColor: [ 0.2, 0.29, 0.39, 1 ],
|
|||
|
|
markerLineWidth: 1,
|
|||
|
|
markerRotation: {
|
|||
|
|
property: 'cog',
|
|||
|
|
type: 'identity'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
markerWidth: {
|
|||
|
|
type: 'interval',
|
|||
|
|
stops: [
|
|||
|
|
[ 10, 0 ],
|
|||
|
|
[ 11, 25 ],
|
|||
|
|
[ 14, 25 ]
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
markerHeight: {
|
|||
|
|
type: 'interval',
|
|||
|
|
stops: [
|
|||
|
|
[ 10, 0 ],
|
|||
|
|
[ 11, 30 ],
|
|||
|
|
[ 14, 30 ]
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
markerRotation: {
|
|||
|
|
property: 'cog',
|
|||
|
|
type: 'identity'
|
|||
|
|
},
|
|||
|
|
markerFile: {
|
|||
|
|
type: 'categorical',
|
|||
|
|
property: 'deviceType',
|
|||
|
|
default: other,
|
|||
|
|
// stops: [
|
|||
|
|
// [ 'AIS', { type: 'categorical', property: 'boatType', stops: [
|
|||
|
|
// [ '危险品货物运输船', danger ],
|
|||
|
|
// [ '液货船', danger ],
|
|||
|
|
// [ '客船', passenger ],
|
|||
|
|
// [ '公务船', passenger ],
|
|||
|
|
// [ '拖轮', passenger ],
|
|||
|
|
// [ '渔船', trawler ],
|
|||
|
|
// [ '其他', other ],
|
|||
|
|
// [ '网位移', netsonde ],
|
|||
|
|
// [ '无线索船', netsonde ]
|
|||
|
|
// ] } ],
|
|||
|
|
// [ 'RADAR', radar ],
|
|||
|
|
// ],
|
|||
|
|
stops: [
|
|||
|
|
[ 'AIS', other ]
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
textName: {
|
|||
|
|
property: 'boatName',
|
|||
|
|
type: 'identity'
|
|||
|
|
},
|
|||
|
|
textFill: '#fff',
|
|||
|
|
textHaloFill: '#3300cc',
|
|||
|
|
textHaloRadius: 2,
|
|||
|
|
textHaloBlur: 20,
|
|||
|
|
textDy: 10,
|
|||
|
|
textSize: {
|
|||
|
|
type: 'interval',
|
|||
|
|
stops: [
|
|||
|
|
[ 14, 0 ],
|
|||
|
|
[ 15, 15 ]
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
const name = `vt_${key}`
|
|||
|
|
if (boatsMarkerlayer) {
|
|||
|
|
boatsMarkerlayer.remove()
|
|||
|
|
}
|
|||
|
|
// 初始化动态渔船图层
|
|||
|
|
boatsMarkerlayer = new PointLayer(name, {
|
|||
|
|
cursor: 'pointer'
|
|||
|
|
})
|
|||
|
|
boatsMarkerlayer.setStyle(style)
|
|||
|
|
boatsMarkerlayer.addTo(glgroup)
|
|||
|
|
glgroup.setZIndex(zIndex)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 单独的清理函数
|
|||
|
|
const cleanupExpiredBoats = () => {
|
|||
|
|
boatsMarkerlayer.getGeometries().forEach(item => {
|
|||
|
|
const properties = item.getProperties()
|
|||
|
|
if (dayjs().diff(properties.gpsTime, 'hours') > 24) {
|
|||
|
|
item.remove()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getShip = () => {
|
|||
|
|
findByCurrent().then(res => {
|
|||
|
|
console.log('初始获取')
|
|||
|
|
addBoats(res.result)
|
|||
|
|
})
|
|||
|
|
// ----------船只数据------------------
|
|||
|
|
dynamicBoatInfoWebSocket = new WebSocketClient(`${import.meta.env.VITE_WS_BASE_URL}`)
|
|||
|
|
dynamicBoatInfoWebSocket.onopen(event => {
|
|||
|
|
})
|
|||
|
|
dynamicBoatInfoWebSocket.onmessage(event => {
|
|||
|
|
console.log('接收数据:', JSON.parse(event.data))
|
|||
|
|
if(Array.isArray(JSON.parse(event.data))) {
|
|||
|
|
addBoats(JSON.parse(event.data))
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
dynamicBoatInfoWebSocket.onclose(event => {
|
|||
|
|
// 可以尝试重新连接
|
|||
|
|
dynamicBoatInfoWebSocket.reconnect()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
dynamicBoatInfoWebSocket.onerror(event => {
|
|||
|
|
dynamicBoatInfoWebSocket.close()
|
|||
|
|
dynamicBoatInfoWebSocket = null
|
|||
|
|
})
|
|||
|
|
// 启动定期清理任务（每5分钟检查一次）
|
|||
|
|
if (cleanupTimer) {
|
|||
|
|
clearInterval(cleanupTimer)
|
|||
|
|
}
|
|||
|
|
cleanupTimer = setInterval(() => {
|
|||
|
|
cleanupExpiredBoats()
|
|||
|
|
}, 5 * 60 * 1000) // 5分钟
|
|||
|
|
// 初始化连接
|
|||
|
|
dynamicBoatInfoWebSocket.connect()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const addBoats = (boatList) => {
|
|||
|
|
|
|||
|
|
boatList.forEach((boat) => {
|
|||
|
|
// let types = [ '危险品货物运输船', '液货船', '客船', '公务船', '拖轮', '渔船', '其他', '网位移', '无线索船' ]
|
|||
|
|
let { longitude, latitude, cog, boatName, sog, terminalCode, deviceType, gpsTime } = boat
|
|||
|
|
let isContain = boatsMarkerlayer.getGeometryById(terminalCode)
|
|||
|
|
if (isContain !== null) {
|
|||
|
|
isContain.setCoordinates([ longitude, latitude ])
|
|||
|
|
isContain.setProperties({
|
|||
|
|
cog: 360 - Number(cog),
|
|||
|
|
angle: Number(cog),
|
|||
|
|
sog: Number(sog),
|
|||
|
|
boatName,
|
|||
|
|
latitude,
|
|||
|
|
longitude,
|
|||
|
|
deviceType,
|
|||
|
|
gpsTime
|
|||
|
|
// boatType: types[Math.floor(Math.random() * types.length)]
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
let mm = new maptalks.Marker([ longitude, latitude ], {
|
|||
|
|
id: terminalCode,
|
|||
|
|
properties: {
|
|||
|
|
cog: 360 - Number(cog),
|
|||
|
|
angle: Number(cog),
|
|||
|
|
sog: Number(sog),
|
|||
|
|
boatName,
|
|||
|
|
latitude,
|
|||
|
|
longitude,
|
|||
|
|
deviceType,
|
|||
|
|
gpsTime
|
|||
|
|
// boatType: types[Math.floor(Math.random() * types.length)]
|
|||
|
|
},
|
|||
|
|
cursor: 'pointer'
|
|||
|
|
})
|
|||
|
|
mm.on('click', (e) => {
|
|||
|
|
storeInstance.updateWindowInfo({
|
|||
|
|
visible: true,
|
|||
|
|
type: '_trawler_dynamic',
|
|||
|
|
data: { ...boat,
|
|||
|
|
...e.target.getProperties()
|
|||
|
|
// boatType: types[Math.floor(Math.random() * types.length)]
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
globalMap.map.animateTo(
|
|||
|
|
{
|
|||
|
|
zoom: 20,
|
|||
|
|
center: [ boat.longitude, boat.latitude ]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
duration: 1000 * 0.5,
|
|||
|
|
easing: 'out'
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
mm.addTo(boatsMarkerlayer)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const destroyWebsocket = () => {
|
|||
|
|
dynamicBoatInfoWebSocket.close()
|
|||
|
|
if (cleanupTimer) {
|
|||
|
|
clearInterval(cleanupTimer)
|
|||
|
|
cleanupTimer = null
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
export {
|
|||
|
|
destroyWebsocket,
|
|||
|
|
init,
|
|||
|
|
getShip,
|
|||
|
|
boatsMarkerlayer
|
|||
|
|
}
|