Cesium快速入门11：广告牌添加

一、把"红点"升级成"广告牌"

上节课我们插了一个小红点，也加载了 3D 建筑。

可只有文字不过瘾？那就再给广州塔贴一张"真人照"------用 Cesium 的 billboard（广告牌）功能。

---

二、准备一张小图标

1. 打开 iconfont 或其他图库，搜"广州塔"，挑一张顺眼的。

2. 下载 PNG，丢进项目 public/imgs/ 文件夹，命名 gz.png。

   （演示）把图拖进去后，路径就是 ./imgs/gz.png，等会儿直接引用。

---

三、写代码：把图"钉"在地球上

还是在同一个实体里加一行 billboard 配置即可，代码如下，中文注释已写好，复制就能跑：

// 1. 添加一个广告牌（图片）
viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(113.31914, 23.109, 700), // 广州塔上空 700 米
  billboard: {
    image: './imgs/gz.png',           // 刚才准备的图片
    width: 200,                       // 宽 200 像素
    height: 200,                      // 高 200 像素
    verticalOrigin: Cesium.VerticalOrigin.TOP,    // 图片顶部对准坐标点
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中
    pixelOffset: new Cesium.Cartesian2(0, -15)   // 再往下挪 15 像素，避免压住文字
  }
});

---

四、现场调位置

（演示）第一次跑，图片和小红点挤在一起？别急，三招搞定：

1. 改高度：把 700 改成 750，图片就"飘"上去一层。

2. 改偏移：pixelOffset 的 y 再往下多挪一点，比如 -30。

3. 改原点：verticalOrigin 换成 TOP，图片顶部贴着坐标点，底部自然悬空，瞬间清爽。

---

五、最终效果

塔尖一张靓照，底下"广州塔"三个白字，3D 建筑环抱四周，层次干净又不抢戏。

实际项目里，一般"红点 + 图片 + 文字"三选二就行，太多会叠成"千层饼"。

大家按场景自由删减，大小、偏移、透明度都能再细调。

---

六、本节小结

1. 会找图、丢图、引图。

2. 会用 billboard 把图片钉在地球任意位置。

3. 会用 verticalOrigin / horizontalOrigin / pixelOffset 微调对齐。

下节课我们继续给地球"加戏"，拜拜！