前言
Cesium是什么？
Cesium是一个跨平台、跨浏览器的展示三维地球和地图的js库。
Cesium使用WebGL来进行硬件加速图形，使用时不需要任何的插件支持，但是浏览器必须支持WebGL。（webgl web graphic library 是一种3D绘图协议，他允许将js和opengl es 2.0结合在一起，）
Cesium是基于Apache2.0许可的开源软件。
Cesium能做什么？
1、支持2D、2.5D、3D形式的地图展示
2、可以绘制各种几何图形、高亮区域，支持导入图片，甚至3D模型等多种数据可视化展示
3、可用于动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和mobile。
4、cesium还支持基于时间轴的动态数据展示
正文
安装环境
1、安装node.js
2、安装vue-cli脚手架
3、创建webpack模版项目
vue init <template-name> <project-name>
vue init webpack cesium-vue
// router Y ESlink n tests n e2e n
npm run dev
4、安装Cesium环境
npm install cesium
Webpack配置
1、配置webpack.base.conf.js文件
1.1、在build/webpack.base.conf.js中定义cesium源码路径
Const cesiumSource = ‘../node_modules/cesium/Source’
1.2、在build/webpack.base.conf.js下的output中加入sourcePrefix: ' '，让webpack正确缩进多行字符串
1.3、配置amd参数
amd:{
toUrlUndefined: true
}
1.4、在resolve中设置别名'cesium': path.resolve(__dirname, cesiumSource)
1.5、在bulid/webpack.base.conf.js下的module中加入unkonwContextCritical:false，让webpack打印载入特定库时候的警告
1.6、在bulid/webpack.base.conf.js下的module中加入unknownContextRegExp: /^./.*$/，为了解除Error：cannot find module “.”的错误
2、配置webpacl.dev.conf.js文件
2.1、定义cesium源码/ Workers路径
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
2.2在plugins中加入下面插件，拷贝静态资源
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文件
3.1、定义cesium源码/ Workers路径
const cesiumSource = 'node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
3.2、在plugins中加入下面插件，拷贝静态资源
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 从哪里加载资源，如果使用默认的''，却变成了绝对路径了，所以这里使用'./',使用相对路径
CESIUM_BASE_URL: JSON.stringify('./')
}),
4、配置config/index.js文件
配置 build 下的assetsPublicPath 为''
assetsPublicPath: ''
编写Vue组件
1、在src/components下新建cesiumViewer.vue组件
<template>
<div id="cesiumContainer">
</div>
</template>
<script type="text/javascript">
export default {
name: 'cesiumViewer',
mounted() {
var viewer = new this.Cesium.Viewer('cesiumContainer')
}
}
</script>
<style>
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
2、修改src/router下的index.js 文件为
import Vue from 'vue'
import Router from 'vue-router'
import cesiumViewer from '@/components/cesiumViewer'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'cesiumViewer',
component: cesiumViewer
}
]
})
3、修改 src 下的 App.vue 文件
<template>
<div id="app">
<!--<img src="./assets/logo.png">-->
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/*margin-top: 60px;*/
}
</style>
4、修改 src 下的 main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'
Vue.prototype.Cesium = Cesium
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
})
