近期在研究集成封装Cesium为Vue.js组件，记录一下过程，防止忘了。
安装环境
- node.js: v8.9.4
- npm: 5.6.0
- vue: 2.5.2
- cesium: 1.45.0
- vue-cli: 2.9.3
- webpack: 3.6.0
注意此处vue-cli版本是2，因此该教程不适用vue-cli 3。如需在Vue-cli 3中构建Cesium，请参考Vue-cli 3.0 + cesium 构建.
安装配置
- 安装nodejs
- 安装vue-cli脚手架
1
2
3
4
5npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev - 安装cesium
1
npm install --save cesium
- webpack配置
在build/webpack.base.conf.js文件中做如下修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36//定义cesium源代码位置
const cesiumSource = '../node_modules/cesium/Source'
...
module.exports = {
...
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath,
// Needed to compile multiline strings in Cesium
sourcePrefix: ''
},
amd:{
// Enable webpack-friendly use of require in Cesium
toUrlUndefined: true
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
//设置cesium的别名
'cesium': path.resolve(__dirname, cesiumSource)
}
},
module: {
rules: [
...
],
//不让Webpack打印载入特定库时候的警告
unknownContextCritical: false
},
...
}在build/webpack.dev.conf.js文件中做如下修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16//定义 Cesium 源代码路径，前面没有../
const cesiumSource = 'node_modules/cesium/Source'
//定义 Cesium Workers 路径
const cesiumWorkers = '../Build/Cesium/Workers'
...
plugins: [
...
new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('')
})
...
]在build/webpack.prod.conf.js文件中做如下修改
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16//定义 Cesium 源代码路径，前面没有../
const cesiumSource = 'node_modules/cesium/Source'
//定义 Cesium Workers 路径
const cesiumWorkers = '../Build/Cesium/Workers'
...
plugins: [
...
new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
new webpack.DefinePlugin({
//定义 Cesium 从哪里加载资源，如果使用默认的''，却变成了绝对路径了，所以这里使用'./',使用相对路径
CESIUM_BASE_URL: JSON.stringify('./')
})
...
]
Vue.js组件编写
- 在src/components下新建 CesiumViewer.vue vue组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<template>
<div id="cesiumContainer">
</div>
</template>
<script type="text/javascript">
import Cesium from 'cesium/Cesium'
import widgets from 'cesium/Widgets/widgets.css'
export default {
name: 'CesiumViewer',
mounted () {
var viewer = new Cesium.Viewer('cesiumContainer')
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style> - 创建全局样式文件src/styles/index.scss，做如下修改
1
2
3
4
5
6
7
8html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
} - 在src/main.js中做如下修改
1
import '@/styles/index.scss' // global css
参考链接
- 基于webpack 构建Cesium + Vue 的应用, by QingMings
- Vue-cli 3.0 + cesium 构建,by QingMings.
- cesium-and-webpack, by cesiumjs.org
- vue-cli生成的项目，main.js引入scss时报错,by segmentfault.