vue+cesium 创建及显示

首先创建vue项目

vue create 你的项目名

然后引入cesium

npm i cesium --save

继续安装上loader

npm install @open-wc/webpack-import-meta-loader --save-dev

创建一个vue.config.js 修改里面配置

const path = require("path");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const cesiumSource = './node_modules/cesium/Source'
 
function resolve(dir) {
  return path.join(__dirname, dir);
}
 
module.exports = {

  configureWebpack: {
    output: {
      sourcePrefix: ' '
    },
    amd: { 
      toUrlUndefined: true
    },
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        // 'components': path.resolve('src/components'),
        // 'assets': path.resolve('src/assets'),
        // 'views': path.resolve('src/views'),
        'cesium': path.resolve(__dirname, cesiumSource)
      }
    },
    plugins: [
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), 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({ // 5
        CESIUM_BASE_URL: JSON.stringify('/')
      })
    ], 
    module: {
      rules: [
      {
        test: /\.js$/,
        use: {
          loader: '@open-wc/webpack-import-meta-loader',
        }
      },
    ]}
  }
};

 在main.js中添加代码

var cesium = require('cesium/Cesium.js');
var widgets = require('cesium//Widgets/widgets.css');
window.cesium = cesium
window.widgets = widgets

创建cesiumContainer.vue文件

<template>
  <div
    id="container"
    class="box"
  >
    <div id="cesiumContainer"></div>
  </div>
</template>
 
<script>
export default {
  name: 'cesiumContainer',
  data () {
    return {
    }
  },
  methods: {
    init () {
      const Cesium = window.cesium
      const viewer = new Cesium.Viewer('cesiumContainer');

      viewer._cesiumWidget._creditContainer.style.display = "none";// 隐藏版权
      viewer.animation.container.style.visibility = 'hidden' // 不显示动画控件
      viewer.timeline.container.style.visibility = 'hidden' // 不显示时间线控件

    }
  },
  mounted () {
    this.init()
  }
}
</script>
 
<style>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
}
</style>

最后启动项目就可以啦

npm run serve