vue框架集成cesium介紹（windows環境）

cesium是一個用來展現三維地球和二三維地圖的開源js庫，不須要安裝任何插件，是一個純前端項目，可是瀏覽器要支持webgl規範。javascript

本項目是在vue工程化項目上集成cesium，過程當中有些坑，這裏總結成文章，歡迎留言分享。css

本項目開發環境依賴node npm vue vue-cli webpack cesium等工具；html

一、先使用node安裝vue-cli前端

經過cmd進入項目文件夾，並在該路徑下輸入：npm install -g vue-clivue

命令執行完後輸入：vue -V 查看版本號，肯定安裝成功；java

二、建立webpack 模板項目node

退到項目文件夾上一級（cmd命令：cd..），使用vue-cli腳手架 webpack

vue init webpack cesiumvuegit

其中cesiumvue 是項目名稱；es6

後面的項目配置，按需選擇；

配置好以後,npm會安裝依賴，依賴安裝須要一點時間，安裝好了以後用cmd命令進入項目文件夾：cd cesiumvue

最後輸入npm run dev就能夠跑起項目了

三、安裝cesium依賴包

在cesiumvue項目文件夾下輸入命令安裝依賴npm install cesium --save

四、配置項目文件

（1）配置cesium全局基礎配置

在build 文件夾，編輯webpack.base.conf.js

增長變量cesiumSource，表示cesium源碼路徑；

const path = require('path')const utils = require('./utils')const config = require('../config')const vueLoaderConfig = require('./vue-loader.conf')const cesiumSource = '…/node_modules/cesium/Source’function resolve (dir) { return path.join(__dirname, '..', dir)}

在output 里加入sourcePrefix: ’ ’ 讓webpack 正確處理多行字符串；

而後配置 amd參數；

output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, sourcePrefix: ' ' }, amd: {  // Enable webpack-friendly use of require in Cesium toUrlUndefined: true },

在resolve 中定義別名 ‘cesium’: path.resolve(__dirname, cesiumSource)
定義別名cesium後，cesium就能夠表明cesiumSource的文件路徑。

resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'cesium': path.resolve(__dirname, cesiumSource), } },

在module 中加入 unknownContextCritical: false, 屏蔽webpack 打印載入特定庫時候的警告：

module: { rules: [...], unknownContextCritical: false, //屏蔽警告}

（2）配置cesium開發環境

進入build文件夾，編輯 webpack.dev.conf.js文件

定義Cesium 源碼路徑

const cesiumSource = ‘node_modules/cesium/Source’

定義 Cesium Workers 路徑：

const cesiumWorkers = ‘../Build/Cesium/Workers’，

const cesiumSource = 'node_modules/cesium/Source'; const cesiumWorkers = '../Build/Cesium/Workers';

注意不要寫錯，這裏的cesiumSource是沒有../的

在plugins節點下代碼對照如下輸入新增內容

new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]), //flag new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]), new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]), new webpack.DefinePlugin({ 'process.env': require('../config/dev.env'), 'CESIUM_BASE_URL': JSON.stringify('')  }),

（3）配置cesium生產環境

進入 build 文件夾，編輯webpack.prod.conf.js文件

定義Cesium 源碼路徑

const cesiumSource = ‘node_modules/cesium/Source’

定義 Cesium Workers 路徑：

const cesiumWorkers = ‘../Build/Cesium/Workers’，

const cesiumSource = 'node_modules/cesium/Source'; const cesiumWorkers = '../Build/Cesium/Workers';

注意不要寫錯，這裏的cesiumSource是沒有../的

在plugins 中對照如下代碼加入新增內容,拷貝靜態資源注意這裏的CESIUM_BASE_URL: JSON.stringify(’./’)與dev 配置的不一樣，這是cesiumvue項目打包後加載靜態資源的路徑，配置爲相對路徑。

new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]), //flag new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]), new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]), // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ 'process.env': env, 'CESIUM_BASE_URL': JSON.stringify('./') }),

（4）配置config/index.js文件

進入config文件夾，打開index.js文件，將build下的assetsPublicPath

設置爲''，這樣就會使用相對路徑；

五、在項目中引用cesium

首先在main.js文件下進行全局引用

var Cesium = require ('cesium/Cesium')import '../node_modules/cesium/Build/Cesium/Widgets/widgets.css'

注意因爲cesium源碼是用的是amd規範，不是es6，因此引用全局別名cesium時要用require,用import會找不到依賴而報錯。

接下來就上手寫一個組件初始化3D地球了

默認會有一個helloworld組件，直接刪掉，增長一個cesiumView組件；

<template> <div id="cesiumContainer"></div></template>
<script>export default { name: 'cesiumView', mounted () { this.Cesium.Ion.defaultAccessToken = '申請許可證編號'
 window.eathviewer = new this.Cesium.Viewer('cesiumContainer', { projectionPicker: false, // 投影圖選擇按鈕 homeButton: false, // 主視圖按鈕 animation: false, // 動畫控制開關 baseLayerPicker: false, // 基礎地圖選擇按鈕 fullscreenButton: false, // 全屏按鈕 vrButton: false, // vr按鈕 timeline: false, // 時間軸 infoBox: false, // 地圖提示信息 sceneModePicker: false, // 視圖選擇方式 selectionIndicator: true, navigationHelpButton: false, // 幫助按鈕 geocoder: false // 搜索框 }) // 隱藏版權信息 window.eathviewer._cesiumWidget._creditContainer.style.display = 'none' }}</script>

以上是具體代碼，我已經給了一個淨化的初始版本。

在src/router文件夾下index.js文件默認的路由修改成cesiumView，就能夠跑起來了

若是樣式有問題，能夠配置一個全局樣式文件進行控制，這裏提一下

html, body ,#cesiumContainer{ display: block; margin: 0; width: 100%; height: 100%;}

cesiumContainer的樣式須要進行控制，保證3D地球是全局展現。

本文分享自微信公衆號 - 字節逆旅（wvivw_007）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。