Cesium学习第一章安装下载基于vue3引入Cesium项目开发

Cesium 是一个非常流行的开源 JavaScript 库，由 Cesium Systems 开发，用于在网页上创建三维地球和地图。它基于 WebGL 技术，可以显示全球范围内的地理空间数据。

首先 cesium怎么读？

$ˈsiːziəm$ 读音类似：C z m/ cz母

首先 Cesium是什么？

Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile。

它本来的样子长这样

这样。。

以及这样。。地图展开后

好了那我们上面的例子已经看完了下面我们学习一下怎么安装它我们基于vue3 开发还是本地开发都需要安装nodejs

下载nodejs: https://nodejs.org/en/download

根据你的系统版本选择下载对应版本的nodejs

下载完成后。安装完成后，在你的开发工具里面输入 node -v 查看出现版本号码就说明安装成功了。如下：

接下来我们下载 cesiumjs

下载地址 https://cesium.com/platform/cesiumjs/

使用npm 下载和直径点击下载按钮都可以下载

直接点击下载按钮，会跳转到如下页面

再直接点击下载按钮会调转到 github下载地址，国内访问很可能是这样，访问不通，这样建议多刷新几遍页面，会下载下来

下载后解压缩文件夹里面的长这样

打开Build 文件夹将里面的Cesium 文件夹复制到我们的项目里

我的项目结构如下：将Cesium 放到 public 文件里面

index.html 页面里修改如下：将css，js代码引入到项目里

html 复制代码

<!doctype html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />

    //引用cesium的css
    <link rel="stylesheet" href="Cesium/Widgets/widgets.css" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
  </body>

  //引用cesium的js
  <script type="text/javascript" src="Cesium/Cesium.js"></script>
</html>

在html 的body 里面

html 复制代码

<div id="cesiumContainer"></div>

在页面的js 里面

javascript 复制代码

 Cesium.Ion.defaultAccessToken =
    '你申请的tokens'
  // 初始化Cesium Viewer
  const viewer = new Cesium.Viewer('cesiumContainer', {
    
  })

tokens 的申请在cesium 网站需要注册登录后创建，个人和非商业项目是免费的~~

然后把token 复制替换

javascript 复制代码

Cesium.Ion.defaultAccessToken =
    'eyJqdGkiOiI1ODQ5MDM2MS0xY2JmLTRhYmUtODYyZC1iNDViMzk2ZDdkZGUiLCJpZCI6MzczNjc0LCJpYXQiOjE3NjcwODE3NjV9.LuYkwE7AwGf01zlwLT9GOo2h5oERVIayz5F0nXwoxAU'

注意我上面的token是假的不能直接使用！！！！！一定要换成你自己申请的tokens.否则可能出现地图展示不出来，加载错误等等。

然后运行dome 就出来啦

基于vue3框架下载使用下面的下载方式

vue3和tyjs 会强制校验类型引入对象等，要是用上面的方法引入到项目里，也能用，但是typejs 会提示有错误信息例如：

所以我们要用

javascript 复制代码

npm install cesium

安装完上面的cesium后还要安装下面的插件否则运行会报错

javascript 复制代码

npm install vite-plugin-cesium -D

安装完成后修改tsconfig.ts 文件，注意注释的新增2条一个improt cesium 一个在 plugins里面的 cesium()

javascript 复制代码

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import cesium from 'vite-plugin-cesium' // 新增引入 cesium
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    cesium(), // 新增
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

最后在你需要展示地球的页面顶部引入

javascript 复制代码

import { Ion, Terrain, Viewer } from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'

页面挂载后：

javascript 复制代码

onMounted(async () => {
  Ion.defaultAccessToken =
    '你的tokens'
  // 初始化Cesium Viewer
  const viewer = new Viewer('cesiumContainer', {
    terrain: Terrain.fromWorldTerrain(),
  })
})

注意一点要在页面挂在后在创建实例，否则会报错，因为在页面挂在前，页面里面还不存在，id为cesiumContainer的 div 元素

最后的最后我们就完成第一个任务啦下载安装运行 vue cesium ，放一张截图：

Cesium学习第一章 安装下载 基于vue3引入Cesium项目开发

Cesium 是一个非常流行的开源 JavaScript 库，由 Cesium Systems 开发，用于在网页上创建三维地球和地图。它基于 WebGL 技术，可以显示全球范围内的地理空间数据。

首先 Cesium是什么？

基于vue3框架下载使用下面的下载方式

今天是2025年12月31日，25年的最后一天，祝大家26年新年快乐！

Cesium学习第一章安装下载基于vue3引入Cesium项目开发