Cesium快速入门

Appearance

简介 ​

Cesium 是一款开源的基于 WebGL 的 3D 地理信息可视化引擎，支持在浏览器中创建高性能、高精度的三维地球和地图应用，无需任何插件。

  • 本系列是 CesiumJS 学习笔记，所有代码均基于 Vue3 + Vite 构建。
  • 如果需要学习 3D 地图，走WebGIS路线，Cesium 是必学地图框架。

技术栈 ​

当前文档所使用技术栈如下：

bash
Vue 3.5.13+
CesiumJS 1.129.0+
Vite 6.3.5+

版本差异 ​

由于 CesiumJS 版本迭代，API 存在一些差异。以下列举了学习过程中常见且容易出错的版本差异及解决方案：

  • Token 问题: 新版 CesiumJS 默认已内置一个 Ion Token，学习过程中通常无需额外配置。如需使用自定义 Token，请通过 Cesium.Ion.defaultAccessToken = 'YOUR_TOKEN' 进行设置。您可以在 Cesium Ion 官网 注册获取Token。最好还是自己申请一个，它这个内置Token感觉不稳定

  • 更换底图: 当前版本请参考 更换底图 文档获取最新方法。以下为已失效的旧版加载方式，请避免使用：

    js
    // 这种方式加载出来，地球为蓝色，该API已失效
viewer({
  imageryProvider: new Cesium.UrlTemplateImageryProvider({
    xxx: xxx,
    // ...
  }),
});

  • 添加地形: 地形加载方式已由 CesiumTerrainProvider 变更为 createWorldTerrainAsync。详细用法请参考 添加地形 章节。

  • 笛卡尔坐标转屏幕坐标: API 已由 wgs84ToWindowCoordinates 更新为 worldToWindowCoordinates。

  • 地形夸张: 旧版 Globe.terrainExaggeration 和 Globe.terrainExaggerationRelativeHeight 已在 CesiumJS 1.113 中弃用，并于 1.116 版本移除。请改用 Scene.verticalExaggeration 和 Scene.verticalExaggerationRelativeHeight 进行地形夸张设置。

个人项目介绍 ​

  • 本系列文档旨在帮助初学者快速入门，通过系统化的案例教程激发学习兴趣。
  • Cesium快速入门地址：Cesium 快速入门
  • OpenLayers、Leaflet快速入门地址：OpenLayers、Leaflet 快速入门
  • 项目素材案例开源地址，包含Cesium、Leaflet、OpenLayers等 GIS 框架的实践案例，同时该项目素材等也全在该项目中。
  • 各位觉得有帮助，还请帮忙点个star，您的支持是我最大的动力！