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脚手架

   npm install -g vue-cli
   vue init webpack my-project
   cd my-project
   npm install
   npm run dev

3. 安装cesium

   npm install --save cesium

4. webpack配置

• 在build/webpack.base.conf.js文件中做如下修改

  //定义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文件中做如下修改

  //定义 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文件中做如下修改

  //定义 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组件

  <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，做如下修改

  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

• 在src/main.js中做如下修改

  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.