vue2中引入cesium相关配置

1.使用vue-cli创建项目

vue create xxxx
创建项目基础目录

2.安装cesuim依赖

这里使用了cesium1.77.xx版本
cnpm i --save-dev cesum@1.77

3.修改vue.config.js文件

vue-cli是基于webpack创建的脚手架工具，因此基本修改都给予configuerWebpack参数上修改
安装wepack以及copy-webpack-plugin依赖
cnpm i --save webpack
cnpm i --save copy-webpack-plugin

1. 安装webpack主要是为了使用definePlugin来对CESIUM_BASE_URL进行全局定义，设置相关cesium资源路径。
2. 安装copy-webpack-plugin将cesium中的相关依赖文件复制到相应的构件目录下
   另外
3. 另外需要引用cesium中的css样式文件，这里配置resolve的alias，给相关路径配置别名方便引入。
   具体配置如下：

module.exports = defineConfig({
  publicPath: './',
  transpileDependencies: true,
  productionSourceMap: true,
  configureWebpack: {
    resolve: {
      alias: {
        'cesiumCss': path.resolve(__dirname, 'node_modules/cesium/Build/Cesium/Widgets/widgets.css')
      },
    },
    plugins: [
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('')
      }),
      new copyWebpackPlugin({
        patterns:[
          { from: path.resolve('./node_modules/cesium/Source', 'Assets') , to: 'Assets' },
          { from: path.resolve('./node_modules/cesium/Source', 'Widgets') , to: 'Widgets' },
        ]
      })
    ]
  }
})

main.js中引入css样式
import 'cesiumCss';

封装cesium
这里创建vue组件不再赘述。
创建一个js文件用来封装cesium类，具体如下：

import * as Cesium from 'cesium'
Cesium.Ion.defaultAccessToken = 'xxx' //引入自己的token 具体需要去cesium官网申请
class CesiumContainer {
    constructor() {
        this.viewer = null;
    }
}

Object.assign(CesiumContainer.prototype, {
    init() {
        this.viewer = Cesium.Viewer('cesium-viewer')
    }
})

export default CesiumContainer

使用vue组件引入该js文件查看引入的cesium效果。