210 lines
5.6 KiB
Markdown
210 lines
5.6 KiB
Markdown
# 🛠️ 手动调试模式控制指南
|
||
|
||
## 🎯 概述
|
||
|
||
为了方便调试QB303设备显示，我已经为您添加了手动调试模式。现在您可以完全控制设备数据的更新时机，避免后台自动更新干扰调试。
|
||
|
||
## 🚀 使用方法
|
||
|
||
### **1. 开启手动调试模式**
|
||
```javascript
|
||
// 在浏览器控制台执行
|
||
enableManualDebug()
|
||
```
|
||
|
||
**执行后会看到：**
|
||
```
|
||
🛑 手动调试模式已开启 - 所有自动更新已暂停
|
||
📋 可用的手动调试命令:
|
||
- manualUpdateDevices() : 手动更新一次所有设备
|
||
- disableManualDebug() : 恢复自动更新模式
|
||
- testQB303Data() : 测试QB303设备数据
|
||
- forceRefreshQB303() : 强制刷新QB303设备显示
|
||
```
|
||
|
||
### **2. 手动更新设备数据**
|
||
```javascript
|
||
// 手动更新一次所有设备（包括无人机、无人车、QB303设备）
|
||
manualUpdateDevices()
|
||
```
|
||
|
||
### **3. QB303专用调试命令**
|
||
```javascript
|
||
// 测试QB303设备数据（模拟WebSocket数据）
|
||
testQB303Data()
|
||
|
||
// 强制刷新QB303设备显示（清理重建）
|
||
forceRefreshQB303()
|
||
```
|
||
|
||
### **4. 恢复自动更新模式**
|
||
```javascript
|
||
// 关闭手动调试模式，恢复每2秒自动更新
|
||
disableManualDebug()
|
||
```
|
||
|
||
## 🔍 调试流程建议
|
||
|
||
### **标准调试流程：**
|
||
|
||
1. **开启手动模式**
|
||
```javascript
|
||
enableManualDebug()
|
||
```
|
||
|
||
2. **清理现有数据**
|
||
```javascript
|
||
// 清理地图上的所有设备标记
|
||
clearAllDeviceMarkers()
|
||
```
|
||
|
||
3. **测试QB303设备**
|
||
```javascript
|
||
// 发送测试数据
|
||
testQB303Data()
|
||
```
|
||
|
||
4. **检查数据状态**
|
||
```javascript
|
||
// 检查QB303设备数据
|
||
console.log('QB303设备数据:', window.m3Data.qb303DeviceData);
|
||
console.log('localStorage数据:', JSON.parse(localStorage.getItem("index-otherEquipmentList") || "[]"));
|
||
```
|
||
|
||
5. **强制刷新显示**
|
||
```javascript
|
||
// 如果设备没有显示，强制刷新
|
||
forceRefreshQB303()
|
||
```
|
||
|
||
6. **手动更新（可选）**
|
||
```javascript
|
||
// 手动更新一次所有设备
|
||
manualUpdateDevices()
|
||
```
|
||
|
||
## 🎮 高级调试命令
|
||
|
||
### **地图控制**
|
||
```javascript
|
||
// 飞行到QB303设备位置
|
||
window.m3Data.map.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(112.8945530952381, 28.20648476190476, 1000)
|
||
});
|
||
|
||
// 检查图形图层
|
||
console.log('图形图层数量:', window.m3Data.graphicLayer.length);
|
||
console.log('图形图层内容:', window.m3Data.graphicLayer._graphics);
|
||
```
|
||
|
||
### **数据检查**
|
||
```javascript
|
||
// 检查设备在线状态
|
||
const devices = JSON.parse(localStorage.getItem("index-otherEquipmentList") || "[]");
|
||
console.log('在线QB303设备:', devices.filter(d => d.equipmentType === 'QB303设备' && d.online_status));
|
||
|
||
// 检查设备坐标
|
||
devices.forEach(device => {
|
||
if (device.equipmentType === 'QB303设备') {
|
||
console.log(`设备 ${device.equipmentId}: [${device.longitude}, ${device.latitude}, ${device.altitude}]`);
|
||
}
|
||
});
|
||
```
|
||
|
||
### **图标测试**
|
||
```javascript
|
||
// 手动创建测试图标验证显示
|
||
const testIcon = new mars3d.graphic.BillboardEntity({
|
||
position: [112.8945530952381, 28.20648476190476, 200],
|
||
style: {
|
||
image: '/img/flyDevices.jpg',
|
||
scale: 1.0,
|
||
label: {
|
||
text: 'TEST-QB303',
|
||
fillColor: Cesium.Color.RED
|
||
}
|
||
}
|
||
});
|
||
window.m3Data.graphicLayer.addGraphic(testIcon);
|
||
console.log('测试图标已添加');
|
||
```
|
||
|
||
## 📊 状态监控
|
||
|
||
### **实时状态检查**
|
||
```javascript
|
||
// 创建状态监控函数
|
||
window.debugStatus = () => {
|
||
console.log('=== 调试状态报告 ===');
|
||
console.log('手动调试模式:', manualDebugMode ? '🛑 开启' : '🟢 关闭');
|
||
console.log('定时器状态:', timer ? '🔄 运行中' : '⏸️ 已停止');
|
||
console.log('QB303设备数量:', Object.keys(window.m3Data.qb303DeviceData || {}).length);
|
||
console.log('图形图层数量:', window.m3Data.graphicLayer.length);
|
||
|
||
const devices = JSON.parse(localStorage.getItem("index-otherEquipmentList") || "[]");
|
||
const onlineQB303 = devices.filter(d => d.equipmentType === 'QB303设备' && d.online_status);
|
||
console.log('localStorage中在线QB303设备:', onlineQB303.length);
|
||
|
||
console.log('==================');
|
||
};
|
||
|
||
// 执行状态检查
|
||
debugStatus()
|
||
```
|
||
|
||
## 🚨 常见问题解决
|
||
|
||
### **问题1：设备数据更新但地图不显示**
|
||
```javascript
|
||
// 解决方案：强制刷新
|
||
forceRefreshQB303()
|
||
```
|
||
|
||
### **问题2：想要重新开始调试**
|
||
```javascript
|
||
// 完整重置流程
|
||
enableManualDebug() // 停止自动更新
|
||
clearAllDeviceMarkers() // 清理地图标记
|
||
testQB303Data() // 重新发送测试数据
|
||
forceRefreshQB303() // 强制刷新显示
|
||
```
|
||
|
||
### **问题3：想要恢复正常运行**
|
||
```javascript
|
||
// 恢复自动模式
|
||
disableManualDebug()
|
||
```
|
||
|
||
## 🎯 调试技巧
|
||
|
||
1. **分步调试**: 一次只执行一个命令，观察结果
|
||
2. **检查日志**: 关注控制台的详细输出信息
|
||
3. **数据验证**: 先确认数据正确，再检查显示问题
|
||
4. **位置确认**: 使用flyTo命令飞行到设备位置查看
|
||
5. **图标测试**: 如有疑问，先手动创建测试图标验证
|
||
|
||
## 📋 快速命令参考
|
||
|
||
```javascript
|
||
// === 基础控制 ===
|
||
enableManualDebug() // 开启手动模式
|
||
disableManualDebug() // 关闭手动模式
|
||
manualUpdateDevices() // 手动更新设备
|
||
|
||
// === QB303专用 ===
|
||
testQB303Data() // 测试QB303数据
|
||
forceRefreshQB303() // 强制刷新QB303
|
||
|
||
// === 调试工具 ===
|
||
debugStatus() // 状态报告
|
||
clearAllDeviceMarkers() // 清理地图标记
|
||
|
||
// === 地图控制 ===
|
||
// 飞行到QB303位置
|
||
window.m3Data.map.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(112.895, 28.206, 1000)
|
||
});
|
||
```
|
||
|
||
现在您可以完全控制调试过程，不会被后台自动更新干扰了！🎮🛠️✨
|