CesiumJS 自定义 Widget 开发完整指南：实战搭建可扩展 UI 组件的 5 个关键决策

CesiumJS 自定义 Widget 开发完整指南：实战搭建可扩展 UI 组件的 5 个关键决策

【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium

在 CesiumJS 里打开 Viewer，总想给工具栏挂上自己的"图层列表"，翻遍 Timeline 的 API 却找不到挂载点——默认 UI 的扩展面比想象中窄得多。

它在体系里的位置：Widget 在 CesiumJS 中的角色

Widget 是 CesiumJS 对"浮在三维地球周围的那批 UI 组件"的统称：时间轴 Animation、图层选择器 BaseLayerPicker、场景模式切换器，各管一块"控制面板"，与 Scene 渲染主流程互不干扰。

源码在 packages/widgets/Source/，每个 Widget 是 JS + ViewModel + CSS 三件套，命名固定，比如 SceneModePicker.js 配 SceneModePickerViewModel.js 和 SceneModePicker.css，照着命名找文件基本不会迷路。

组件内部的状态跟随三维场景（时间、模式、选中对象），所以它用 Knockout.js 做 MVVM 数据绑定：场景一变，UI 自动同步，不必手写大量 DOM 同步代码——这也是官方 Widget 的默认做法。

三步搭建：从空白页到能跑的组件

准备最小环境（HTML + CDN）

先让空白页跑起来。五行 HTML 加 CDN 即可，不需要构建步骤，浏览器里直接验证思路：

<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> <div id="cesiumContainer"></div> <div id="customWidget" style="position: absolute; right: 10px; bottom: 40px;"></div> <!-- 两个 div：地球挂载点 + 预留的组件槽位

【免费下载链接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:项目地址: https://gitcode.com/GitHub_Trending/ce/cesium