vue地图可视化 Cesium篇

最近被问到如何在 vuejs 中集成 cesium，首先想到的官网应该有教程。官网有专门讲 Cesium and Webpack（有坑），按照官网的说明，动手建了一个Demo，在这记录下踩坑过程。

环境如下： node: v10.13.0 npm: 6.4.1 vue-cli: 2.9.6

一、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 中输入以下代码

复制代码

五、运行

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’
复制代码

放一张最终效果图