当前位置：首页 > news >正文

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

news 2025/8/29 6:54:53

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

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>