vue中使用cesium

1、npm   install  cesium

2、build / webpack.base.conf.js文件下做如下更改：

const cesiumSource = '../node_modules/cesium/Source'
　
output: {

　　...

　　 sourcePrefix: ''　　

　},

amd: {

　　toUrlUndefined: true

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

　　module: {

　　　　...

　　　　 unknownContextCritical: false

　　}

3、build / webpack.dev.conf.js文件下做如下更改：

const cesiumSource = 'node_modules/cesium/Source'
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 CopyWebpackPlugin([
      {
        from: path.join(cesiumSource, 'ThirdParty/Workers'),
        to: 'ThirdParty/Workers'
      }
    ]),
    new webpack.DefinePlugin({
      CESIUM_BASE_URL: JSON.stringify('')
    }),
    new CopyWebpackPlugin([ { from: path.join('./static', 'model'), to: 'model3D'}])，
   ....... 
  ]

4、build / webpack.prod.conf.js文件下做如下更改：

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

plugins添加：

    /* cesium */
    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 從哪里加載資源，如果使用默認的''，卻變成了絕對路徑了，所以這里使用'./',使用相對路徑
      CESIUM_BASE_URL: JSON.stringify('./')
    })

5、需要渲染cesium的頁面

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

mounted () {
    this.viewer = new Cesium.Viewer('cesiumContainer', {
      shouldAnimate: true,
      animation: false, // 是否創建動畫小器件，左下角儀表
      baseLayerPicker: false, // 是否顯示圖層選擇器
      fullscreenButton: false, // 是否顯示全屏按鈕
      geocoder: false, // 是否顯示geocoder小器件，右上角查詢按鈕
      homeButton: false, // 是否顯示Home按鈕
      infoBox: false, // 是否顯示信息框
      sceneModePicker: false, // 是否顯示3D/2D選擇器
      selectionIndicator: false, // 是否顯示選取指示器組件
      timeline: false, // 是否顯示時間軸
      navigationHelpButton: false, // 是否顯示右上角的幫助按鈕
      scene3DOnly: false, // 如果設置為true，則所有幾何圖形以3D模式繪制以節約GPU資源
      clock: new Cesium.Clock(), // 用於控制當前時間的時鍾對象
      selectedImageryProviderViewModel: undefined, // 當前圖像圖層的顯示模型，僅baseLayerPicker設為true有意義
      imageryProviderViewModels: Cesium.createDefaultImageryProviderViewModels(), // 可供BaseLayerPicker選擇的圖像圖層ProviderViewModel數組
      selectedTerrainProviderViewModel: undefined, // 當前地形圖層的顯示模型，僅baseLayerPicker設為true有意義
      terrainProviderViewModels: Cesium.createDefaultTerrainProviderViewModels(), // 可供BaseLayerPicker選擇的地形圖層ProviderViewModel數組
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali'
      }),
      fullscreenElement: document.body, // 全屏時渲染的HTML元素,
      useDefaultRenderLoop: true, // 如果需要控制渲染循環，則設為true
      targetFrameRate: undefined, // 使用默認render loop時的幀率
      showRenderLoopErrors: false, // 如果設為true，將在一個HTML面板中顯示錯誤信息
      automaticallyTrackDataSourceClocks: true, // 自動追蹤最近添加的數據源的時鍾設置
      contextOptions: undefined, // 傳遞給Scene對象的上下文參數（scene.options）
      sceneMode: Cesium.SceneMode.SCENE3D, // 初始場景模式為三維
      mapProjection: new Cesium.WebMercatorProjection(), // 地圖投影體系
      dataSources: new Cesium.DataSourceCollection()
      // 需要進行可視化的數據源的集合
    })
    this.viewer.imageryLayers.get(0).brightness = 0.88
    this.viewer.imageryLayers.get(0).contrast = 0.94
    this.viewer.imageryLayers.get(0).hue = 0.48
    this.viewer.imageryLayers.get(0).saturation = 1.4
    this.viewer.imageryLayers.get(0).gamma = 0.46

    this.viewer._cesiumWidget._creditContainer.style.display = 'none'

    this.viewer.scene.postProcessStages.fxaa.enabled = false
    /* 設置相機最小高度 */
    this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 2000
    /* 設置相機最大高度 */
    this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 14023
}