之前记录了在Vue-Cli 2的基础上集成了Cesium,但现在Vue-Cli已更新到3,之前方法已不适用。在参考Vue-cli 3.0 + cesium 构建的基础上,验证记录Vue-Cli 3脚手架工具中集成Cesium的过程。
安装环境
- node.js: v10.16.0
- npm: 6.9.0
- vue: 2.6.10
- cesium: 1.45.0
- vue-cli: 3.9.2
- webpack: 4.28.4
安装配置
安装nodejs
安装vue-cli脚手架
1 | npm install -g @vue/cli |
- 安装 cesium
1 | npm i cesium --save |
- 新建 vue.config.js 文件,配置内容如下:
1 | const CopyWebpackPlugin = require('copy-webpack-plugin') |
- 在 src/components 下新建 CesiumViewer.vue 文件,内容如下:
1 | <template> |
- 修改 router.js ,引入 CesiumViewer组件,内容如下:
1 | import Vue from 'vue' |
- 修改App.vue ,内容如下:
1 | <template> |
- 最后修改 main.js 内容如下:
1 | import Vue from 'vue' |
- 最后 npm serve ,打开浏览器输入localhost:8080查看效果。
注意事项
不应将viewer定义在vue组件的data对象中,因为vue会劫持数据,导致cesium卡顿。具体请参考vue+cesium cesium数据量太大导致浏览器卡顿解决办法。
参考链接
- Vue-cli 3.0 + cesium 构建,by QingMings.
- cesium-and-webpack,by marsgis.
- Vue.js集成Cesium,by jack huang.
- Cesium笔记 — Vue+Cesium开发环境搭建(基于Cesium1.69),by 芒果香蕉.
- vue+cesium cesium数据量太大导致浏览器卡顿解决办法,by 浮年似水.