260 lines
8.2 KiB
Markdown
260 lines
8.2 KiB
Markdown
# 🔧 QB303实时WebSocket数据显示修复指南
|
||
|
||
## 🎯 问题根因分析
|
||
|
||
### **您的关键发现：**
|
||
✅ **测试数据** (`testQB303Data()`) - **可以正常显示在地图上**
|
||
❌ **实时WebSocket数据** - **无法在地图上显示**
|
||
|
||
### **问题根因：**
|
||
**实时WebSocket数据处理后缺少地图更新调用！**
|
||
|
||
## 🔍 详细对比分析
|
||
|
||
### **✅ 测试数据处理流程（正常）**
|
||
```javascript
|
||
// testQB303Data() 函数
|
||
handlerSocketMessage(testQB303Message); // 1. 处理数据
|
||
|
||
setTimeout(() => {
|
||
// 2. ⭐ 关键：调用地图更新
|
||
if (window.m3Data && window.m3Data.qb303DeviceData) {
|
||
console.log('通知地图更新QB303设备显示...');
|
||
|
||
// 从localStorage获取数据并加载到地图
|
||
const localData = localStorage.getItem("index-otherEquipmentList");
|
||
const qb303Devices = JSON.parse(localData).filter(...);
|
||
|
||
// 更新地图数据结构
|
||
qb303Devices.forEach(device => {
|
||
const key = device.equipmentId || device.battleUnitCode;
|
||
window.m3Data.qb303DeviceData[key].info = {...device}
|
||
});
|
||
|
||
// ⭐ 关键：调用地图渲染
|
||
window.m3Data.loadrQB303DeviceData();
|
||
}
|
||
}, 2000);
|
||
```
|
||
|
||
### **❌ 实时WebSocket数据处理流程（有问题）**
|
||
```javascript
|
||
// handlerSocketMessage() 中的 qb303_device_status 处理
|
||
if (message.biz_code == "qb303_device_status") {
|
||
// 1. 处理数据并保存到localStorage ✅
|
||
let qbEquipmentInfo = { /* ... 解析数据 ... */ };
|
||
otherEquipmentList.value.push(qbEquipmentInfo);
|
||
localStorage.setItem("index-otherEquipmentList", JSON.stringify(otherEquipmentList.value));
|
||
|
||
// 2. ❌ 问题：没有调用地图更新！
|
||
// 缺失：window.m3Data.loadrQB303DeviceData()
|
||
}
|
||
```
|
||
|
||
## ✅ 修复方案
|
||
|
||
### **已完成的修复：**
|
||
在实时WebSocket数据处理后添加了地图更新逻辑：
|
||
|
||
```javascript
|
||
// 保存到本地存储
|
||
localStorage.setItem("index-otherEquipmentList", JSON.stringify(otherEquipmentList.value));
|
||
|
||
// ⭐ 关键修复：实时数据处理后立即更新地图显示
|
||
console.log('🗺️ 实时QB303数据处理完成，更新地图显示...');
|
||
setTimeout(() => {
|
||
if (window.m3Data && window.m3Data.qb303DeviceData) {
|
||
// 从localStorage获取最新的QB303设备数据并加载到地图
|
||
const localData = localStorage.getItem("index-otherEquipmentList");
|
||
if (localData) {
|
||
const qb303Devices = JSON.parse(localData).filter(item =>
|
||
item.equipmentType === 'QB303设备' && item.online_status
|
||
);
|
||
|
||
console.log(`📍 找到 ${qb303Devices.length} 个在线QB303设备，准备更新地图...`);
|
||
|
||
qb303Devices.forEach(device => {
|
||
const key = device.equipmentId || device.battleUnitCode;
|
||
if (key && device.online_status) {
|
||
if (!window.m3Data.qb303DeviceData[key]) {
|
||
window.m3Data.qb303DeviceData[key] = {}
|
||
}
|
||
window.m3Data.qb303DeviceData[key].info = {...device}
|
||
console.log(`✅ 设备 ${key} 数据已更新: [${device.longitude}, ${device.latitude}]`);
|
||
}
|
||
});
|
||
|
||
// 调用地图渲染方法
|
||
if (window.m3Data.loadrQB303DeviceData) {
|
||
window.m3Data.loadrQB303DeviceData();
|
||
console.log('🎯 地图渲染方法已调用');
|
||
}
|
||
|
||
// 强制刷新地图显示
|
||
if (window.m3Data.forceRefreshQB303Devices) {
|
||
console.log('🔄 强制刷新QB303设备显示');
|
||
window.m3Data.forceRefreshQB303Devices();
|
||
}
|
||
}
|
||
} else {
|
||
console.warn('⚠️ 地图实例或QB303数据结构未初始化');
|
||
}
|
||
}, 100); // 短暂延迟确保localStorage更新完成
|
||
```
|
||
|
||
## 🚀 新增测试工具
|
||
|
||
### **实时数据测试工具**
|
||
```javascript
|
||
testRealTimeQB303() // 专门测试实时WebSocket数据处理和显示
|
||
```
|
||
|
||
**功能：**
|
||
- 📡 使用您提供的真实实时数据格式
|
||
- 🔄 模拟完整的WebSocket数据接收和处理流程
|
||
- 📍 验证数据从接收到地图显示的完整链路
|
||
- ✈️ 自动飞行到设备位置进行验证
|
||
|
||
### **实时数据格式**
|
||
```javascript
|
||
{
|
||
"version": "1.0",
|
||
"timestamp": 1757760579570,
|
||
"data": {
|
||
"host": {
|
||
"altitude": 200,
|
||
"latitude": 28.206474523809526,
|
||
"sid": "2",
|
||
"platform_type": 1,
|
||
"database_id": 19,
|
||
"report_time": 1757760659169,
|
||
"battle_unit_code": "dy04",
|
||
"tm": 1757760659169,
|
||
"longitude": 112.89433833333334
|
||
},
|
||
"sn": "2"
|
||
},
|
||
"biz_code": "qb303_device_status"
|
||
}
|
||
```
|
||
|
||
## 📊 修复后的预期结果
|
||
|
||
### **使用 `testRealTimeQB303()` 应该看到：**
|
||
|
||
#### **1. 数据处理阶段**
|
||
```
|
||
=== 测试实时WebSocket QB303数据处理 ===
|
||
📡 发送实时QB303数据: {...}
|
||
📍 设备位置: [112.89433833333334, 28.206474523809526]
|
||
收到QB303设备状态数据: {...}
|
||
QB303设备 [dy04] 数据已更新
|
||
🗺️ 实时QB303数据处理完成，更新地图显示...
|
||
📍 找到 1 个在线QB303设备，准备更新地图...
|
||
✅ 设备 dy04 数据已更新: [112.89433833333334, 28.206474523809526]
|
||
🎯 地图渲染方法已调用
|
||
🔄 强制刷新QB303设备显示
|
||
```
|
||
|
||
#### **2. 地图渲染阶段**
|
||
```
|
||
加载QB303设备到地图: dy04 {info: {...}}
|
||
设备信息: {equipmentId: 'dy04', ...}
|
||
设备坐标: [112.89433833333334, 28.206474523809526, 200]
|
||
✅ QB303设备 dy04 已添加到地图
|
||
```
|
||
|
||
#### **3. 结果验证阶段**
|
||
```
|
||
=== 实时数据处理结果检查 ===
|
||
✅ localStorage中QB303设备数量: 1
|
||
设备 dy04: [112.89433833333334, 28.206474523809526], 在线=true
|
||
✅ 地图中QB303设备数量: 1
|
||
地图设备 dy04: [112.89433833333334, 28.206474523809526]
|
||
QB303设备数据: {dy04: {...}}
|
||
图层中图形数量: 1
|
||
找到的QB303图形: 1 个
|
||
✈️ 相机已飞行到实时设备位置
|
||
```
|
||
|
||
## 🔧 修复前后对比
|
||
|
||
### **修复前**
|
||
- ❌ 实时数据只保存到localStorage
|
||
- ❌ 没有调用地图渲染方法
|
||
- ❌ 设备不会显示在地图上
|
||
- ❌ 测试数据能显示，实时数据不能显示
|
||
|
||
### **修复后**
|
||
- ✅ 实时数据保存到localStorage
|
||
- ✅ **自动调用地图渲染方法**
|
||
- ✅ **设备实时显示在地图上**
|
||
- ✅ **测试数据和实时数据都能正常显示**
|
||
|
||
## 🚨 关键修复点
|
||
|
||
### **核心问题：**
|
||
实时WebSocket数据处理缺少这一关键调用：
|
||
```javascript
|
||
window.m3Data.loadrQB303DeviceData(); // 地图渲染方法
|
||
```
|
||
|
||
### **修复方案：**
|
||
在实时数据处理完成后，添加与测试数据相同的地图更新逻辑。
|
||
|
||
## 🎯 测试验证
|
||
|
||
### **推荐测试步骤：**
|
||
|
||
1. **测试实时数据处理**
|
||
```javascript
|
||
testRealTimeQB303()
|
||
```
|
||
|
||
2. **对比测试数据处理**
|
||
```javascript
|
||
testQB303Data()
|
||
```
|
||
|
||
3. **验证地图显示**
|
||
- 检查设备图标是否显示在湖南省
|
||
- 验证设备位置坐标是否正确
|
||
- 测试点击设备图标的交互功能
|
||
|
||
### **故障排除**
|
||
如果仍有问题，检查：
|
||
```javascript
|
||
// 检查地图实例
|
||
console.log('地图实例:', window.m3Data);
|
||
|
||
// 检查渲染方法
|
||
console.log('渲染方法:', typeof window.m3Data?.loadrQB303DeviceData);
|
||
|
||
// 检查数据结构
|
||
console.log('QB303数据:', window.m3Data?.qb303DeviceData);
|
||
```
|
||
|
||
## 📋 快速命令参考
|
||
|
||
```javascript
|
||
// === 推荐测试命令 ===
|
||
testRealTimeQB303() // 测试实时数据处理（推荐）
|
||
testQB303Data() // 测试数据处理（对比）
|
||
|
||
// === 基础调试命令 ===
|
||
debugQB303Rendering() // 检查渲染状态
|
||
reloadAndShowQB303() // 一键重载显示
|
||
|
||
// === 数据检查命令 ===
|
||
console.log('localStorage:', JSON.parse(localStorage.getItem("index-otherEquipmentList") || "[]"));
|
||
console.log('地图数据:', window.m3Data?.qb303DeviceData);
|
||
```
|
||
|
||
## 🎉 修复完成
|
||
|
||
现在实时WebSocket数据应该能够正常显示在地图上了！
|
||
|
||
**关键修复：** 在实时数据处理后添加了与测试数据相同的地图更新调用逻辑。
|
||
|
||
请执行 `testRealTimeQB303()` 来验证实时WebSocket数据的完整处理和显示流程！🚁📡✨
|