xiaomubiao-master/MANUAL_DEBUG_GUIDE.md

🛠️ 手动调试模式控制指南

🎯 概述

为了方便调试QB303设备显示，我已经为您添加了手动调试模式。现在您可以完全控制设备数据的更新时机，避免后台自动更新干扰调试。

🚀 使用方法

1. 开启手动调试模式

// 在浏览器控制台执行
enableManualDebug()

执行后会看到：

🛑 手动调试模式已开启 - 所有自动更新已暂停
📋 可用的手动调试命令:
  - manualUpdateDevices() : 手动更新一次所有设备
  - disableManualDebug() : 恢复自动更新模式
  - testQB303Data() : 测试QB303设备数据
  - forceRefreshQB303() : 强制刷新QB303设备显示

2. 手动更新设备数据

// 手动更新一次所有设备（包括无人机、无人车、QB303设备）
manualUpdateDevices()

3. QB303专用调试命令

// 测试QB303设备数据（模拟WebSocket数据）
testQB303Data()

// 强制刷新QB303设备显示（清理重建）
forceRefreshQB303()

4. 恢复自动更新模式

// 关闭手动调试模式，恢复每2秒自动更新
disableManualDebug()

🔍 调试流程建议

标准调试流程：

1. 开启手动模式

enableManualDebug()

2. 清理现有数据

// 清理地图上的所有设备标记
clearAllDeviceMarkers()

3. 测试QB303设备

// 发送测试数据
testQB303Data()

4. 检查数据状态

// 检查QB303设备数据
console.log('QB303设备数据:', window.m3Data.qb303DeviceData);
console.log('localStorage数据:', JSON.parse(localStorage.getItem("index-otherEquipmentList") || "[]"));

5. 强制刷新显示

// 如果设备没有显示，强制刷新
forceRefreshQB303()

6. 手动更新（可选）

// 手动更新一次所有设备
manualUpdateDevices()

🎮 高级调试命令

地图控制

// 飞行到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);

数据检查

// 检查设备在线状态
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}]`);
  }
});

图标测试

// 手动创建测试图标验证显示
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('测试图标已添加');

📊 状态监控

实时状态检查

// 创建状态监控函数
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：设备数据更新但地图不显示

// 解决方案：强制刷新
forceRefreshQB303()

问题2：想要重新开始调试

// 完整重置流程
enableManualDebug()           // 停止自动更新
clearAllDeviceMarkers()      // 清理地图标记
testQB303Data()              // 重新发送测试数据
forceRefreshQB303()          // 强制刷新显示

问题3：想要恢复正常运行

// 恢复自动模式
disableManualDebug()

🎯 调试技巧

1. 分步调试: 一次只执行一个命令，观察结果
2. 检查日志: 关注控制台的详细输出信息
3. 数据验证: 先确认数据正确，再检查显示问题
4. 位置确认: 使用flyTo命令飞行到设备位置查看
5. 图标测试: 如有疑问，先手动创建测试图标验证

📋 快速命令参考

// === 基础控制 ===
enableManualDebug()      // 开启手动模式
disableManualDebug()     // 关闭手动模式
manualUpdateDevices()    // 手动更新设备

// === QB303专用 ===
testQB303Data()          // 测试QB303数据
forceRefreshQB303()      // 强制刷新QB303

// === 调试工具 ===
debugStatus()            // 状态报告
clearAllDeviceMarkers()  // 清理地图标记

// === 地图控制 ===
// 飞行到QB303位置
window.m3Data.map.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(112.895, 28.206, 1000)
});

现在您可以完全控制调试过程，不会被后台自动更新干扰了！🎮🛠️✨