1. 安装环境
在学习过程中,参考以下学习博客
基于webpack 构建Cesium + Vue 的应用
主要使用了node npm vue vue-cli webpack cesium等工具和环境。
2. 使用node安装vue-cli
cmd跳转到你想要放置开发项目的文件路径下,在该路径下运行cmd命令:
~$ npm install -g vue-cli
~$ vue -V //查看vue-cli的版本
3. 使用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的界面了
4. 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的开发工作了。
5.创建cesiumViewer组件
在components文件夹中创建cesiumViewer.vue组件,其具体代码为:
包括三部分:template模板部分,script行为部分和style样式部分。
修改src/router下的index.js 文件为:
修改 src 下的 App.vue 文件:
修改 src 下的 main.js:
以上所有工作完成后,运行npm run dev ,浏览器中输入localhost:8080,即可看到cesium运行界面。(8080为默认端口,你可根据需要在config/indecx.js文件中自定义所需要的端口号!)