完成实时飞行轨迹
This commit is contained in:
77
src/App.vue
77
src/App.vue
@@ -319,6 +319,8 @@ let mouseTool = null
|
||||
const mapType = ref('satellite') // 'normal' | 'satellite'
|
||||
const dronePath = ref([]) // 无人机轨迹点集合
|
||||
let droneTrackLine = null
|
||||
const drone2Path = ref([]) // 无人机2轨迹点集合
|
||||
let drone2TrackLine = null
|
||||
const MAX_TRACK_POINTS = 2000
|
||||
|
||||
// 围栏相关状态
|
||||
@@ -543,7 +545,7 @@ const toggleWebSocket = () => {
|
||||
gcoord.GCJ02, // 目标坐标系
|
||||
);
|
||||
console.log(point, point2);
|
||||
// updateDroneMarker(point[0], point[1], drone1.heading);
|
||||
updateDroneMarker(point[0], point[1], point2[0], point2[1], drone1.heading);
|
||||
// updateDrone2Marker(point2[0], point2[1], drone2.heading);
|
||||
};
|
||||
}
|
||||
@@ -572,7 +574,7 @@ const handleDroneData = (data) => {
|
||||
}
|
||||
|
||||
// 更新无人机marker
|
||||
const updateDroneMarker = (lng, lat, heading = 0) => {
|
||||
const updateDroneMarker = (lng, lat, lng2, lat2, heading = 0) => {
|
||||
if (!map || !AMap) return
|
||||
|
||||
if (!droneMarker.value) {
|
||||
@@ -589,25 +591,40 @@ const updateDroneMarker = (lng, lat, heading = 0) => {
|
||||
position: [lng, lat],
|
||||
icon: icon,
|
||||
zIndex: 100,
|
||||
title: '无人机',
|
||||
title: '侦查机',
|
||||
offset: new AMap.Pixel(-20, -20),
|
||||
// 优化:禁用动画,减少性能消耗
|
||||
animation: 'AMAP_ANIMATION_NONE'
|
||||
})
|
||||
|
||||
map.add(droneMarker.value)
|
||||
|
||||
drone2Marker.value = new AMap.Marker({
|
||||
position: [lng, lat],
|
||||
icon: icon,
|
||||
zIndex: 100,
|
||||
title: '投弹机',
|
||||
offset: new AMap.Pixel(-20, -20),
|
||||
// 优化:禁用动画,减少性能消耗
|
||||
animation: 'AMAP_ANIMATION_NONE'
|
||||
})
|
||||
|
||||
map.add(drone2Marker.value)
|
||||
} else {
|
||||
// 更新位置
|
||||
droneMarker.value.setPosition([lng, lat])
|
||||
drone2Marker.value.setPosition([lng2, lat2])
|
||||
|
||||
// 更新旋转角度(如果有heading数据)
|
||||
if (heading !== undefined) {
|
||||
droneMarker.value.setAngle(heading)
|
||||
drone2Marker.value.setAngle(heading)
|
||||
}
|
||||
}
|
||||
|
||||
// 更新飞行轨迹
|
||||
updateDroneTrack(lng, lat)
|
||||
updateDrone2Track(lng2, lat2)
|
||||
|
||||
// 将地图中心移动到无人机位置(可选,可以注释掉)
|
||||
map.setCenter([lng, lat])
|
||||
@@ -638,6 +655,30 @@ const initDroneTrack = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const initDrone2Track = () => {
|
||||
if (!map || !AMap) return
|
||||
|
||||
// 如果已有轨迹线,先移除
|
||||
if (drone2TrackLine) {
|
||||
map.remove(drone2TrackLine)
|
||||
}
|
||||
|
||||
drone2TrackLine = new AMap.Polyline({
|
||||
map,
|
||||
path: [],
|
||||
showDir: true,
|
||||
isOutline: true,
|
||||
outlineColor: 'rgba(0,0,0,0.3)',
|
||||
borderWeight: 2,
|
||||
strokeColor: '#00e0ff',
|
||||
strokeOpacity: 0.8,
|
||||
strokeWeight: 4,
|
||||
lineJoin: 'round',
|
||||
lineCap: 'round',
|
||||
zIndex: 90
|
||||
})
|
||||
}
|
||||
|
||||
// 更新无人机轨迹
|
||||
const updateDroneTrack = (lng, lat) => {
|
||||
if (!map || !AMap) return
|
||||
@@ -656,6 +697,24 @@ const updateDroneTrack = (lng, lat) => {
|
||||
}
|
||||
}
|
||||
|
||||
const updateDrone2Track = (lng, lat) => {
|
||||
if (!map || !AMap) return
|
||||
|
||||
if (!drone2TrackLine) {
|
||||
initDrone2Track()
|
||||
}
|
||||
|
||||
drone2Path.value.push([lng, lat])
|
||||
if (drone2Path.value.length > MAX_TRACK_POINTS) {
|
||||
drone2Path.value.shift()
|
||||
}
|
||||
|
||||
if (drone2TrackLine) {
|
||||
drone2TrackLine.setPath(drone2Path.value)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 清空无人机轨迹
|
||||
const clearDroneTrack = () => {
|
||||
dronePath.value = []
|
||||
@@ -664,6 +723,13 @@ const clearDroneTrack = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const clearDrone2Track = () => {
|
||||
drone2Path.value = []
|
||||
if (drone2TrackLine) {
|
||||
drone2TrackLine.setPath([])
|
||||
}
|
||||
}
|
||||
|
||||
// 检测点是否在多边形内(射线法)
|
||||
const isPointInPolygon = (point, polygon) => {
|
||||
const [x, y] = point
|
||||
@@ -1383,6 +1449,11 @@ onUnmounted(() => {
|
||||
wsClient = null
|
||||
}
|
||||
|
||||
if (conn) {
|
||||
conn.close()
|
||||
conn = null
|
||||
}
|
||||
|
||||
// 清理地图
|
||||
if (droneMarker.value) {
|
||||
map?.remove(droneMarker.value)
|
||||
|
||||
@@ -97,9 +97,9 @@ function upload(url, params) {
|
||||
});
|
||||
}
|
||||
|
||||
// export let host = `${window.location.protocol}//${window.location.host}`;
|
||||
export let host = `${window.location.protocol}//${window.location.host}`;
|
||||
// export let host = "http://192.168.43.98:5678";
|
||||
export let host = "http://192.168.3.81:5678";
|
||||
// export let host = "http://192.168.3.81:5678";
|
||||
// export let host = "http://127.0.0.1:5678";
|
||||
|
||||
export const getConfig = () => {
|
||||
|
||||
Reference in New Issue
Block a user