Cesium 入门教程：学习3D地球可视化开发

原创已于 2026-05-18 17:54:23 修改 · 628 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

Vue

于 2026-05-18 17:53:15 首次发布

一、Cesium 简介

Cesium 是一个开源的JavaScript库，用于创建世界级的3D地球和2D地图应用程序。它使用WebGL技术，无需插件即可在浏览器中呈现高性能的三维地球。

1.1 Cesium 的特点

跨平台3D：基于WebGL，支持所有现代浏览器
高性能渲染：支持大规模数据可视化
丰富的数据格式：支持3D Tiles、KML、GeoJSON、CZML等
时间动态可视化：内置时间序列数据支持
开源免费：Apache 2.0许可协议
活跃的社区：详细的文档和丰富的示例

1.2 Cesium 能做什么？

创建交互式3D地球应用
可视化地理空间数据（城市、地形、建筑物）
展示卫星轨道、飞机航线等动态数据
支持BIM、GIS数据的可视化
创建虚拟现实（VR）和增强现实（AR）应用
进行地形分析和空间计算

二、快速开始

2.1 引入Cesium

最简单的方式是通过CDN引入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
        #cesiumContainer { width: 100%; height: 100vh; margin: 0; padding: 0; overflow: hidden; }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        // 设置Ion访问令牌（可选，使用默认令牌）
        Cesium.Ion.defaultAccessToken = 'your_token_here';
        
        // 创建Cesium Viewer
        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrainProvider: Cesium.createWorldTerrain(),  // 全球地形
            timeline: true,      // 时间轴
            animation: true,     // 动画控件
            baseLayerPicker: true,  // 底图选择器
            geocoder: true,      // 地理编码搜索
            homeButton: true,     // 主页按钮
            sceneModePicker: true,  // 场景模式选择
            navigationHelpButton: true  // 帮助按钮
        });
        
        // 定位到北京
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 15000.0),
            orientation: {
                heading: Cesium.Math.toRadians(0),
                pitch: Cesium.Math.toRadians(-15),
                roll: 0
            }
        });
    </script>
</body>
</html>

2.2 代码解析

创建Viewer对象：Cesium.Viewer是Cesium的核心类，包含了地球、场景、相机等所有功能。

地形数据：Cesium.createWorldTerrain()加载全球地形数据。

相机定位：flyTo()方法实现平滑飞行到指定位置，Cartesian3.fromDegrees()将经纬度转换为笛卡尔坐标。

三、核心概念

3.1 Viewer（查看器）

Viewer是Cesium的主入口，包含：

Scene：3D场景对象
Camera：相机控制
Entities：实体集合
DataSourceDisplay：数据源显示

3.2 Entity（实体）

Entity是Cesium中用于表示地理对象的抽象类：

点（Point）：地标点
线（Polyline）：路径、边界
面（Polygon）：区域、多边形
模型（Model）：3D模型
标签（Label）：文字标注

3.3 ImageryProvider（影像提供者）

用于加载各种底图数据：

UrlTemplateImageryProvider：瓦片地图服务
BingMapsImageryProvider：必应地图
GoogleEarthEnterpriseImageryProvider：Google Earth
OpenStreetMapImageryProvider：OSM地图

3.4 TerrainProvider（地形提供者）

用于加载地形数据：

CesiumTerrainProvider：Cesium Ion地形
EllipsoidTerrainProvider：平滑椭球面
VRTheWorldTerrainProvider：VTerrain地形

四、常用功能

4.1 添加点标记

// 添加一个实体点
const entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042),
    point: {
        pixelSize: 10,
        color: Cesium.Color.RED,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 2
    },
    label: {
        text: '北京',
        font: '14pt sans-serif',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -15)
    }
});

// 飞到实体位置
viewer.flyTo(entity);

4.2 绘制线和面

// 绘制线
viewer.entities.add({
    name: '红色线条',
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([
            116.4074, 39.9042,
            121.4737, 31.2304,
            113.2644, 23.1291
        ]),
        width: 3,
        material: Cesium.Color.RED.withAlpha(0.8)
    }
});

// 绘制多边形
viewer.entities.add({
    name: '蓝色多边形',
    polygon: {
        hierarchy: Cesium.Cartesian3.fromDegreesArray([
            116.0, 39.0,
            117.0, 39.0,
            117.0, 40.0,
            116.0, 40.0
        ]),
        material: Cesium.Color.BLUE.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.WHITE
    }
});

4.3 添加3D模型

// 添加3D模型（需要模型URL）
const entity = viewer.entities.add({
    name: '飞机模型',
    position: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 1000),
    model: {
        uri: './SampleData/models/CesiumAir/Cesium_Air.glb',
        minimumPixelSize: 128,
        maximumScale: 20000
    }
});

viewer.flyTo(entity);

4.4 时间动态可视化

// 使用CZML创建时间动态数据
const czml = [{
    "id": "document",
    "name": "CZML Point",
    "version": "1.0"
}, {
    "id": "point1",
    "availability": "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
    "position": {
        "epoch": "2012-08-04T10:00:00Z",
        "cartographicDegrees": [
            0, -70, 20, 150000,
            70, -70, 20, 150000,
            140, -70, 20, 150000
        ]
    },
    "point": {
        "color": {
            "rgba": [255, 0, 255, 255]
        },
        "outlineColor": {
            "rgba": [255, 255, 255, 255]
        },
        "outlineWidth": 2,
        "pixelSize": {
            "number": 5
        }
    }
}];

// 加载CZML数据
const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.flyTo(dataSourcePromise);

4.5 点击事件处理

// 使用ScreenSpaceEventHandler处理鼠标事件
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(function(click) {
    // 获取点击位置的实体
    const pickedObject = viewer.scene.pick(click.position);
    
    if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
        const entity = pickedObject.id;
        console.log('点击了实体:', entity.name);
        
        // 显示信息框
        viewer.selectedEntity = entity;
    }
    
    // 获取点击位置的经纬度
    const cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
    if (cartesian) {
        const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        const lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
        const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
        console.log(`经度: ${lon}, 纬度: ${lat}`);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

4.6 加载GeoJSON数据

// 加载GeoJSON数据
const geojsonUrl = './data/sample.geojson';

Cesium.GeoJsonDataSource.load(geojsonUrl, {
    stroke: Cesium.Color.RED,
    strokeWidth: 3,
    fill: Cesium.Color.RED.withAlpha(0.5),
    clampToGround: true
}).then(function(dataSource) {
    viewer.dataSources.add(dataSource);
    
    // 获取所有实体
    const entities = dataSource.entities.values;
    for (let i = 0; i < entities.length; i++) {
        const entity = entities[i];
        // 设置样式或属性
        console.log(entity.name);
    }
    
    viewer.flyTo(dataSource);
});

五、坐标系统

5.1 常用坐标系

Cesium支持多种坐标系统：

// 1. 经纬度坐标（WGS84）
const longitude = 116.4074;
const latitude = 39.9042;
const height = 0;

// 2. 弧度坐标
const cartographic = Cesium.Cartographic.fromDegrees(longitude, latitude, height);

// 3. 笛卡尔坐标（世界坐标）
const cartesian3 = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);

// 4. 屏幕坐标
const screenPosition = new Cesium.Cartesian2(x, y);

// 坐标转换
const cartesian = Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 0);
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
const lon = Cesium.Math.toDegrees(cartographic.longitude);
const lat = Cesium.Math.toDegrees(cartographic.latitude);

5.2 相机控制

// 设置相机视角
viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 15000),
    orientation: {
        heading: Cesium.Math.toRadians(0),      // 方位角（0-360度）
        pitch: Cesium.Math.toRadians(-15),       // 俯仰角（-90到90度）
        roll: 0                                    // 翻滚角
    }
});

// 飞行动画
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(121.4737, 31.2304, 20000),
    orientation: {
        heading: Cesium.Math.toRadians(45),
        pitch: Cesium.Math.toRadians(-30),
        roll: 0
    },
    duration: 3  // 飞行时间（秒）
});

// 缩放到指定范围
viewer.camera.flyTo({
    destination: Cesium.Rectangle.fromDegrees(115.0, 38.0, 118.0, 41.0)
});

六、高级功能

6.1 3D Tiles

// 加载3D Tiles（城市建筑模型）
const tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(75343)
    })
);

tileset.readyPromise.then(function(tileset) {
    viewer.flyTo(tileset);
    
    // 设置样式
    tileset.style = new Cesium.Cesium3DTileStyle({
        color: "color('white')",
        show: true
    });
}).catch(function(error) {
    console.log(error);
});

6.2 地形开挖

// 地形开挖示例
viewer.scene.globe.depthTestAgainstTerrain = true;

const positions = Cesium.Cartesian3.fromDegreesArray([
    116.0, 39.0,
    117.0, 39.0,
    117.0, 40.0,
    116.0, 40.0
]);

viewer.entities.add({
    polygon: {
        hierarchy: {
            positions: positions
        },
        material: Cesium.Color.RED.withAlpha(0.5),
        classificationType: Cesium.ClassificationType.TERRAIN
    }
});

七、学习资源

7.1 官方资源

Cesium官网：https://cesium.com/
CesiumJS API文档：https://cesium.com/learn/cesiumjs/ref-doc/
Cesium Sandcastle示例：https://sandcastle.cesium.com/
Cesium官方教程：https://cesium.com/learn/

7.2 推荐学习路径

官方Sandcastle示例库（300+示例）
CesiumJS Workshop教程
官方博客和案例研究
GitHub开源项目

7.3 常用工具

Cesium Ion：云端数据托管和可视化平台
3D Tiles Tools：3D Tiles转换工具
CZML Writer：CZML数据生成工具
Cesium Inspector：调试和分析工具

八、性能优化

8.1 实体优化

// 使用Collection批量管理实体
const pointCollection = new Cesium.PointPrimitiveCollection();
viewer.scene.primitives.add(pointCollection);

for (let i = 0; i < 10000; i++) {
    pointCollection.add({
        position: Cesium.Cartesian3.fromDegrees(
            Math.random() * 360 - 180,
            Math.random() * 180 - 90
        ),
        pixelSize: 5,
        color: Cesium.Color.fromRandom({ alpha: 1.0 })
    });
}

8.2 渲染优化

// 优化设置
viewer.scene.fog.enabled = true;                    // 启用雾效
viewer.scene.globe.enableLighting = true;          // 启用光照
viewer.requestRenderMode = true;                   // 按需渲染
viewer.maximumRenderTimeChange = Infinity;        // 最大渲染时间

// 监听帧率
viewer.scene.debugShowFramesPerSecond = true;

参考文档：

标签

#3d