开源库入门教程 Cesium：3D地球和地图库

原创

于 2025-10-02 11:43:15 发布 · 1.6k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#3d #arcgis #其他

该文章已生成可运行项目，

文章目录

最近在做项目时需要展示地理数据，我尝试了好几个库后才发现了Cesium这个宝藏！它让我能够在浏览器中创建惊艳的3D地球和地图应用。今天就和大家分享一下我使用Cesium的心得和入门步骤，希望对你有所帮助！

Cesium是什么？

Cesium是一个开源的JavaScript库，专门用于创建高性能的3D地球和地图应用。它最初由AGI（Analytical Graphics, Inc.）公司在2012年开发，现在由Cesium GS公司维护。

Cesium最厉害的地方在于它能在网页浏览器中渲染完整的3D地球，而且不需要任何插件（这点真的太棒了）！它直接使用WebGL技术，所以在现代浏览器中都能流畅运行。

为什么选择Cesium？

在众多地图库中，Cesium有几个突出优势：

真正的3D地球 - 不同于很多2D地图库，Cesium提供了一个完整的3D地球模型，支持从太空到街道级别的无缝缩放。
时间动态数据 - Cesium有一个内置的时间轴控件，可以展示随时间变化的数据（比如卫星轨道、天气变化等）。
精确的地理参考 - 支持各种坐标系统和地理投影，保证数据在地球上的准确位置。
海量数据处理能力 - 能够高效处理大量的地理数据，包括地形、影像和矢量数据。
活跃的社区支持 - 有完善的文档和活跃的社区，遇到问题很容易找到解决方案。

快速上手Cesium

接下来，我会带你从零开始搭建一个简单的Cesium应用。相信我，比你想象的要简单！

安装和配置

有几种方式可以在项目中使用Cesium：

方法1：使用npm安装（适合现代前端工程）

npm install cesium

安装后，还需要配置一下webpack或其他打包工具，因为Cesium包含了一些静态资源需要特殊处理。

方法2：使用CDN（最简单的方式）

如果你只是想快速尝试，直接在HTML中引入CDN链接就可以了：

<script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

注意版本号可能会更新，建议去官网查看最新版本。

创建你的第一个Cesium应用

下面是一个最基础的Cesium应用示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个Cesium应用</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.104/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>
        // 你需要一个Cesium ion账号获取token
        Cesium.Ion.defaultAccessToken = '你的Cesium ion token';
        
        // 创建Cesium查看器
        const viewer = new Cesium.Viewer('cesiumContainer', {
     
     
            terrain: Cesium.Terrain.fromWorldTerrain(),
            // 开启大气效果
            skyAtmosphere: true,
            // 显示底图选择器
            baseLayerPicker: true
        });
        
        // 设置初始视图为北京
        viewer.camera.flyTo({
     
     
            destination: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 15000),
            orientation: {
     
     
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-90