基于Vue搭建Cesium环境

基于Vue搭建Cesium环境

1、利用脚手架创建一个vue项目

vue create my-test // my-test 是项目名称

2、安装vue-cli-plugin-cesium 插件

npm install --save-dev vue-cli-plugin-cesium

3、安装完成后，使用vue invoke 来初始化这个插件

vue invoke vue-cli-plugin-cesium
//vue invoke 来初始化时会有三个询问
// 1、Please choose a version of 'cesium' from this list 请在列表中选择 cesium 的版本
//2、whether to import styles globally. This operation will automatically import widgets.css in main.js是否全局引入样式,该操作将自动在main.js引入widgets.css?
//3、whether to add sample components to the project components directory是否添加示例组件到项目components目录?

4、项目中全局配置main.js中

import Cesium from '../node_modules/cesium/Build/Cesium/Cesium.js'
import 'cesium/Widgets/widgets.css'
 
Vue.prototype.Cesium=Cesium;

5、页面中调用

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

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {}
  },
  mounted () {
     const viewer = new this.Cesium.viewer('cesiumContainer')
     console.log('viewer:', viewer)
  }
}
</script>

<style lang="scss" scoped>

#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

6、效果如图所示