vue+cesium环境搭建
一、基本环境安装
编辑器：webstorm
服务：node.js npm
CesiumJS: Cesium-v1.9.1
vue v2.9.6
二、vue项目搭建
1.创建项目
在准备存放项目的位置打开cmd
vue init webpack project_name // 若还未创建项目敲这行，用自己的项目名替代project_name
vue init webpack // 若已经建好了项目文件夹敲这行
2.启动项目
进入项目并安装工具，然后运行项目
cd project_name //进入项目
cnmp install // 安装所需依赖包/插件
npm run dev // 运行项目
3.下载安装Cesium
npm install cesium --save // 下载cesium依赖
三、Cesium环境配置
1.配置webpack.base.conf.js文件
用webstorm打开项目，在build/webpack.base.conf.js下
-
定义cesium源码路径
const cesiumSource = '../node_modules/cesium/Source' const cesiumWorker = '../Build/Cesium/Workers' -
在module.exports的output中，添加sourcePrefix:' '，让webpack能够正确处理多行字符串
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, sourcePrefix: '' // 新增行，修改输出bundle中每行的前缀为空字符 }, -
在output后添加amd模式支持
output:{...}, amd: { toUrlUndefined: true // 使webpack打包cesium } -
resolve中设置cesium别名，以便在引入时能够直接根据别名找到cesium包
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'cesium': path.resolve(__dirname, cesiumSource), } }, -
module里添加unknownContextCritical:false，让webpack打印载入特定库时候告警
module: { rules: [...], unknownContextCritical: false, },
2.配置webpack.dev.conf.js文件
-
配置路径
const cesiumSource = 'node_modules/cesium/Source' const cesiumWorkers = '../Build/Cesium/Workers' -
在plugins下面添加插件
plugins: [ ..., // Copy Cesium Assets, Widgets, and Workers to a static directory 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' }]), new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]), new webpack.DefinePlugin({ // Define relative base path in cesium for loading assets CESIUM_BASE_URL: JSON.stringify('') }) ]
3.配置webpack.prod.conf.js文件
-
配置路径
const cesiumSource = 'node_modules/cesium/Source' const cesiumWorkers = '../Build/Cesium/Workers' -
在plugins下面添加如下插件，拷贝静态资源。与dev配置略有不同
plugins: [ ..., // Copy Cesium Assets, Widgets, and Workers to a static directory 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' }]), new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]), new webpack.DefinePlugin({ // 定义Cesium从哪里加载资源，如果使用默认的''，却变成了绝对路径了，所以这里使用'./'，使用相对路径 CESIUM_BASE_URL: JSON.stringify('./') }) ]
4.修改config里的index.js文件
build中的assetsPublicPath:"./"
assetsSubDirectory: 'static',
assetsPublicPath: '',
5.引入cesium.js
把cesium 包（路径：\node_modules\cesium\Build\Cesium）拷贝到static文件夹中
然后在index.html 引入cesium.js包
<title>title</title>
<script src='./static/Cesium/Cesium.js'></script>
至此，环境修改结束了
四、调用Cesium
1.6版本以上的Cesium配置
const Cesium = require('cesium/Cesium')
import widgets from 'cesium/Widgets/widgets.css';
<script>
export default {
data () {...},
mounted(){
Cesium...
}
}
</script>
五、vue+cesium的helloworld
1.修改main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Cesium from 'cesium/Cesium'
import widgets from 'cesium/Widgets/widgets.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
踩坑注意
如果在新建项目时选择了eslint regular
为了通过编译，要将main.js中的代码改为
import Cesium from 'cesium/Cesium' // eslint-disable-line no-unused-vars
import widgets from 'cesium/Widgets/widgets.css' // eslint-disable-line no-unused-vars
2.修改App.vue
<template>
<div id="app">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
export default {
name: 'App',
mounted () {
const viewer = new Cesium.Viewer('cesiumContainer')
}
}
</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>
然后在终端npm run dev打开所给的地址（通常是localhost:8080）
就能看到初始化的3D地球页面啦！好耶！
初始化地球
- 当我们新建了一个Viewer后,默认的场景支持鼠标交互:
①按住鼠标左键拖拽 - 让相机在数字地球平面平移。
②按住鼠标右键拖拽 - 放缩相机。
③鼠标滚轮滑动 - 放缩相机。
④按住鼠标中键拖拽 - 在当前地球的屏幕中间点，旋转相机。
默认控件
来源：Cesium：地球初始设置_wx612dcbdbaa821的技术博客_51CTO博客
踩坑注意
'Cesium' is not defined no-undef
找不到Cesium，问题出在代码检查eslint中
在package.json中(旧版.eslintrc.js)找到eslintConfig
加入
"globals": {
"Cesium": true
}
再次运行，问题就解决了
