Vue.js集成Cesium

发表于 更新于 阅读次数：

近期在研究集成封装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 构建.

安装配置

  1. 安装nodejs
  2. 安装vue-cli脚手架
1
2
3
4
5
npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev
  1. 安装cesium
1
npm install --save cesium
  1. 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
37
//定义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
8
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
  • 在src/main.js中做如下修改
1
import '@/styles/index.scss' // global css

参考链接

  1. 基于webpack 构建Cesium + Vue 的应用, by QingMings
  2. Vue-cli 3.0 + cesium 构建,by QingMings.
  3. cesium-and-webpack, by cesiumjs.org
  4. vue-cli生成的项目，main.js引入scss时报错,by segmentfault.