vue项目引用cesium

1. 安装cesium

npm install cesium --save-dev

2. 在main.js文件中引入cesium

import Vue from 'vue'
import App from './App.vue'
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'

Vue.config.productionTip = false

Vue.prototype.Cesium = Cesium

new Vue({
  render: h => h(App),
}).$mount('#app')

3. 在组件中使用

<template>
  <div id="cesiumContainer"></div>
</template>

<script>
export default {
  mounted () {
    this.viewer = new this.Cesium.Viewer('cesiumContainer')
  }
}
</script>

<style>
#cesiumContainer {
  height: 500px;
}
</style>

注意：由于cesium使用了ES6模块，因此需要在webpack.config.js文件中配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          /cesium/,
        ],
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                modules: false,
              },
            ],
          ],
          plugins: [
            '@babel/plugin-transform-runtime',
          ],
        },
      },
    ],
  },
};