192 lines
4.6 KiB
Markdown
192 lines
4.6 KiB
Markdown
# 🔧 QB303设备渲染问题调试指南
|
||
|
||
## 🎯 问题分析
|
||
|
||
✅ **图标加载成功** - `/3dScreen/img/flyDevices.jpg` (2048x2048)
|
||
❌ **地图上不显示** - 可能的渲染问题
|
||
|
||
## 🔍 已完成的修复
|
||
|
||
### **1. 图标缩放调整**
|
||
```javascript
|
||
// 修复前：可能太大
|
||
scale: 0.8
|
||
|
||
// 修复后：适配2048x2048大图
|
||
scale: 0.1 // 大幅减小缩放比例
|
||
```
|
||
|
||
### **2. 渲染属性优化**
|
||
```javascript
|
||
// 新增渲染优化属性
|
||
pixelOffset: new Cesium.Cartesian2(0, 0),
|
||
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
|
||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||
```
|
||
|
||
### **3. 调试日志增强**
|
||
- ✅ 添加设备位置详细信息
|
||
- ✅ 显示图层中图形总数
|
||
- ✅ 输出设备世界坐标
|
||
- ✅ 强制刷新图层显示
|
||
|
||
## 🚀 新增调试工具
|
||
|
||
### **1. 渲染状态调试**
|
||
```javascript
|
||
debugQB303Rendering()
|
||
```
|
||
**功能：**
|
||
- 检查QB303设备数据
|
||
- 显示图形图层状态
|
||
- 查看相机位置
|
||
- 统计QB303图形数量
|
||
|
||
### **2. 创建测试图标**
|
||
```javascript
|
||
createTestQB303Icon()
|
||
```
|
||
**功能：**
|
||
- 创建简化的测试图标
|
||
- 使用极小的缩放比例 (0.05)
|
||
- 自动飞行到设备位置
|
||
- 添加黄色标签便于识别
|
||
|
||
## 🎮 调试流程
|
||
|
||
### **步骤1：检查当前渲染状态**
|
||
```javascript
|
||
debugQB303Rendering()
|
||
```
|
||
|
||
### **步骤2：重新测试QB303设备**
|
||
```javascript
|
||
testQB303Data()
|
||
```
|
||
|
||
### **步骤3：创建测试图标验证**
|
||
```javascript
|
||
createTestQB303Icon()
|
||
```
|
||
|
||
### **步骤4：强制刷新显示**
|
||
```javascript
|
||
forceRefreshQB303()
|
||
```
|
||
|
||
## 🔍 可能的问题和解决方案
|
||
|
||
### **问题1：图标太大不可见**
|
||
**症状：** 图标创建成功但看不见
|
||
**解决：** 已将scale从0.8调整为0.1
|
||
|
||
### **问题2：高度参考问题**
|
||
**症状：** 图标可能在地下或太高
|
||
**解决：** 添加了`heightReference: Cesium.HeightReference.CLAMP_TO_GROUND`
|
||
|
||
### **问题3：相机位置问题**
|
||
**症状：** 图标在视野外
|
||
**解决：** 使用`createTestQB303Icon()`会自动飞行到设备位置
|
||
|
||
### **问题4：图层显示问题**
|
||
**症状：** 图层被隐藏
|
||
**解决：** 添加了`this.graphicLayer.show = true`强制显示
|
||
|
||
## 📊 调试信息解读
|
||
|
||
### **正常的调试输出应该包含：**
|
||
```
|
||
✅ QB303设备 dy04 已添加到地图
|
||
✅ 设备位置: [112.8945530952381, 28.20648476190476, 200]
|
||
✅ 图层中总图形数量: X
|
||
✅ 设备图形对象: BillboardEntity {...}
|
||
✅ 设备世界坐标: Cartesian3 {...}
|
||
```
|
||
|
||
### **渲染调试输出应该显示：**
|
||
```
|
||
✅ QB303设备数据: {dy04: {...}}
|
||
✅ 图层显示状态: true
|
||
✅ 找到的QB303图形: 1 个
|
||
✅ QB303图形 1: {position: [...], show: true, style: {...}}
|
||
```
|
||
|
||
## 🎯 测试步骤
|
||
|
||
### **完整测试流程：**
|
||
```javascript
|
||
// 1. 检查渲染状态
|
||
debugQB303Rendering();
|
||
|
||
// 2. 创建测试图标（会自动飞行到位置）
|
||
createTestQB303Icon();
|
||
|
||
// 3. 等待2秒后重新测试QB303
|
||
setTimeout(() => {
|
||
testQB303Data();
|
||
}, 2000);
|
||
|
||
// 4. 再等待2秒后强制刷新
|
||
setTimeout(() => {
|
||
forceRefreshQB303();
|
||
}, 4000);
|
||
```
|
||
|
||
## 🚨 如果仍然不显示
|
||
|
||
### **备选方案1：使用更小的图标**
|
||
```javascript
|
||
// 临时修改图标路径使用更小的图标
|
||
// 在aixiaorui.ts中修改getQB303DeviceIcon方法
|
||
return '/3dScreen/img/marker/plane-blue.png'; // 使用小图标测试
|
||
```
|
||
|
||
### **备选方案2：手动设置图标尺寸**
|
||
```javascript
|
||
// 在BillboardEntity中添加固定尺寸
|
||
style: {
|
||
image: '/3dScreen/img/flyDevices.jpg',
|
||
width: 64, // 固定宽度
|
||
height: 64, // 固定高度
|
||
// 移除scale属性
|
||
}
|
||
```
|
||
|
||
### **备选方案3：使用Point图形测试**
|
||
```javascript
|
||
// 创建简单的点图形测试位置
|
||
const testPoint = new mars3d.graphic.PointEntity({
|
||
position: [112.8945530952381, 28.20648476190476, 200],
|
||
style: {
|
||
pixelSize: 20,
|
||
color: Cesium.Color.RED,
|
||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||
}
|
||
});
|
||
window.m3Data.graphicLayer.addGraphic(testPoint);
|
||
```
|
||
|
||
## 📋 快速命令参考
|
||
|
||
```javascript
|
||
// === 渲染调试 ===
|
||
debugQB303Rendering() // 检查渲染状态
|
||
createTestQB303Icon() // 创建测试图标
|
||
|
||
// === QB303调试 ===
|
||
testQB303Data() // 测试QB303数据
|
||
forceRefreshQB303() // 强制刷新显示
|
||
|
||
// === 地图控制 ===
|
||
// 飞行到QB303位置
|
||
window.m3Data.map.flyTo({
|
||
destination: Cesium.Cartesian3.fromDegrees(112.895, 28.206, 1000)
|
||
});
|
||
|
||
// 检查图层
|
||
console.log('图层数量:', window.m3Data.graphicLayer.length);
|
||
console.log('图层显示:', window.m3Data.graphicLayer.show);
|
||
```
|
||
|
||
现在请执行 `debugQB303Rendering()` 检查当前渲染状态，然后用 `createTestQB303Icon()` 创建测试图标验证渲染是否正常！🚁🛠️✨
|