1.安装node.js和vue/cli
2.安装cesium
cesium是一个开源的世界级三维地理JavaScript库，它具有性能优异、精度高、可视化效果好和容易上手等特点，来自航空、智慧城市和无人机等各行业的开发者都在使用cesium来创建可交互的互联网应用，分享动态的地理数据
npm install --save cesium --registry=https://registry.npm.taobao.org
3.安装vs code和vs code插件
安装VS Code插件：ESLint、Prettier - Code formatter、Vetur、Path Intellisense
4.vscode打开上一篇文章(https://developer.aliyun.com/article/765620)创建的test项目文件夹
**5.在test项目根目录创建vue.config.js.输入以下内容并保存为vue.config.js
module.exports = {
configureWebpack: {
module: {
unknownContextCritical: false
}
},
chainWebpack: config => {
config
.plugin('define').tap(args => {
args[0].CESIUM_BASE_URL = JSON.stringify('./')
return args
})
}
}
6.在test项目的src文件夹下修改App.vue.内容如下
<template>
<div id="app">
<CesiumViewer />
</div>
</template>
<script>
import CesiumViewer from './components/CesiumViewer.vue'
export default {
name: 'App',
components: {
CesiumViewer
}
}
</script>
<style>
</style>
7.在components下新建CesiumViewer.vue
<template>
<div id="cesiumContainer"></div>
</template>
<script>
import { Viewer } from 'cesium/Source/Cesium'
import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl'
import 'cesium/Source/Widgets/widgets.css'
export default {
name: 'CesiumViewer',
mounted: function () {
buildModuleUrl.setBaseUrl('static/')
this.viewer = new Viewer('cesiumContainer')
},
data () {
return {
viewer: {}
}
}
}
</script>
<style scoped>
</style>
8.运行项目(原文图形界面可以显示地球.我运行时无法显示地球)
vs code下npm run serve
