在vue中使用cesium

1.下载cesium包

npm install cesium --save

2.main.js 引入

var Cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');
Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

3.vue.config.js 修改配置

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

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

module.exports = {
  // 基本路径  3.6之前的版本时 baseUrl
  publicPath: "./",
  // 输出文件目录
  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,
  // webpack-dev-server 相关配置
  devServer: {
    open: process.platform === "darwin",
    host: "0.0.0.0",
    port: 5000,
    https: false,
    hotOnly: false
  },
  configureWebpack: {
    output: {
      sourcePrefix: ' '
    },
    amd: {
      toUrlUndefined: true
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'cesium': path.resolve(__dirname, cesiumSource)
      }
    },
    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('./')
      })
    ],
    module: {
      unknownContextCritical: /^.\/.*$/,
      unknownContextCritical: false
    }
  }
};

4. 创建cesium组件：

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>

export default {
  name: 'cesiumPage',
  data () {
    return {
    }
  },
  mounted(){
    var Cesium = this.Cesium;
    var cesiumContainer = document.getElementById("cesiumContainer");
    var viewer = new Cesium.Viewer(cesiumContainer,{
     animation: false, //动画控制不显示
      baseLayerPicker: false, //底图背景选择框
      geocoder: false, //右上角查找放大镜
      timeline: false, //时间线不显示
      sceneModePicker: false, //二维三维投影方式显示
      navigationHelpButton: false, //取消右上角的问号
      homeButton: false, //首页按钮
      sceneMode: Cesium.SceneMode.SCENE3D, //2D、3D模式： SCENE2D |MORPHING   });
      // 加载地图
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
         url: "http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}",
      }),
    });
    //去除 版权图标
    this.viewer._cesiumWidget._creditContainer.style.display="none";
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
} 
</style>

5.在页面中引入

<template>
  <div id="app">
    <cesiumPage></cesiumPage>
  </div>
</template>

<script>
import cesiumPage from "./components/CesiumScene.vue";

export default {
  name: "App",
  components: {
    cesiumPage
  },
};
</script>