203 lines
4.7 KiB
Markdown
203 lines
4.7 KiB
Markdown
# 🔧 QB303设备图标显示问题修复指南
|
||
|
||
## 🎯 问题分析
|
||
|
||
根据您的测试日志，QB303设备数据处理完全正常，但图标无法显示。错误信息：
|
||
|
||
```
|
||
GET http://localhost:3003/img/flyDevices.jpg 404 (Not Found)
|
||
Error loading image for billboard: [object Event]
|
||
```
|
||
|
||
## ✅ 已完成的修复
|
||
|
||
### **1. 图标路径修复**
|
||
```javascript
|
||
// 修复前：错误的路径
|
||
return '/img/flyDevices.jpg';
|
||
|
||
// 修复后：包含正确的base路径
|
||
return '/3dScreen/img/flyDevices.jpg';
|
||
```
|
||
|
||
### **2. 添加图标测试工具**
|
||
```javascript
|
||
// 新增测试命令
|
||
testIconPath() // 测试图标是否能正确加载
|
||
```
|
||
|
||
## 🚀 测试步骤
|
||
|
||
### **步骤1：测试图标路径**
|
||
```javascript
|
||
// 在浏览器控制台执行
|
||
testIconPath()
|
||
```
|
||
|
||
**预期结果：**
|
||
```
|
||
=== 测试QB303设备图标路径 ===
|
||
图标路径: /3dScreen/img/flyDevices.jpg
|
||
✅ 图标加载成功!
|
||
图标尺寸: XXXxXXX
|
||
```
|
||
|
||
### **步骤2：重新测试QB303设备**
|
||
```javascript
|
||
// 测试QB303设备数据
|
||
testQB303Data()
|
||
```
|
||
|
||
### **步骤3：强制刷新显示**
|
||
```javascript
|
||
// 如果仍不显示，强制刷新
|
||
forceRefreshQB303()
|
||
```
|
||
|
||
### **步骤4：飞行到设备位置**
|
||
```javascript
|
||
// 飞行到QB303设备位置查看
|
||
window.m3Data.map.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(112.8945530952381, 28.20648476190476, 1000)
|
||
});
|
||
```
|
||
|
||
## 🔍 调试信息
|
||
|
||
### **您的设备数据（正常）**
|
||
```json
|
||
{
|
||
"equipmentId": "dy04",
|
||
"latitude": 28.20648476190476,
|
||
"longitude": 112.8945530952381,
|
||
"altitude": 200,
|
||
"online_status": true,
|
||
"battleUnitCode": "dy04"
|
||
}
|
||
```
|
||
|
||
### **设备创建日志（正常）**
|
||
```
|
||
✅ 加载QB303设备到地图: dy04
|
||
✅ 创建新的QB303设备图标: dy04
|
||
✅ QB303设备 dy04 已添加到地图
|
||
```
|
||
|
||
### **问题定位**
|
||
- ❌ **图标路径错误** (已修复)
|
||
- ✅ **数据处理正常**
|
||
- ✅ **设备创建正常**
|
||
- ✅ **位置坐标正确**
|
||
|
||
## 📊 修复后的预期效果
|
||
|
||
修复后，QB303设备应该：
|
||
|
||
1. **📍 位置显示**: 湖南省坐标 (112.895°E, 28.206°N)
|
||
2. **🖼️ 图标显示**: 使用 `flyDevices.jpg` 图标
|
||
3. **🏷️ 标签显示**: "QB303-dy04" 绿色标签
|
||
4. **🖱️ 点击交互**: 点击显示设备详情
|
||
5. **🔄 实时更新**: 位置和姿态更新
|
||
|
||
## 🚨 如果问题仍然存在
|
||
|
||
### **备选图标路径测试**
|
||
```javascript
|
||
// 测试不同的图标路径
|
||
const testPaths = [
|
||
'/3dScreen/img/flyDevices.jpg',
|
||
'./img/flyDevices.jpg',
|
||
'img/flyDevices.jpg',
|
||
'/img/flyDevices.jpg'
|
||
];
|
||
|
||
testPaths.forEach(path => {
|
||
const img = new Image();
|
||
img.onload = () => console.log('✅ 成功:', path);
|
||
img.onerror = () => console.log('❌ 失败:', path);
|
||
img.src = path;
|
||
});
|
||
```
|
||
|
||
### **使用备用图标**
|
||
如果 `flyDevices.jpg` 仍然无法加载，可以临时使用其他图标：
|
||
|
||
```javascript
|
||
// 在aixiaorui.ts中修改getQB303DeviceIcon方法
|
||
getQB303DeviceIcon(): string {
|
||
// 使用备用图标
|
||
return '/3dScreen/img/marker/plane-blue.png'; // 蓝色飞机图标
|
||
// 或者
|
||
return '/3dScreen/img/otherEquipment.png'; // 其他装备图标
|
||
}
|
||
```
|
||
|
||
### **手动创建测试图标**
|
||
```javascript
|
||
// 手动创建测试图标验证地图显示
|
||
const testIcon = new mars3d.graphic.BillboardEntity({
|
||
position: [112.8945530952381, 28.20648476190476, 200],
|
||
style: {
|
||
image: '/3dScreen/img/marker/plane-blue.png', // 使用已知存在的图标
|
||
scale: 1.0,
|
||
label: {
|
||
text: 'TEST-QB303',
|
||
fillColor: Cesium.Color.RED
|
||
}
|
||
}
|
||
});
|
||
window.m3Data.graphicLayer.addGraphic(testIcon);
|
||
console.log('手动测试图标已添加');
|
||
```
|
||
|
||
## 🎮 完整测试流程
|
||
|
||
```javascript
|
||
// 完整的测试和修复流程
|
||
console.log('=== QB303设备图标修复测试 ===');
|
||
|
||
// 1. 测试图标路径
|
||
testIconPath();
|
||
|
||
// 等待2秒后执行下一步
|
||
setTimeout(() => {
|
||
// 2. 测试QB303设备数据
|
||
testQB303Data();
|
||
|
||
setTimeout(() => {
|
||
// 3. 强制刷新显示
|
||
forceRefreshQB303();
|
||
|
||
setTimeout(() => {
|
||
// 4. 飞行到设备位置
|
||
window.m3Data.map.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(112.8945530952381, 28.20648476190476, 1000)
|
||
});
|
||
console.log('✅ 测试完成，请检查地图显示');
|
||
}, 1000);
|
||
}, 1000);
|
||
}, 2000);
|
||
```
|
||
|
||
## 📋 快速命令参考
|
||
|
||
```javascript
|
||
// === 图标测试 ===
|
||
testIconPath() // 测试图标路径
|
||
|
||
// === QB303调试 ===
|
||
testQB303Data() // 测试QB303数据
|
||
forceRefreshQB303() // 强制刷新显示
|
||
|
||
// === 地图控制 ===
|
||
// 飞行到QB303位置
|
||
window.m3Data.map.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(112.895, 28.206, 1000)
|
||
});
|
||
|
||
// 检查图层内容
|
||
console.log('图层数量:', window.m3Data.graphicLayer.length);
|
||
```
|
||
|
||
现在图标路径已经修复，请测试 `testIconPath()` 确认图标能正确加载，然后重新测试QB303设备显示！🚁🛠️✨
|