【Vue+CesiumJS学习（1）】在Vue中使用Cesium（两种方法）_股票证券

【Vue+CesiumJS学习（1）】在Vue中使用Cesium（两种方法）

创始人

2025-05-28 09:23:29

在Vue中使用Cesium可以通过使用Cesium官方提供的包，或者使用开发者封装后的二次包。本文对两种方式均进行了介绍。

Vue版本2.6.x

前提准备，需要从Cesium中申请一个个人Token

申请地址

两种方法均在Vue项目中运行，略过Vue项目创建步骤。

方法一：直接使用官网提供的cesium包

Step 1：下载包

npm install cesium --save

Step 2：将下载后的文件从node_modules中复制一部分到public文件夹下

Step 3：在index.html中引入js文件和css文件

Step 4：新建一个Vue文件，或者直接对默认的HelloWorld.vue进行修改

Step 5:在app.vue中加载组件

Step 6：注意事项

如果报错的话，有个设置是需要在package.json中添加，位置与“rules”同级

"globals":{"Cesium":true    
}

结果展示

方法二：采用开发者封装包

Step 1：下载vue-cesium

npm install vue-cesium

***注意因为该项目于2022.12.31停止vue2版本更新，现在默认安装都是vue3版本，因此需要控制版本

npm install vue-cesium@2.1.6

Step 2：在main.js中引入

import Vue from 'vue'
import VueCesium from 'vue-cesium'Vue.use(VueCesium, {cesiumPath: 'https://unpkg.com/cesium@latest/Build/Cesium/Cesium.js',accessToken: 'your token'
})

Step 3：组件中加载

运行结果

开发者提供的包还有很多便捷性的东西，这里不再阐述了，有需要可以自己去看看，地址如下。

Vue-Cesium

上一篇：消息通知系统设计六要素

下一篇：腾讯云云服务器标准型S5性能配置简单测评

【Vue+CesiumJS学习（1）】在Vue中使用Cesium（两种方法）

相关内容

热门资讯