zyp/xiaomubiao-master

Fork 0

Files

zyp b3089a254e Initial commit

2026-05-22 16:13:20 +08:00

4.6 KiB

Raw Permalink Blame History

🔧 QB303设备渲染问题调试指南

🎯 问题分析

✅ 图标加载成功 - /3dScreen/img/flyDevices.jpg (2048x2048) ❌ 地图上不显示 - 可能的渲染问题

🔍 已完成的修复

1. 图标缩放调整

// 修复前：可能太大
scale: 0.8

// 修复后：适配2048x2048大图
scale: 0.1  // 大幅减小缩放比例

2. 渲染属性优化

// 新增渲染优化属性
pixelOffset: new Cesium.Cartesian2(0, 0),
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND

3. 调试日志增强

✅ 添加设备位置详细信息
✅ 显示图层中图形总数
✅ 输出设备世界坐标
✅ 强制刷新图层显示

🚀 新增调试工具

1. 渲染状态调试

debugQB303Rendering()

功能：

检查QB303设备数据
显示图形图层状态
查看相机位置
统计QB303图形数量

2. 创建测试图标

createTestQB303Icon()

功能：

创建简化的测试图标
使用极小的缩放比例 (0.05)
自动飞行到设备位置
添加黄色标签便于识别

🎮 调试流程

步骤1：检查当前渲染状态

debugQB303Rendering()

步骤2：重新测试QB303设备

testQB303Data()

步骤3：创建测试图标验证

createTestQB303Icon()

步骤4：强制刷新显示

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: {...}}

🎯 测试步骤

完整测试流程：

// 1. 检查渲染状态
debugQB303Rendering();

// 2. 创建测试图标（会自动飞行到位置）
createTestQB303Icon();

// 3. 等待2秒后重新测试QB303
setTimeout(() => {
    testQB303Data();
}, 2000);

// 4. 再等待2秒后强制刷新
setTimeout(() => {
    forceRefreshQB303();
}, 4000);

🚨 如果仍然不显示

备选方案1：使用更小的图标

// 临时修改图标路径使用更小的图标
// 在aixiaorui.ts中修改getQB303DeviceIcon方法
return '/3dScreen/img/marker/plane-blue.png'; // 使用小图标测试

备选方案2：手动设置图标尺寸

// 在BillboardEntity中添加固定尺寸
style: {
    image: '/3dScreen/img/flyDevices.jpg',
    width: 64,  // 固定宽度
    height: 64, // 固定高度
    // 移除scale属性
}

备选方案3：使用Point图形测试

// 创建简单的点图形测试位置
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);

📋 快速命令参考

// === 渲染调试 ===
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() 创建测试图标验证渲染是否正常！🚁🛠️✨

4.6 KiB Raw Permalink Blame History Unescape Escape