Cesium入门教程（二）环境搭建（HTML版）

一、快速开始（无需安装依赖）

1. 创建HTML文件

新建一个 .html 文件（如 cesium-demo.html），粘贴以下代码：

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链接替换为本地路径：

html 复制代码

<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>

📦 本教程测试工程源码

网盘资源

文件名称：cesium-html

分享链接 ：点击访问

提取码：ming

-- 来自https://cesium.js.cn的分享

📝 说明: 网盘中包含了本教程的完整示例代码，建议下载保存以供参考。