cesiumjs

项目地址： https://github.com/CesiumGS/cesium

官方文档： https://cesium.com/learn/cesiumjs-learn/

API 参考： https://cesium.com/learn/cesiumjs/ref-doc/

Sandcastle： https://sandcastle.cesium.com/

许可证： Apache-2.0

概述

CesiumJS 提供：

• 三维全球：WGS84 椭球体、地形（Quantized-Mesh）、卫星影像
• 3D Tiles：海量三维流式（倾斜摄影、BIM、点云、城市模型）
• glTF / GLB 模型：标准 PBR 渲染
• CZML / Entity API：高层声明式数据模型，时序动画
• Primitive API：底层高性能 API
• 可视化分析：通视/剖面/缓冲/裁剪/视频投影/光影

---

安装

npm install cesium

<link href="https://cdn.jsdelivr.net/npm/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/cesium/Build/Cesium/Cesium.js"></script>

Vite 集成

import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
export default defineConfig({ plugins: [cesium()] });

Webpack 集成

需将 node_modules/cesium/Build/Cesium/{Workers,Assets,Widgets} 拷贝到输出目录，并设置 window.CESIUM_BASE_URL。

---

快速上手

<div id="cesiumContainer" style="width:100%;height:100vh"></div>
<script type="module">
  import * as Cesium from 'cesium';
  import 'cesium/Build/Cesium/Widgets/widgets.css';

  Cesium.Ion.defaultAccessToken = 'YOUR_ION_TOKEN';

  const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: await Cesium.createWorldTerrainAsync(),
    timeline: false, animation: false
  });

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.397, 39.908, 5000)
  });
</script>

---

核心概念

概念	说明
Viewer	顶层容器
Scene	渲染场景，含 globe/camera/primitives
Entity	高层数据对象，时序、属性、可视化封装
DataSource	Entity 集合（CZML/GeoJSON/KML）
Primitive	低层渲染单元，性能最优
Cesium3DTileset	3D Tiles 数据集

---

影像与地形

viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
  url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
}));

viewer.terrainProvider = await Cesium.createWorldTerrainAsync({
  requestVertexNormals: true,
  requestWaterMask: true
});