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 中輸入以下程式碼

<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’
複製程式碼

放一張最終效果圖