一、快速开始(无需安装依赖)
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>
📦 本教程测试工程源码
网盘资源
文件名称:cesium-html
分享链接:点击访问
提取码:ming
-- 来自https://cesium.js.cn的分享
📝 说明: 网盘中包含了本教程的完整示例代码,建议下载保存以供参考。