Billboard

实际写法通常是直接在 entities.add 的对象里写 billboard: {...}， Cesium 会自动转成 BillboardGraphics。

参数

一个典型的设备图标

viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(116.391263, 39.907359, 3),
  billboard: {
    image: '/icons/sensor.png',
    scale: 0.6,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    scaleByDistance: new Cesium.NearFarScalar(500, 1.0, 8000, 0.4),
    translucencyByDistance: new Cesium.NearFarScalar(8000, 1.0, 20000, 0.2),
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000)
  }
});

verticalOrigin: BOTTOM 是插在地面上的图标（点状标记、杆状设备）的标准写法： 锚点放在图片底部，图标才不会被地面切成两半。

用 canvas 生成图标

image 不必是文件，程序生成的 canvas 同样可用。这样能按数据动态画图标， 不依赖任何图片资源：

function makeDot(color) {
  var c = document.createElement('canvas');
  c.width = c.height = 64;
  var ctx = c.getContext('2d');
  var g = ctx.createRadialGradient(32, 32, 2, 32, 32, 30);
  g.addColorStop(0, color);
  g.addColorStop(1, 'rgba(0,0,0,0)');
  ctx.fillStyle = g;
  ctx.beginPath();
  ctx.arc(32, 32, 30, 0, Math.PI * 2);
  ctx.fill();
  return c;
}

viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(116.39, 39.90),
  billboard: { image: makeDot('#4d9bff'), scale: 1.2 }
});

常见问题

图标不显示，控制台报跨域

Cesium 会把图片画进 WebGL 纹理，要求图片带 CORS 头。图床或第三方图标站通常不带， 需要自己代理或转成 base64 内联。

图标被地球挡住

disableDepthTestDistance 默认 0，图标在地球背面时会被裁掉，这是正常的。 要做「始终可见」的标注，把它设成 Number.POSITIVE_INFINITY。

scale 与 width/height 冲突

同时设了 width 和 scale 时以宽高为准，scale 被忽略。 想要按屏幕尺寸精确控制就用宽高，想要整体微调就用 scale。

大量图标卡顿

billboard 会自动合批，但每张不同图片都是一个独立纹理，切换纹理的开销很大。 上千个图标时，把图标合并成一张雪碧图，用 imageSubRegion 取子区域。