Cesium快速入门10：添加物体与3D建筑

同学们好！今天这节课，我们给地球"加点料"------

先画一个红点，再叠一个标签，最后把整座城市"3D 化"，让广州塔真正"立"起来。

一、先飞到广州塔

打开场景后，我们先让相机飞到广州塔上空。

（演示）大家看，现在离塔还有点远，中环那一块就是广州塔所在的位置。

等会儿我们就在塔尖插个"小红旗"，标记一下。

二、添加一个"红点 + 文字"实体

Cesium 里所有"看得见"的东西都叫实体（entity）。

想画一个点，只要告诉它三件事：

经纬度、高度
点长什么样
文字怎么摆

代码直接贴上来，中文注释已经写好，复制就能跑：

复制代码

// 1. 创建一个实体：红点 + 文字标签
const point = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(113.319, 23.109, 20), // 广州塔经纬度，离地 20 米
  point: {
    pixelSize: 10,                   // 点的大小（像素）
    color: Cesium.Color.RED,         // 填充颜色：正红
    outlineColor: Cesium.Color.WHITE,// 边框颜色：白色
    outlineWidth: 4,                 // 边框粗细：4 像素
  },
  label: {
    text: '广州塔',                  // 显示的文字
    font: '18px sans-serif',         // 字号、字体
    fillColor: Cesium.Color.WHITE,   // 字本身颜色
    outlineColor: Cesium.Color.BLACK,// 字描边颜色
    outlineWidth: 2,                 // 字描边粗细
    style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 既填充又描边
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 文字底部对准点
    pixelOffset: new Cesium.Cartesian2(0, -15),   // 文字再往下挪 15 像素，避免压住红点
  },
});

运行后，一个带白边的红色小点就出现了，底下还挂着"广州塔"三个大字。

（演示）如果一开始没看到，多半是高度给得太高或太低；把高度改成 20 米，就能正好贴在塔身上。

三、把整座城市"立"起来

单看一个点不过瘾？那就把真正的 3D 建筑搬出来。

Cesium 自带 OSM 建筑图层，数据来源于 OpenStreetMap，开源免费，一行代码就能加载：

复制代码

// 2. 添加全球 3D 建筑（OSM 数据）
const osmBuildings = viewer.scene.primitives.add(
  Cesium.createOsmBuildings()
);

再倾斜一下视角------

（演示）看！广州塔连同周边的高楼全部"长"出来了，天际线瞬间立体。

实体（entity）与图元（primitive）在这里只是不同层级的接口：

entity 写法简单，适合"点、线、广告牌"这类小物件；
primitive 更底层，适合批量建筑、海量数据。

今天先混个脸熟，后面我们会深挖它们各自的优缺点。

四、本节小结

会用 viewer.entities.add 画"红点 + 标签"。
会用 viewer.scene.primitives.add(Cesium.createOsmBuildings()) 一键加载 3D 城市。
高度给准，视角调好，东西就能"钉"在地球上。

作业：把红点换成你家门口的坐标，再让建筑图层立起来，看看能不能找到你家屋顶！

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