vue項目Cesium配置詳解（適用於Cesium1.60以上版本）

1、Cesium環境配置

1.安裝Cesium

npm install cesium --save

2.在build/webpack.base.conf.js下

①定義cesium源碼路徑

const cesiumSource = '../node_modules/cesium/Source'

②在module.exports中，output添加sourcePrefix:' '，讓webpack正確處理多行字符串

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath,
    sourcePrefix: ' '
  },

 ③在output後面，添加amd模式支持

output: {...}，
amd: {
  toUrlUndefined: true},

④在resolve中設置cesium別名，引入的時候直接根據別名就能夠找到cesium包了

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {      'vue$': 'vue/dist/vue.esm.js',      '@': resolve('src'),      'cesium': path.resolve(__dirname, cesiumSource)
    }
  },

⑤module裏添加unknownContextCritical:false，讓webpack打印載入特定庫時候告警

module: {
   rules: [...],
   unknownContextCritical: false,   // unknownContextRegExp: /^.\/.*$/,   //這個不少都推薦了，可是實測的時候發現會報錯，先不用},

3.配置webpack.dev.conf.js

①配置路徑

const cesiumSource = 'node_modules/cesium/Source'const cesiumWorkers = '../Build/Cesium/Workers'

②在plugins下面添加以下插件

plugins: [
   ...,    // Copy Cesium Assets, Widgets, and Workers to a static directory
    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 CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),    new webpack.DefinePlugin({       // Define relative base path in cesium for loading assets
       CESIUM_BASE_URL: JSON.stringify('')
    })
  ]

4.配置webpack.prod.conf.js文件

①配置路徑

const cesiumSource = 'node_modules/cesium/Source'const cesiumWorkers = '../Build/Cesium/Workers'

②在plugins下面添加以下插件，拷貝靜態資源。與dev配置略有不一樣

plugins: [
   ...,    // Copy Cesium Assets, Widgets, and Workers to a static directory
    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 CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),    new webpack.DefinePlugin({       // 定義Cesium從哪裏加載資源，若是使用默認的''，卻變成了絕對路徑了，因此這裏使用'./'，使用相對路徑
       CESIUM_BASE_URL: JSON.stringify('./')
    })
  ]

5.修改config裏index.js文件，build中的assetsPublicPath:"./

assetsSubDirectory: 'static',
assetsPublicPath: '',

2、調用Cesium

一、全局配置 

在main.js中

import * as Cesium from 'cesium/Cesium'import * as widgets from 'cesium/Widgets/widgets.css'Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

在vue中使用時

      let Cesium = this.Cesium
      let viewer = new Cesium.Viewer(this.$refs.cesiumViewer, {
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        animation: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,        // creditContainer: "creditBar",
        skyBox: false,
        skyAtmosphere: false,
        timeline: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        allowDataSourcesToSuspendAnimation: false
      })

二、組件中使用

  import * as Cesium from 'cesium/Cesium'
  import * as widgets from 'cesium/Widgets/widgets.css'

  export default {
    name: 'HelloWorld',
    data () {      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted () {
      let viewer = new Cesium.Viewer(this.$refs.cesiumViewer, {
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        animation: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,        // creditContainer: "creditBar",
        skyBox: false,
        skyAtmosphere: false,
        timeline: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        allowDataSourcesToSuspendAnimation: false
      })
      window.viewer = viewer

    }
  }