一、快速开始（无需安装依赖）
1. 创建HTML文件
新建一个 .html 文件（如 cesium-demo.html），粘贴以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Cesium Quick Start</title>
<!-- 引入Cesium CSS和JS（通过CDN） -->
<link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.121/Build/Cesium/Widgets/widgets.css">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.121/Build/Cesium/Cesium.js"></script>
<style>
/* 确保容器占满屏幕 */
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* 防止滚动条 */
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// 初始化Viewer（核心代码）
const viewer = new Cesium.Viewer('cesiumContainer', {
animation: false, // 关闭动画控件
baseLayerPicker: false, // 关闭图层选择器
timeline: false // 关闭时间轴
});
// 添加示例：北京标记点
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(116.391, 39.907),
point: { pixelSize: 10, color: Cesium.Color.RED },
label: { text: '北京' }
});
</script>
</body>
</html>
2. 直接运行
用浏览器打开该文件，即可看到Cesium地球和北京标记点。
二、手动配置本地资源（增强离线可用性）
1. 下载Cesium库
访问 百度网盘，下载。
2. 解压并拷贝到项目
将解压后的 Build/Cesium 目录复制到你的项目文件夹中，目录结构如下：
your-project/
├── cesium-demo.html
└── Cesium/ # 本地Cesium库
├── Assets/
├── ThirdParty/
├── Widgets/
└── Workers/
3. 修改HTML引用路径
将代码中的CDN链接替换为本地路径：
<link rel="stylesheet" href="Cesium/Widgets/widgets.css">
<script src="Cesium/Cesium.js"></script>
4. 完整代码
<!DOCTYPE html>
<html>
<head>
<title>Cesium Quick Start</title>
<!-- 引入Cesium CSS和JS（通过CDN） -->
<link rel="stylesheet" href="Cesium/Widgets/widgets.css">
<script src="Cesium/Cesium.js"></script>
<style>
/* 确保容器占满屏幕 */
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* 防止滚动条 */
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// 初始化Viewer（核心代码）
const viewer = new Cesium.Viewer('cesiumContainer', {
animation: false, // 关闭动画控件
baseLayerPicker: false, // 关闭图层选择器
timeline: false // 关闭时间轴
});
// 添加示例：北京标记点
viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(116.391, 39.907),
point: { pixelSize: 10, color: Cesium.Color.RED },
label: { text: '北京' }
});
viewer.zoomTo(viewer.entities);
</script>
</body>
</html>
📦 本教程测试工程源码
📝 说明: 网盘中包含了本教程的完整示例代码，建议下载保存以供参考。