vue+cesium：从0到1部署开发运行环境

刺骨的言语ヽ痛彻心扉 2024-04-07 14:05 14阅读 0赞

本系列教程是在vue2.X的基础上加载cesium程序，来开发各种示例程序。

## 安装顺序 ##

### 1，下载安装nodejs![0ae7d874225efd6778be2547803261c8.png][] ###

下载地址：https://nodejs.org/en/download/ 根据用户自己的机器情况进行选择不同版本的软件下载。 本教程示例采用是是windows 64位系统软件。  
**安装过程很简单，一路下一步。更为详细的请参考：http://www.openlayers-cesium.com/2021/0929744.html  
安装成功，测试安装是否成功，运行CMD，分别输入node -v** 和 **npm -v** 分别查看node和npm的版本号。![464e12b57296d52eeb903664e228d8ab.png][]  
可以查到，表示安装成功。

### 2，安装vue-cli ###

安装可以参考：https://cli.vuejs.org/zh/guide/installation.html  
**安装命令：**

> npm install -g @vue/cli  
> 或者 yarn global add @vue/cli （尽量不用这种方式，yarn不会自己配置环境变量，运行vue -V会提示错误）

![92490b65fbffd6ef33c5e71fa6417182.png][]  
安装完后，可以通过 **vue -V**或者 **vue --version** 查看当前 vue-cli的版本号。

### 3，创建vue-cesium项目。 ###

在系统中找一个文件夹，如d:/demos中，打开cmd窗口，使用 **vue create vue-cesium** 来创建基础项目  
![cc59d112a2ec9ae171b1850bde4cb8e5.png][]  
在项目中选择了 vue-router和vuex，方便以后的路由和组件数据传递使用方便。

### 4，安装部署cesium ###

下载cesium1.7.8 到本地 https://cesium.com/cesiumjs/  
![7d67891dc23db784dc3db0f7145cc427.png][]  
将Build文件夹中的Cesium文件夹放在VUE项目public文件夹下  
\#\#5，配置public/index.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>

### 6，安装element UI （选装） ###

为了在项目中操作方便，我们直接引用elementUI组件，方便添加一些按钮，弹窗等。  
进入到vue-openlayers文件夹中， 打开cmd窗口，使用 **npm i element-ui -S** 来安装elementUI组件  
在src/main.js中添加

import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);

![eba70e2e60a4feb68bf378892b4a1a0b.png][]

打开**src/views/Home.vue**,替换为以下代码：

<template> 
      <div class="about"> 
        <div id="cesiumContainer"></div> 
      </div> 
    </template> 
    <script> 
        export default{ 
            mounted(){ 
                Cesium.Ion.defaultAccessToken = '您的token'; 
                var viewer=new Cesium.Viewer('cesiumContainer') 
            } 
        }    
    </script>

进入到vue-cesium文件夹中， 打开cmd窗口，执行命令：  
**npm run serve**  
浏览器打开http://localhost:8080，就能显示我们的第一个示例。

[0ae7d874225efd6778be2547803261c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/fd95c5ba60514afdb40cab2bb9637359.png
[464e12b57296d52eeb903664e228d8ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3b64eb9f32b7403e802dbb8a99d23347.png
[92490b65fbffd6ef33c5e71fa6417182.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5c23d24c434d4077b59cd7e8058684d8.png
[cc59d112a2ec9ae171b1850bde4cb8e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c9d0b6f2a88d47a4aa874b7099ad6da6.png
[7d67891dc23db784dc3db0f7145cc427.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d4ccdf1936804a6bbca64428ea58aabe.png
[eba70e2e60a4feb68bf378892b4a1a0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7f423efe1d324635bc2634f3b0f469b2.png