Cesium Vue开发环境搭建

最近被问到如何在 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

1 resolve: {
2     alias: {
3         // cesium module name
4         cesium: path.resolve(__dirname, '../node_modules/cesium/source')
5     }
6 },

2、build/webpack.dev.conf.js 文件中添加 static files 管理

 1 plugins: [
 2         new htmlwebpackplugin({
 3             template: 'src/index.html'
 4         }),
 5         // copy cesium assets, widgets, and workers to a static directory
 6         new copywebpackplugin([ { from: path.join('node_modules/cesium/source', '../build/cesium/workers'), to: 'workers' } ]),
 7         new copywebpackplugin([ { from: path.join('node_modules/cesium/source', 'assets'), to: 'assets' } ]),
 8         new copywebpackplugin([ { from: path.join('node_modules/cesium/source', 'widgets'), to: 'widgets' } ]),
 9         new webpack.defineplugin({
10             // define relative base path in cesium for loading assets
11             cesium_base_url: json.stringify('')
12         })
13     ],

四、hello world!
app.vue 中输入以下代码

 1 <template>
 2   <div id="app">
 3     <div id="cesiumcontainer"></div>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 import cesium from 'cesium/cesium'
 9 import 'cesium/widgets/widgets.css'
10 export default {
11   name: 'app',
12   mounted () {
13     this.$nexttick(() => {
14       const viewer = new cesium.viewer('cesiumcontainer')
15       console.log('viewer: ', viewer)
16     })
17   }
18 }
19 </script>
20 <style>
21 html,
22 body {
23   width: 100%;
24   height: 100%;
25   padding: 0;
26   margin: 0;
27 }
28 #app,#cesiumcontainer {
29   font-family: "avenir", helvetica, arial, sans-serif;
30   width: 100%;
31   height: 100%;
32   overflow: hidden;
33 }
34 </style>

五、运行

npm run dev

根据官网的说明，浏览器运行结果如下

。。。

最后在 上找到这个问题的解决方法，
在 build/webpack.base.conf.js 文件中添加如下二行

module: {
    unknowncontextcritical: false,
    unknowncontextregexp: /^.\/.*$/,
    ...
}

重新运行

运行成功，不过界面底部有一个 access token 的提示，去官网上申请一个   ，在 new cesium.viewer 前添加 一行代码

cesium.ion.defaultaccesstoken = ‘your_access_token’

放一张最终效果图