点赞 + 关注 + 收藏 = 学会了
💡整理了一个 『CesiumJS』 入门专栏，感兴趣的工友可以戳这里关注 👉 《CesiumJS 入门教程》
CesiumJS 是目前 Web 端很厉害的开源 3D 地球与地图可视化库。
简单来说，Cesium 就是一个“运行在浏览器里的 3D 地球仪”。
它基于WebGL技术，不用安装任何浏览器插件，直接在网页里就能运行，核心能力就是帮我们快速做出立体地球、卫星地图、地理点位标注、地形展示等效果，不管是做简单的地图展示、旅游点位标注，还是智慧城市、航天轨迹模拟这类复杂项目，都能轻松实现。
- Cesium官网：https://cesium.com/platform/cesiumjs
- Cesium仓库：https://github.com/CesiumGS/cesium
- CesiumJS 官方文档：https://cesium.com/learn/cesiumjs-learn
环境准备
本专栏用 Vue3 项目来讲解 Cesium 的用法。使用 React 或者其他框架的工友也不用担心，Vue3 的语法足够简单，Cesium 也能在其他框架下运行。
我用 Vite 创建一个 Vue3 项目，你可以用其他方式创建。
安装 Cesium
在项目根目录下运行：
npm install cesium
安装配套插件
由于 Cesium 包含大量的静态资源（着色器、贴图、Web Worker），手动配置 Vite 路径非常繁琐。推荐使用 vite-plugin-cesium 插件自动处理所有配置。
npm install vite-plugin-cesium -D
配置 vite.config.js
在 vite.config.js (或 .ts) 中引入并使用该插件。
import { defineConfig } from 'vite'
import vue from '@vue/vite-plugin-vue'
import cesium from 'vite-plugin-cesium' // 引入插件export default defineConfig({plugins: [vue(),cesium() // 配置插件]
})
这一步之后，Cesium 的静态资源会自动拷贝到构建目录，并正确配置基础路径，无需手动搬运 Assets 文件夹。
在 Vue 3 组件中使用
接下来编写一个简单的组件来显示 3D 地球。
在模板中定义一个带 id 的 div，并设置宽高，然后等 div 组件渲染出来后再用 Cesium 渲染一个地球，一定要遵循这个流程，不然可能会报错。
在 Vue 3 用 onMounted 这个生命周期能实现上面的要求。
<template><div><div id="cesiumContainer"></div></div>
</template><script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';onMounted(() => {const viewer = new Cesium.Viewer('cesiumContainer');
});</script><style scoped>
#cesiumContainer {width: 100vw;height: 100vh;margin: 0;padding: 0;overflow: hidden;
}
</style>
通过 new Cesium.Viewer() 创建了一个核心视窗，它能管理地球、时间轴、选择器等所有交互。Viewer() 里可以传入多个参数，第一个参数是要将地图绑定的元素。
隐藏版权信息
细心的工友可能已经发现，页面底部有一句版权信息。
想去掉这句信息需要在 Cesium 官网驻车一个 Access Token，免费的，放心～
打开 Cesium 官网，注册一个👉 https://ion.cesium.com/signin/tokens
注册并登录成功后，回到 Cesium 这里就能看到右侧有个 Token，把它复制到你的代码里。
这样操作后，下方的提示就变成稍微正版一点了。
// 省略部分代码
onMounted(() => {Cesium.Ion.defaultAccessToken = 'YOUR_TOKEN_HERE'; // 在这里填入你的 Cesium Ion Access Tokenconst viewer = new Cesium.Viewer('cesiumContainer');
});
如果想要再简洁点，可以将 LOGO 元素的 display 设置为 none。
// 省略部分代码
onMounted(() => {Cesium.Ion.defaultAccessToken = 'YOUR_TOKEN_HERE';const viewer = new Cesium.Viewer('cesiumContainer');viewer._cesiumWidget._creditContainer.style.display = "none";
});
隐藏控件
此时页面右上角和页面底部还有一些控件，如果只想保留一个地球在页面里，可以这么操作。
// 省略部分代码
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";
});
以上就是本文的全部内容啦，想了解更多 CesiumJS 用法记得关注《CesiumJS 入门教程》👏
点赞 + 关注 + 收藏 = 学会了