171 lines
4.4 KiB
Markdown
171 lines
4.4 KiB
Markdown
# 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. **点击测试**：点击设备图标确认交互功能
|
||
|
||
如果按照以上步骤操作后设备仍不显示，请提供控制台的详细错误信息，我会进一步排查问题。🚁🗺️✨
|