Day4 在地球上“画画”：添加点、线、面标记 (Entity 基础) 2025-08-17 Cesium基础开发教程 無 # Day4 在地球上“画画”：添加点、线、面标记 (Entity 基础) > 目标： > 1. 了解 Cesium 中 Entity 的概念； > 2. 学会用 Entity 绘制“贴地”的点、线、面； > 3. 掌握常用属性：颜色、线宽、透明度、贴地方式等。 --- ## 0. 准备：先开地形 为了让大家立刻看到“贴地”效果，我们在每段示例前统一加上地形开关： ```javascript viewer.scene.setTerrain( new Cesium.Terrain(Cesium.CesiumTerrainProvider.fromIonAssetId(1)) ); viewer.scene.globe.depthTestAgainstTerrain = true; ``` - `setTerrain`：加载全球 3D 地形。 - `depthTestAgainstTerrain = true`：让后续所有 Entity 都能被地形正确遮挡（看起来更真实）。 --- ## 1. 添加点标记 ```javascript const entity = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.391193, 39.906776), name: '天安门', point: { pixelSize: 11, color: Cesium.Color.RED, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, }, }); viewer.zoomTo(entity); ``` | 属性 | 说明 | |---|---| | `position` | 经纬度 → Cartesian3。高度缺省为 0，因为后面用了 `CLAMP_TO_GROUND`。 | | `name` | 在 InfoBox / 图层面板里显示的名称。 | | `point.pixelSize` | 点的大小（像素）。 | | `point.color` | 颜色，支持 `Cesium.Color.XXX` 或 `new Cesium.Color(r,g,b,a)`。 | | `heightReference` | 贴地方式，见下表。 | ### heightReference 速查表 | 值 | 含义 | |---|---| | `CLAMP_TO_GROUND` | 紧贴地形表面 | | `RELATIVE_TO_GROUND` | 在地面高度基础上再加一个相对高度 | | `NONE` | 绝对海拔（米） | | `CLAMP_TO_SEA_FLOOR` / `RELATIVE_TO_SEA_FLOOR` | 海底地形专用 |  --- ## 2. 添加线 ```javascript const line = viewer.entities.add({ name: '测试线', polyline: { positions: Cesium.Cartesian3.fromDegreesArray([ 116.4, 39.906776, 116.3, 39.906772 ]), width: 5, material: Cesium.Color.RED, clampToGround: true, // 线贴地 }, }); viewer.zoomTo(line); ``` | 属性 | 说明 | |---|---| | `positions` | 经纬度数组，`fromDegreesArray` 会自动转换成笛卡尔坐标。 | | `width` | 线宽（像素）。 | | `material` | 材质，可以是纯色、渐变、箭头、纹理等。 | | `clampToGround` | 布尔值，`true` 代表“贴地”。 | > 小贴士：线贴地需要地形数据源支持地形高度查询，Cesium Ion 地形默认满足。  --- ## 3. 添加面 ```javascript const polygon = viewer.entities.add({ name: '测试面', polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArray([ 116.5, 39.906776, 116.5, 39.907776, 116.3, 39.907776, 116.3, 39.906776 ]), material: Cesium.Color.BLUE.withAlpha(0.5), // 50% 透明 heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, }, }); viewer.zoomTo(polygon); ``` | 属性 | 说明 | |---|---| | `hierarchy` | 构成多边形的顶点坐标数组（会自动闭合）。 | | `material` | 支持颜色、图片、条纹、棋盘格、动态材质等。 | | `heightReference` | 与点相同，可贴地或相对地面。 | | `extrudedHeight`（可选） | 拉伸出 3D 体块，单位米。 |  --- ## 4. Entity 与 Primitive 的区别（加餐） | 维度 | Entity（高层 API） | Primitive（底层 API） | |---|---|---| | 易用性 | 高：一行代码搞定 | 低：需要自己拼几何体 | | 性能 | 中等：自动合并批次 | 高：可精细控制渲染 | | 功能 | 内置 InfoBox、时间轴、属性驱动 | 需要手动实现 | | 适用场景 | 业务标记、可视化 | 海量数据、特效 | 今天我们先玩 Entity，后面 Day8 再深入 Primitive。 --- ## 5. 今日练习 1. 把“天安门”点改成绿色、半径 20 像素，并让它在 3000 m 高度悬浮。 2. 画一条从你家到公司（任意两点）的红色粗线，并开启“发光”材质（提示：`Cesium.PolylineGlowMaterialProperty`）。 3. 绘制一个任意四边形，透明度 0.3，并把它向上拉高 100 m，观察贴地与悬浮的区别。 --- ## 6. 小结 今天我们学会了： - 加载地形，让标记“贴地”； - 用 `viewer.entities.add` 快速创建点（point）、线（polyline）、面（polygon）； - 掌握常用样式属性：大小、颜色、透明度、贴地模式。 明天我们将学习 **如何给这些标记加文字标签（Label）和广告牌（Billboard）**，让地图更生动。 --- 祝你编码愉快！ Loading content...
评论已关闭