cesium-vue环境配置

 

一、首先安装vue及脚手架vue-li环境

npm install -g @vue/cli-init

 

2、创建工程

vue init webpack cesium-len02 -y

 

3、cesium安装

npm install cesium --save

 

4、webpack配置

4.1 build/webpack.base.conf.js 文件中添加 Cesium module name

resolve: { 
　　alias: { 
　　　　cesium: path.resolve(__dirname, '../node_modules/cesium/Source') 
　　}
},

 

（必须配置如下信息，否则报错Error constructing CesiumWidget）

module: { 
　　unknownContextCritical: false, 
　　unknownContextRegExp: /^.\/.*$/, ... 
}

 

4.2 build/webpack.dev.conf.js 文件中添加 static files 管理

 

  plugins: [

　　  new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),
     new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),
     new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),
     new webpack.DefinePlugin({
         // Define relative base path in cesium for loading assets
         CESIUM_BASE_URL: JSON.stringify('')
     })
]

 

5、App.vue 中输入以下代码

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

<script>
import * as Cesium from 'cesium/Cesium'
import * as widget from 'cesium/Widgets/widgets.css'
export default {
  name: 'App',
  mounted () {
    this.$nextTick(() => {
      const viewer = new Cesium.Viewer('cesiumContainer')
      console.log('viewer: ', viewer)
    })
  }
}
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#app,#cesiumContainer {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

 

6.运行

npm run dev