最近被问到如何在 vuejs 中集成 cesium，首先想到的官网应该有教程。官网有专门讲 Cesium and Webpack（有坑），按照官网的说明，动手建了一个Demo，在这记录下踩坑过程。
一、vue 工程创建，使用 vue-cli
vue init webpack cesium-demo
二、cesium 安装
npm install cesium --save
三、webpack 配置
1、build/webpack.base.conf.js 文件中添加 Cesium module name
resolve: {
alias: {
// Cesium module name
cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
}
},
2、build/webpack.dev.conf.js 文件中添加 static files 管理
plugins: [
...
// Copy Cesium Assets, Widgets, and Workers to a static directory
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('')
})
],
四、Hello World!
App.vue 中输入以下代码
<template>
<div id="app">
<div id="cesiumContainer"></div>
</div>
</template> <script>
import Cesium from 'cesium/Cesium'
import '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>
五、运行
npm run dev
根据官网的说明，浏览器运行结果如下
。。。
最后在 github上找到这个问题的解决方法，
在 build/webpack.base.conf.js 文件中添加如下二行
module: {
unknownContextCritical: false,
unknownContextRegExp: /^.\/.*$/,
...
}
重新运行
运行成功，不过界面底部有一个 access token 的提示，去官网上申请一个 access token ，在 new Cesium.Viewer 前添加 一行代码
Cesium.Ion.defaultAccessToken = ‘your_access_token’
放一张最终效果图