207 lines
5.6 KiB
Markdown
207 lines
5.6 KiB
Markdown
# 🔧 QB303地图实例初始化和设备状态修复指南
|
||
|
||
## 🎯 问题分析
|
||
|
||
从测试日志发现的关键问题:
|
||
|
||
### **1. 地图实例初始化问题**
|
||
```
|
||
⚠️ 地图实例或QB303数据结构未初始化
|
||
QB303设备数据: undefined
|
||
```
|
||
|
||
### **2. 设备在线状态问题**
|
||
```
|
||
设备 dy04: [112.89433833333334, 28.206474523809526], 在线=false
|
||
```
|
||
|
||
## 🔍 问题根因分析
|
||
|
||
### **问题1:地图初始化时序问题**
|
||
- **原因**:实时WebSocket数据处理时,地图实例可能还没有完全初始化
|
||
- **表现**:`window.m3Data` 存在但 `qb303DeviceData` 为 `undefined`
|
||
|
||
### **问题2:设备在线状态判断错误**
|
||
- **原因**:实时数据中没有 `health_status` 字段,导致状态判断失败
|
||
- **表现**:所有设备的 `online_status` 都为 `false`
|
||
|
||
## ✅ 已完成的修复
|
||
|
||
### **修复1:健壮的地图实例检查和初始化**
|
||
|
||
#### **增强的初始化检查**
|
||
```javascript
|
||
// 检查并初始化地图实例和QB303数据结构
|
||
if (window.m3Data) {
|
||
if (!window.m3Data.qb303DeviceData) {
|
||
console.log('🔧 初始化QB303数据结构...');
|
||
window.m3Data.qb303DeviceData = {};
|
||
}
|
||
console.log('✅ 地图实例和QB303数据结构已就绪');
|
||
// ... 继续地图更新逻辑
|
||
}
|
||
```
|
||
|
||
#### **延迟重试机制**
|
||
```javascript
|
||
else {
|
||
console.warn('⚠️ 地图实例未初始化,等待地图加载完成...');
|
||
// 如果地图还没初始化,延迟重试
|
||
setTimeout(() => {
|
||
if (window.m3Data) {
|
||
console.log('🔄 地图实例已初始化,重新尝试更新QB303设备...');
|
||
// ... 重新执行地图更新逻辑
|
||
}
|
||
}, 2000); // 延迟2秒重试
|
||
}
|
||
```
|
||
|
||
### **修复2:设备在线状态判断**
|
||
|
||
#### **修复前**
|
||
```javascript
|
||
online_status: qbData.host?.health_status === 1, // 依赖不存在的字段
|
||
```
|
||
|
||
#### **修复后**
|
||
```javascript
|
||
online_status: true, // 实时数据接收到即表示设备在线
|
||
```
|
||
|
||
**逻辑说明:**
|
||
- 能够接收到实时WebSocket数据,说明设备正在发送数据
|
||
- 因此可以直接判断为在线状态
|
||
- 更符合实际业务逻辑
|
||
|
||
## 🛠️ 新增调试工具
|
||
|
||
### **地图状态检查工具**
|
||
```javascript
|
||
checkMapStatus() // 全面检查地图实例和QB303数据结构状态
|
||
```
|
||
|
||
**功能:**
|
||
- ✅ 检查 `window.m3Data` 是否存在
|
||
- ✅ 检查 `qb303DeviceData` 数据结构
|
||
- ✅ 检查相关方法是否可用
|
||
- ✅ 显示当前QB303设备数据
|
||
- ✅ 提供故障排除建议
|
||
|
||
## 🚀 修复后的预期结果
|
||
|
||
### **使用 `testRealTimeQB303()` 现在应该看到:**
|
||
|
||
#### **1. 数据处理阶段**
|
||
```
|
||
=== 测试实时WebSocket QB303数据处理 ===
|
||
📡 发送实时QB303数据: {...}
|
||
收到QB303设备状态数据: {...}
|
||
QB303设备 [dy04] 数据已更新
|
||
🗺️ 实时QB303数据处理完成,更新地图显示...
|
||
```
|
||
|
||
#### **2. 地图初始化检查**
|
||
```
|
||
✅ 地图实例和QB303数据结构已就绪
|
||
📍 找到 1 个在线QB303设备,准备更新地图...
|
||
✅ 设备 dy04 数据已更新: [112.89433833333334, 28.206474523809526]
|
||
🎯 地图渲染方法已调用
|
||
🔄 强制刷新QB303设备显示
|
||
```
|
||
|
||
#### **3. 地图渲染阶段**
|
||
```
|
||
加载QB303设备到地图: dy04 {info: {...}}
|
||
设备信息: {equipmentId: 'dy04', ...}
|
||
设备坐标: [112.89433833333334, 28.206474523809526, 200]
|
||
✅ QB303设备 dy04 已添加到地图
|
||
```
|
||
|
||
#### **4. 结果验证**
|
||
```
|
||
=== 实时数据处理结果检查 ===
|
||
✅ localStorage中QB303设备数量: 1
|
||
设备 dy04: [112.89433833333334, 28.206474523809526], 在线=true ⭐ 修复后
|
||
✅ 地图中QB303设备数量: 1
|
||
地图设备 dy04: [112.89433833333334, 28.206474523809526]
|
||
QB303设备数据: {dy04: {...}} ⭐ 修复后
|
||
图层中图形数量: 1
|
||
找到的QB303图形: 1 个
|
||
```
|
||
|
||
## 🔍 故障排除工具
|
||
|
||
### **1. 地图状态检查**
|
||
```javascript
|
||
checkMapStatus()
|
||
```
|
||
|
||
**预期输出:**
|
||
```
|
||
=== 地图状态检查 ===
|
||
window.m3Data 存在: true
|
||
地图实例类型: Xiaorui
|
||
qb303DeviceData 存在: true
|
||
qb303DeviceData 类型: object
|
||
loadrQB303DeviceData 方法存在: function
|
||
forceRefreshQB303Devices 方法存在: function
|
||
图形图层存在: true
|
||
当前QB303设备数量: 1
|
||
设备 dy04: {info: {...}}
|
||
```
|
||
|
||
### **2. 如果地图仍未初始化**
|
||
```javascript
|
||
// 手动检查地图组件加载状态
|
||
console.log('地图组件:', document.querySelector('#mapContainer'));
|
||
console.log('Cesium:', typeof Cesium);
|
||
console.log('mars3d:', typeof mars3d);
|
||
```
|
||
|
||
## 📋 修复验证步骤
|
||
|
||
### **步骤1:检查地图状态**
|
||
```javascript
|
||
checkMapStatus()
|
||
```
|
||
|
||
### **步骤2:测试实时数据处理**
|
||
```javascript
|
||
testRealTimeQB303()
|
||
```
|
||
|
||
### **步骤3:验证设备显示**
|
||
- 检查设备图标是否出现在湖南省
|
||
- 验证设备在线状态为 `true`
|
||
- 测试设备点击交互
|
||
|
||
### **步骤4:对比测试数据**
|
||
```javascript
|
||
testQB303Data() // 确保测试数据仍然正常工作
|
||
```
|
||
|
||
## 🎯 关键修复点总结
|
||
|
||
### **1. 地图初始化时序**
|
||
- ✅ 增加健壮的初始化检查
|
||
- ✅ 添加延迟重试机制
|
||
- ✅ 提供详细的错误诊断
|
||
|
||
### **2. 设备在线状态**
|
||
- ✅ 修复状态判断逻辑
|
||
- ✅ 实时数据接收 = 设备在线
|
||
- ✅ 符合业务逻辑
|
||
|
||
### **3. 调试工具**
|
||
- ✅ 新增地图状态检查工具
|
||
- ✅ 提供全面的故障排除信息
|
||
- ✅ 便于问题定位和解决
|
||
|
||
## 🚨 注意事项
|
||
|
||
1. **地图加载顺序**:确保地图组件在数据处理之前完成初始化
|
||
2. **数据结构一致性**:保持测试数据和实时数据的处理逻辑一致
|
||
3. **错误处理**:增加了多层错误处理和重试机制
|
||
|
||
现在地图初始化和设备状态问题都已修复,请先执行 `checkMapStatus()` 检查地图状态,然后执行 `testRealTimeQB303()` 验证完整的修复效果!🚁🗺️✨
|