Vue+CesiumJS学习1在Vue使用Cesium两种方法

在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文件

1.  
   <link rel="stylesheet" href="https://blog.csdn.net/yuelizhe4774/article/details/Cesium/Widgets/widgets.css">
2.  
   <script src="https://blog.csdn.net/yuelizhe4774/article/details/Cesium/Cesium.js"></script>

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

1.  
   <template>
2.  
   <div id="cesiumContainer" style="width: 100%; height: 100%;"></div>
3.  
   </template>
4.  
    
5.  
   <script>
6.  
   export default{
7.  
   name:'cesium',
8.  
   mounted(){
9.  
   Cesium.Ion.defaultAccessToken = 'your token';
10.  
    const viewer = new Cesium.Viewer('cesiumContainer');
11.  
    console.log(viewer)
12.  
    }
13.  
    }
14.  
    </script>

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

1.  
   <template>
2.  
   <div id="app">
3.  
   <img alt="Vue logo" src="./assets/logo.png">
4.  
   <Cesium/>
5.  
   <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
6.  
   </div>
7.  
   </template>
8.  
    
9.  
   <script>
10.  
    // import HelloWorld from './components/HelloWorld.vue'
11.  
    import Cesium from './components/cesiumtest.vue'
12.  
    export default {
13.  
    name: 'App',
14.  
    components: {
15.  
    Cesium
16.  
    // HelloWorld
17.  
    }
18.  
    }
19.  
    </script>

Step 6：注意事项

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

1.  
   "globals":{
2.  
       "Cesium":true   
3.  
   }

结果展示

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

Step 1：下载vue-cesium

npm install vue-cesium

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

npm install vue-cesium@2.1.6

Step 2：在main.js中引入

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

Step 3：组件中加载

1.  
   <template>
2.  
   <div class="viewer">
3.  
   <vc-viewer>
4.  
   <vc-layer-imagery></vc-layer-imagery>
5.  
   </vc-viewer>
6.  
   </div>
7.  
   </template>
8.  
    
9.  
   <script>
10.  
    export default {
11.  
    name: 'HelloWorld',
12.  
    props: {
13.  
    msg: String
14.  
    }
15.  
    }
16.  
    </script>
17.  
     
18.  
    <style>
19.  
    .viewer {
20.  
    width: 100%;
21.  
    height: 400px;
22.  
    }
23.  
    </style>

运行结果

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

Vue-Cesium