Initial commit

2026-05-22 16:13:20 +08:00
commit b3089a254e
1444 changed files with 372077 additions and 0 deletions
--- a/QB303_DEBUG_GUIDE.md
+++ b/QB303_DEBUG_GUIDE.md
@@ -0,0 +1,170 @@
+# QB303设备地图显示调试指南
+
+## 🔧 问题分析
+
+根据您的测试日志，QB303设备数据处理正常，但在地图上没有显示。主要问题和解决方案：
+
+## 🚀 修复内容
+
+### **1. 图标路径修复**
+```javascript
+// 修改前：使用不存在的图标方法
+return this.feiji('qb303') || this.feiji('jiantou');
+
+// 修改后：使用您指定的图标路径
+return '/img/flyDevices.jpg'; // 使用QB303设备专用图标
+```
+
+### **2. 图标类型更改**
+```javascript
+// 修改前：使用ModelEntity（3D模型，可能不显示）
+const deviceImage = new mars3d.graphic.ModelEntity({
+  style: {
+    url: this.getQB303DeviceIcon(),
+    // ...
+  }
+});
+
+// 修改后：使用BillboardEntity（2D图片，更稳定）
+const deviceImage = new mars3d.graphic.BillboardEntity({
+  style: {
+    image: this.getQB303DeviceIcon(),
+    scale: 0.8,
+    // ...
+  }
+});
+```
+
+### **3. 角度处理修复**
+```javascript
+// 修改前：使用heading（可能不支持）
+heading: data.yaw || 0
+
+// 修改后：使用rotation并转换为弧度
+rotation: Cesium.Math.toRadians(data.yaw || 0)
+```
+
+### **4. 强制刷新功能**
+添加了强制刷新方法来解决设备不显示的问题：
+```javascript
+// 新增方法
+forceRefreshQB303Devices() {
+  // 清理现有设备图标
+  // 重新创建所有QB303设备
+}
+```
+
+## 🎮 测试方法
+
+### **方法1：重新测试QB303数据**
+```javascript
+// 在浏览器控制台执行
+testQB303Data()
+```
+
+### **方法2：强制刷新显示**
+```javascript
+// 在浏览器控制台执行
+forceRefreshQB303()
+```
+
+### **方法3：检查地图图层**
+```javascript
+// 检查地图实例和图层
+console.log('地图实例:', window.m3Data);
+console.log('图形图层:', window.m3Data.graphicLayer);
+console.log('QB303设备数据:', window.m3Data.qb303DeviceData);
+console.log('图层中的图形数量:', window.m3Data.graphicLayer.length);
+```
+
+## 📊 调试信息
+
+### **您的测试数据**
+```json
+{
+  "equipmentId": "dy04",
+  "latitude": 28.20648476190476,
+  "longitude": 112.8945530952381,
+  "altitude": 200,
+  "online_status": true,
+  "battleUnitCode": "dy04"
+}
+```
+
+### **地理位置**
+- **坐标**: 28.206°N, 112.895°E
+- **高度**: 200米
+- **位置**: 湖南省境内
+- **在线状态**: ✅ 在线
+
+## 🔍 预期效果
+
+修复后，QB303设备应该：
+
+1. **✅ 图标显示**: 使用`/img/flyDevices.jpg`图标
+2. **✅ 位置准确**: 显示在湖南省指定坐标
+3. **✅ 高度正确**: 距地面200米
+4. **✅ 标签显示**: "QB303-dy04"绿色标签
+5. **✅ 点击交互**: 点击显示设备详情
+6. **✅ 实时更新**: 数据变化时位置更新
+
+## 🚨 故障排除
+
+### **如果设备仍不显示**
+
+1. **检查图标文件**
+```javascript
+// 确认图标文件存在
+fetch('/img/flyDevices.jpg').then(r => console.log('图标状态:', r.status))
+```
+
+2. **检查坐标系统**
+```javascript
+// 确认坐标在有效范围内
+console.log('经度:', 112.8945530952381, '(有效范围: -180 到 180)');
+console.log('纬度:', 28.20648476190476, '(有效范围: -90 到 90)');
+```
+
+3. **检查地图视角**
+```javascript
+// 飞行到设备位置
+window.m3Data.map.flyTo({
+  destination: Cesium.Cartesian3.fromDegrees(112.8945530952381, 28.20648476190476, 1000)
+});
+```
+
+4. **手动创建测试图标**
+```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);
+```
+
+## 📋 检查清单
+
+- [x] **图标路径**: 使用正确的`/img/flyDevices.jpg`
+- [x] **图标类型**: 改为BillboardEntity
+- [x] **角度处理**: 使用rotation和弧度转换
+- [x] **强制刷新**: 添加forceRefreshQB303Devices方法
+- [x] **调试日志**: 增加详细的控制台输出
+- [x] **全局方法**: 添加forceRefreshQB303()便于测试
+
+## 🎯 下次测试步骤
+
+1. **刷新页面**重新加载修复后的代码
+2. **执行测试**：`testQB303Data()`
+3. **强制刷新**：`forceRefreshQB303()`
+4. **检查地图**：在湖南省附近查看QB303设备图标
+5. **点击测试**：点击设备图标确认交互功能
+
+如果按照以上步骤操作后设备仍不显示，请提供控制台的详细错误信息，我会进一步排查问题。🚁🗺️✨