diff --git a/.gitignore b/.gitignore index 57494a3..bf3ef72 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ /dist /package-lock.json /src/components/statistics.vue +/src/components/SwarmStatus.vue diff --git a/src/components/MapBox.vue b/src/components/MapBox.vue index db225a7..2ed2b08 100644 --- a/src/components/MapBox.vue +++ b/src/components/MapBox.vue @@ -882,19 +882,30 @@ export default { */ makePlane (plane, index = 0) { const customIcon = document.createElement('div') - customIcon.className = 'custom-marker' // 添加自定义样式类名 - customIcon.style.backgroundImage = `url(${planeIcon})` // 使用引入的 SVG 图标 - customIcon.style.width = '64px' // 图标宽度 - customIcon.style.height = '64px' // 图标高度 - // 创建一个marker对象 - this.planes[index] = new mapboxgl.Marker(customIcon) + customIcon.className = 'custom-marker' + customIcon.style.backgroundImage = `url(${planeIcon})` + customIcon.style.width = '64px' + customIcon.style.height = '64px' + + const marker = new mapboxgl.Marker(customIcon) .setLngLat([plane.lon, plane.lat]) - .setPopup( - new mapboxgl.Popup({ offset: 25 }).setHTML( - '
macID:' + plane.macadd + '
' - ) - ) // 添加弹出窗口 .addTo(this.map) + + // 创建popup,但不绑定到marker,手动控制显示 + const popup = new mapboxgl.Popup({ + offset: 25, + closeButton: true, + closeOnClick: true + }).setHTML(`心跳:
+解锁状态: + + ${stateObj.isUnlock ? '已解锁' : '未解锁'} + +
+模式: ${stateObj.getPlaneMode ?? '未知'}
+定位状态: ${stateObj.fixType ?? '--'}
+卫星颗数: ${stateObj.satCount ?? '--'}
+电压: ${stateObj.voltagBattery ?? '--'} V
+电流: ${stateObj.currentBattery ?? '--'} A
+高度: ${lastPos[2] ?? '--'} 米
+纬度: ${lastPos[0] ?? '--'}°
+经度: ${lastPos[1] ?? '--'}°
+对地速度: ${stateObj.groundSpeed ?? '--'} 米/秒
+ ` + + const popup = plane.getPopup() + if (popup) { + popup.setHTML(popupContent) + } + }, /** * @description: 镜头跳转 * @param {obj} lonLat {lon:lon,lat:lat} 经纬度 @@ -1047,4 +1122,27 @@ export default { .adsb-icon { will-change: transform; } + +/*飞机popup 心跳图标样式*/ +@keyframes heartbeat { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.3); } +} + +.heart-icon { + display: inline-block; + width: 16px; + height: 16px; + margin-left: 5px; + border-radius: 50%; +} + +.heart-online { + background-color: green; + animation: heartbeat 1s infinite; +} + +.heart-offline { + background-color: gray; +} diff --git a/src/components/PlaneStatus.vue b/src/components/PlaneStatus.vue index aca87cd..7392a2f 100644 --- a/src/components/PlaneStatus.vue +++ b/src/components/PlaneStatus.vue @@ -2,11 +2,7 @@