使用vue 2.x配合cesiumJS构建一个三维webgis项目demo
cnpm是淘宝的完整npmjs.org的景象,因为服务器在**,所有下载包的速度比npm快得多,可以使用cnpm代替官方版本,目前的更新频率为10分钟,以保证尽量与官方服务器同步。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
也可以使用yarn
代替,速度也比npm官方快很多
全局安装vue/cli和vue/cli-init
$ cnpm install -g @vue/cli
$ cnpm install -g @vue/cli-init
当前的vue-cli不带init部分,所以要使用其init
命令,需要另外下载@vue/cli-init
包
我们选用webpack模板进行创建,命令如下
$ vue init <template-name> <project-name>
其中<template-name>
是使用的模板,我们键入webpack
,<project-name>
即为项目名
之后根据提示选择需要的配置,安装成功后便可以输入cd <project-name>
进入项目文件夹
在当前项目的文件夹根目录,通过cnpm下载cesium
$ cnpm install --save cesium
--save
命令是将当前安装的包同事写入package.json
文件中
下载完成后便可以在node_modules
文件夹中找到cesium
文件夹
在vue中使用Cesium还需要对Webpack进行一些配置,这样才能正常打包Cesium的代码,否则将无法使用Cesium
在工程目录的build/webpack.base.conf.js
文件中,我们添加一下配置
- 在头部定义
cesiumSource
路径字符串,路径就为node_modules中的cesium/Source,即const cesiumSource = 'node_modules/cesium/Source'
,然后在resolve.alias
中将cesium目录添加进去
const cesiumSource = 'node_modules/cesium/Source'
...
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'cesium': resolve(cesiumSource)
}
}
- 在
module.exports
中的output
中,我们添加sourcePrefix: ' '
,这样可以webpack正确处理多行字符串
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath,
sourcePrefix: ' '
}
- 在
module
对象中添加unknownContextCritical: false
,让webpack打印载入特定库时候的警告 - 在
module
对象中添加unknowContextRegExp: /^.\/.*$/
,为了解决错误Error: Cannot find module "."
的错误
rules: [
...
],
unknownContextRegExp: /^.\/.*$/,
unknownContextCritical: false
在build/webpack.dev.conf.js
和build/webpack.prod.conf.js
中,修改步骤如下:
- 首先定义source和worker的地址
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
- 在
plugins
中的webpack.DefinePlugin
对象中添加cesium的baseURL
new webpack.DefinePlugin({
'process.env': require('../config/dev.env'),
CESIUM_BASE_URL: JSON.stringify('')
})
- 同样,在
plugins
中新添加三个插件,用于复制cesium所需的文件
new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers'}]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets'}]),
new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets'}]),
webpack配置完成后,便可以编写组件了。
- 在
src/components
目录中新建一个cesiumViewer.vue
文件,内容只需要写盛放cesium三维地球的容器
<template>
<div id="cesiumContainer"></div>
</template>
- 在
App.vue
中,引入cesiumViewer.vue
组件,并定义样式
<template>
<div id="app">
<cesium-viewer></cesium-viewer>
</div>
</template>
<script>
import cesiumViewer from './components/cesiumViewer.vue'
export default {
name: 'App',
components: {
cesiumViewer
}
}
</script>
<style>
html, body, #cesiumContainer {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height: 100%;
width: 100%;
}
</style>
- 在
main.js
中,引入cesium以及css文件,并在Vue对象mounted之后创建Viewer对象
import Vue from 'vue'
import App from './App'
import router from './router'
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
mounted(){
this.viewer = new Cesium.Viewer('cesiumContainer')
},
data: {
viewer: {}
}
})
以上工作完成后,回到项目根目录,执行npm run dev
,进入localhost:8080
,若出现了三维地球,则表示可以正常工作了
执行npm run build
,会自动生成一个dist文件夹,里面包含了html文件、css文件和js文件,可以将这些文件部署到服务器上,供外网访问