Vue+Cesium集成笔记

安装环境
在学习过程中，参考以下学习博客
基于webpack 构建Cesium + Vue 的应用
主要使用了node npm vue vue-cli webpack cesium等工具和环境。
使用node安装vue-cli
cmd跳转到你想要放置开发项目的文件路径下，在该路径下运行cmd命令：
~$ npm install -g vue-cli
~$ vue -V //查看vue-cli的版本
使用vue-cli脚手架创建Webpack 模板项目
~$ vue init webpack vue-cesium
其中vue-cesium 是项目名称，自己可以随意命名；
之后是一系列项目的配置，按个人需要选择就好（一般配置为no，除vue-router可根据需要配置为yes）
接着npm将会自动安装下载模板和许多依赖项，等到下载完毕后， cd到你创建的项目文件中，本文是vue-cesium，命令如下所示：
~$ cd vue-cesium
~$ npm run dev
正常情况下在浏览器输入http://localhost:8080 就可以看到vue的界面了
npm安装Cesium 环境（cesium的配置步骤）
在vue-cesium文件路径中运行cmd命令，输入以下命令将cesium作为项目依赖项
npm install cesium --save
当cesium下载完毕后，再进行下面的文件配置工作
（1）配置webpack.base.conf.js文件
进入build 文件夹，编辑webpack.base.conf.js
定义 Cesium 源码路径const cesiumSource = '…/node_modules/cesium/Source’
在output 里加入sourcePrefix: ’ ’ 让webpack 正确处理多行字符串配置 amd参数,
如下图所示：

在resolve 中设置别名 ‘cesium’: path.resolve(__dirname, cesiumSource)
定义别名cesium后，cesium代表了cesiumSource的文件路径。

在module 中加入 unknownContextCritical: false, 让webpack 打印载入特定库时候警告：

（2）配置 webpack.dev.conf.js 文件
进入build文件夹，编辑 webpack.dev.conf.js文件
定义 Cesium 源码路径（注意这里的 node_modules 与webpack.base.conf.js的不同，前面没有 …/ ），
const cesiumSource = ‘node_modules/cesium/Source’
定义 Cesium Workers 路径：
const cesiumWorkers = ‘…/Build/Cesium/Workers’，

在plugin中加入下面插件,拷贝静态资源
（3）配置 webpack.prod.conf.js 文件
进入 build 文件夹，编辑webpack.prod.conf.js文件
定义 Cesium 源码路径（注意这里的 node_modules 与webpack.base.conf.js的不同，前面没有…/）
const cesiumSource = 'node_modules/cesium/Source’
定义 Cesium Workers 路径
const cesiumWorkers = '…/Build/Cesium/Workers’

在plugins 中加入下面插件,拷贝静态资源注意这里的CESIUM_BASE_URL: JSON.stringify(’./’)与dev 配置的不同，这是cesium 加载静态资源的路径，配置为相对路径。

（4）配置config/index.js文件
进入config 文件夹，配置index.js文件
这里有 dev 、build 两个配置项
配置 build 下的assetsPublicPath 为：’’，如图所示：

到此，webpack的相关设置完毕，现在我们可以创建vue组件进行cesium的开发工作了。
创建cesiumViewer组件
在components文件夹中创建cesiumViewer.vue组件，其具体代码为：

包括三部分：template模板部分，script行为部分和style样式部分。
修改src/router下的index.js 文件为：

修改 src 下的 App.vue 文件：

最后修改 src 下的 main.js：

（注释：其中Vue.prototype.Cesium = Cesium为设置全局变量，在以后所有的组件中，可以直接使用this.Cesium语句调用Cesium。比如在cesiumViewer.vue组件中，我们就使用了var viewer = new this.Cesium.viewer（“cesiumContainer”);进行cesium的初始化工作。）