告别遮挡！在Cesium 1.107+中管理多个Billboard图标的3种实战方案（含性能对比）

告别遮挡！在Cesium 1.107+中管理多个Billboard图标的3种实战方案（含性能对比）

在三维地理信息可视化领域，Cesium作为行业标杆工具库，其Billboard功能常被用于标记关键点位。但当多个图标在同一坐标叠加时——比如智慧城市的交通信号灯状态叠加、物流追踪中的多事件提醒，开发者常会遇到视觉层级失控的难题。本文将深入剖析三种经过实战检验的解决方案，涵盖从传统Canvas合并到最新Entity属性的创新用法，并附上真实项目的性能压测数据。

1. 静态合并方案：Canvas预处理的技术细节与局限

Canvas合并是最早被广泛采用的解决方案，其核心思路是将多个视觉元素预先合成为单张图片。这种方法在图标内容固定且无需频繁更新的场景下表现优异，例如气象站点的温湿度复合图标。

实现步骤分解：

1. 创建画布容器

   const createMergedIcon = (baseImageUrl, overlayImageUrl) => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // 设置画布尺寸需考虑所有元素的布局 canvas.width = 100; canvas.height = 120;

2. 异步加载与合成
   由于图像加载的异步特性，需要采用Promise链式调用：

   const loadImage = (url) => new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = () => resolve(img); img.onerror = reject; img.src = url; }); Promise.all([ loadImage(baseImageUrl), loadImage(overlayImageUrl) ]).then(([bgImg, fgImg]) => { ctx.drawImage(bgImg, 0, 0, 100, 100); ctx.drawImage(fgImg, 25, 25, 50, 50); return canvas.toDataURL('image/png'); });

性能实测数据（1000个点位）：

注意：合并方案会导致动态更新成本剧增，任何子图标变化都需要重新生成整个合成图

2. 动态层级控制：CustomDataSource的进阶用法

Cesium 1.107版本对CustomDataSource的优化使其成为动态图标管理的利器。通过为每个Billboard创建独立的BillboardGraphics实例，配合height属性实现精确的垂直排序。

关键实现技巧：

• 高度偏移算法
  对同一坐标点的多个图标，按业务逻辑分配不同高度：

  const dataSource = new Cesium.CustomDataSource(); viewer.dataSources.add(dataSource); const addStackedBillboard = (position, images) => { images.forEach((img, index) => { dataSource.entities.add({ position: position, billboard: { image: img.url, height: position.height + index * 0.1, // 10cm间隔 verticalOrigin: Cesium.VerticalOrigin.BOTTOM } }); }); };

• 交互优化方案
  使用pick事件处理多层图标的点击判定：

  viewer.screenSpaceEventHandler.setInputAction((movement) => { const picked = viewer.scene.pick(movement.endPosition); if (picked?.id?.billboard) { // 获取该位置所有Billboard实体 const stack = dataSource.entities.values.filter( e => e.position.equals(picked.id.position) ); // 按业务逻辑处理顶层点击 } }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

动态方案对比测试：

3. 深度测试黑科技：disableDepthTestDistance的妙用

Cesium 1.107引入的disableDepthTestDistance属性为图标管理提供了新思路。该参数允许物体无视深度检测，实现"永远在前"的渲染效果。

实战配置示例：

entity.billboard = { image: 'icon.png', disableDepthTestDistance: Number.POSITIVE_INFINITY, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND };

创新组合方案：

1. 基础层使用常规Billboard显示静态背景
2. 动态状态层设置disableDepthTestDistance
3. 通过eyeOffset制造伪3D效果：

   eyeOffset: new Cesium.Cartesian3(0.0, 0.0, index * 2)

渲染性能影响：

4. 方案选型决策树

根据项目特征选择最优解：

1. 图标组合是否固定？

   • 是 → Canvas预合并
   • 否 → 进入下一判断

2. 更新频率如何？

   • 高频更新(>1次/秒) → CustomDataSource
   • 低频更新 → 考虑深度测试方案

3. 是否需要复杂交互？

   • 需要逐层点击 → CustomDataSource + 高度算法
   • 整体点击即可 → disableDepthTestDistance

在最近的城市交通监控项目中，我们最终采用混合方案：静态路标使用Canvas合并，实时车辆状态用CustomDataSource管理，紧急警报采用深度测试确保始终置顶。这种组合使万级点位的渲染帧率保持在45FPS以上。