在
Cesium 中加载
一个矩形（Rectangle）可以通过 `Entity` 或 `Primitive` API 实现。下面使用 **Entity API** 来创建并显示
一个矩形，这是最简单且常用的方式。
### 示例：使用
Cesium 加载
一个矩形
```
javascript
// 初始化
Cesium Viewer
const viewer = new
Cesium.Viewer
('
cesiumContainer', {
terrainProvider:
Cesium.createWorldTerrain
()
}
);
// 定义矩形的边界（西、南、东、北），单位是弧度
const rectangle =
Cesium.Rectangle.fromDegrees
(
-100.0, // 西经
30.0, // 南纬
-90.0, // 东经
40.0 // 北纬
);
// 添加矩形 Entity 到场景中
const rectangleEntity = viewer.entities.add
({
name: 'Rectangle on Surface',
rectangle: {
coordinates: rectangle,
material:
Cesium.Color.BLUE.withAlpha
(0.5
), // 半透明蓝色
outline: true,
outlineColor:
Cesium.Color.BLACK,
outlineWidth: 2
}
}
);
// 可选：调整视角以查看矩形
viewer.zoomTo
(viewer.entities
);
```
---
### ✅ 解释：
- `
Cesium.Viewer`：初始化三维地球场景，`
cesiumContainer` 是 HTML 中用于承载
Cesium 的 `<div id="
cesiumContainer"></div>`。
- `
Cesium.Rectangle.fromDegrees
(west, south, east, north
)`：创建
一个地理范围矩形（经纬度输入，自动转为弧度）。
- `viewer.entities.add
()`：添加
一个实体到场景中。
- `rectangle.material`：填充颜色，这里使用带透明度的蓝色。
- `outline`：是否显示边框。
- `viewer.zoomTo
()`：自动将相机聚焦到该矩形区域。
---
### 🌐 效果：
这个矩形会
贴合地球表面显示，位于美国中部区域（由经纬度决定），你可以自由旋转、缩放地球来查看。
---
### 💡 注意事项：
- 矩形必须定义为 `
Cesium.Rectangle` 对象。
- 如果你想绘制在某个高度上或有拉伸效果，可以结合 `extrudedHeight` 属性实现立体矩形（墙或柱体）。
- 确保引入了正确的
Cesium JS
和 CSS 文件（推荐使用官方 CDN 或 npm 安装）。
---
### ✅ 示例 HTML 结构（完整页面）
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Cesium Rectangular Example</title>
<script src="https://
cesium.com/downloads/
cesiumjs/releases/1.114/Build/
Cesium/
Cesium.js"></script>
<link href="https://
cesium.com/downloads/
cesiumjs/releases/1.114/Build/
Cesium/Widgets/widgets.css" rel="stylesheet" />
<style>
html, body, #
cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="
cesiumContainer"></div>
<script>
// 上面的
JavaScript 代码放在这里
</script>
</body>
</html>
```
---
### 🔍 常见扩展需求：
- 动态修改矩形位置
- 鼠标交互拾取矩形
- 使用 `Primitive` API 提高性能（适用于大量图形）
- 添加纹理材质而非纯色
---
扫一扫
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
