『CesiumJS』初体验

2026-03-30 2 飞机号购买网站

想着于网页之中轻轻松松地做出卫星地图以及智慧城市效果吗？CesiumJS这个依托WebGL的3D地球库，在无需插件的情形下便能够于浏览器里运行。本文借助Vue3项目来演示从安装直至显示地球的完整流程，助力你迅速上手。

准备工作：创建项目与安装核心库

以Vite来创建Vue3项目乃是最为便捷迅速的路径，于命令行之中执行npm create vite@latest cesium-demo -- --template vue，接着进入到项目所在目录而后进行依赖的安装，此套工具链能够保证开发环境得以迅速准备妥当，并不需要手动去配置繁杂的打包参数。

接下来要进行的是安装Cesium核心包，于项目根目录处运行npm install cesium，此库涵盖了所有3D地球渲染所需要的模块，需要注意的是，Cesium体积较大，首次安装之时可能需要等待一分钟左右，具体的时间依靠网络状况来决定。

自动化配置：使用vite-plugin-cesium插件

npm install cesium

极其烦冗地手动去配置Cesium的静态资源路径，是由于库当中涵盖着数量众多的着色器文件，还有纹理贴图以及Web Worker脚本。可自动对这些配管予以处理的vite - plugin - cesium插件，能让开发者避开因要手动去拷贝Assets文件夹，或者还得去调整构建路径。

npm install vite-plugin-cesium -D

于项目根目录那儿执行npm install vite - plugin - cesium去完成插件的安装，之后，把vite.config.js文件给打开开展配置工作。接着，将cesium插件进行引入，并且在plugins数组里予以调用，当这一步弄好了之后，所有的静态资源在构建期间会自动地被复制到输出目录那儿，并且能够正确地设置基础URL路径。

核心代码：在Vue组件中渲染3D地球

import { defineConfig } from 'vite'
import vue from '@vue/vite-plugin-vue'
import cesium from 'vite-plugin-cesium' // 引入插件
export default defineConfig({
  plugins: [
    vue(),
    cesium() // 配置插件
  ]
})

组件EarthView.vue要在src/components目录里创建。模板这一部分要有一个有着清晰标识的div容器，而且还得把宽度以及高度设置成100%或者规定好的像素具体数值。此容器就是Cesium渲染引擎让地球绘图的画布，它的尺寸会把最终的显示效果直接影响到。

采用Vue3的组合式API，于onMounted生命周期钩子里面初始化Viewer对象，借由new Cesium.Viewer('cesiumContainer')去创建视图，当中cesiumContainer便是模板里div的id，Viewer属于Cesium的核心类，管控着地球、时间轴、图层以及用户交互等全部功能。

隐藏版权信息：申请并配置Access Token

页面底部默认呈现的版权信息含有Cesium ion的标记，若要将其去除就得注册免费的Access Token，访问cesium.com/ion这个官网，利用邮箱注册账户之后，于个人令牌管理页面能够看到一串字符，此即所需的Token。

把获取得来的Token复制进代码里，在创建Viewer以前，对Cesium.Ion.defaultAccessToken进行设置，设为“你的令牌”。做完这样的操作之后，底部的提示文字会变成更为简洁的授权说明。要是还想要隐藏右上角的Cesium logo，能够借助CSS把对应的div元素display属性设置成none。

界面精简：移除多余控件保留纯净地球

Viewer默认呈现多种控件，其中涵盖右上角的基础地图切换按钮，还有左下角的导航控件，以及底部的时序播放器等。要是仅需展示一个纯净的3D地球，那么能够在初始化之际传入配置参数以关闭这些组件。

于Viewer构造函数的第二个参数那儿，把animation设为false来关闭动画控件，将baseLayerPicker设为false于隐藏图层选择器，把fullscreenButton设为false以移除全屏按钮，把vrButton设为false去禁用VR模式，把geocoder设为false来关闭地理编码搜索框，把homeButton设为false以去掉主页按钮，把sceneModePicker设为false去隐藏场景模式切换，把navigationHelpButton设为false来移除帮助按钮。这样就能得到一个完全简洁的地球视图。

跨框架兼容：代码在React等框架中的适配

// 省略部分代码
onMounted(() => {
    Cesium.Ion.defaultAccessToken = 'YOUR_TOKEN_HERE'; // 在这里填入你的 Cesium Ion Access Token
  const viewer = new Cesium.Viewer('cesiumContainer');
});

本文所展现的例子是以Vue3为基础来开展开发工作的，然而Cesium自身并不依附于特定的前端框架，在React项目里运用它的时候，同样是需要去创建容器div的，并且要在useEffect钩子当中执行初始化操作，关键的要点在于需要保证DOM元素已经完成挂载，而且当组件卸载之际要调用viewer.destroy()来开展资源清理工作。

// 省略部分代码
onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'YOUR_TOKEN_HERE';
  const viewer = new Cesium.Viewer('cesiumContainer');
  viewer._cesiumWidget._creditContainer.style.display = "none";
});

可采用类似模式的有其他框架比如Angular、Svelte或者原生JavaScript项目。Cesium的核心库处理了所有底层WebGL渲染，在框架层面只需管理好生命周期以及DOM引用。所以在学习Vue3示例之后，迁移到其他技术栈时仅仅需要调整生命周期钩子的写法。

在项目里头，你有无碰到过那种要把复杂3D库进行集成时的配置方面的难题？要是有的话，很欢迎你在评论区域去分享一下你自身所拥有的经验，或者是留一些疑问在那儿，同时，麻烦你点个赞并且收藏一下这篇文章，好让更多的开发者能够看到这份具备实用性质的指南。

// 省略部分代码
onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'YOUR_TOKEN_HERE';
  const viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false,       // 关闭底部动画控件
    timeline: false,        // 关闭底部时间轴控件
    fullscreenButton: false, // 关闭底部全屏按钮
    baseLayerPicker: false, // 关闭右上角图层选择器
    geocoder: false, // 关闭右上角搜索框
    homeButton: false, // 关闭右上角主页按钮
    navigationHelpButton: false, // 关闭右上角问号帮助按钮
    sceneModePicker: false, // 关闭右上角地球场景切换按钮
  });
  viewer._cesiumWidget._creditContainer.style.display = "none";
});