VueCLI3.0乾貨系列之集成Cesium三維地球框架

最近項目中用到了VueCLI3.0和Cesium的集成，下面就將兩者的集成方法及遇到的問題介紹給大家，歡迎交流學習。

概念描述

VueCLI3.0是vue的腳手架工具，可快速搭建項目原型。

Cesium是三維地球和地圖的javascript庫，可以跨平臺跨瀏覽器使用。Cesium在前端三維展示上具有很多優勢，Cesium是運用webgl來進行圖形加速，它不依賴任何第三方插件，需要使用高版本的瀏覽器，自測高版本chrome對Cesium支持比較好。

安裝Cesium控件

由於運行Cesium需要加載相應的庫文件，所以需要首先安裝cesium控件，cmd進入項目文件夾位置，輸入

npm install cesium -s

配置參數 vue.config.js

const path = require("path");
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
 
let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {
 configureWebpack: {
 output: {
 sourcePrefix: ' '
 },
 amd: {
 toUrlUndefined: true
 },
 resolve: {
 alias: {
 'vue$': 'vue/dist/vue.esm.js',
 '@': path.resolve('src'),
 'cesium': path.resolve(__dirname, cesiumSource)
 }
 },
 plugins: [
 new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
 new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
 new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
 new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
 new webpack.DefinePlugin({
 CESIUM_BASE_URL: JSON.stringify('./')
 })
 ],
 module: {
 unknownContextCritical: /^.\/.*$/,
 unknownContextCritical: false
 }
 }
};

創建CesiumViewer.vue組件

創建組件可以方面項目中多次調用，提高效率。由於cesium中編程需要寫入的代碼較多，所以將js文件獨立出來。

cesium.js

cesium相關開發放在此文件中，由於cesium開發涉及到大量的代碼，若全部放在此文件中導致此文件過大，難以維護。建議將cesium做一次封裝，將常用的方法封裝到一個js文件中，在cesium.js文件調用封裝的方法。

引入插件

import Cesium from "cesium/Cesium";
import "cesium/Widgets/widgets.css";
//初始化方法
init() {
 let viewerOption = {
 geocoder: false, // 地理位置查詢定位控件
 homeButton: false, // 默認相機位置控件
 timeline: false, // 時間滾動條控件
 navigationHelpButton: false, // 默認的相機控制提示控件
 fullscreenButton: false, // 全屏控件
 scene3DOnly: true, // 每個幾何實例僅以3D渲染以節省GPU內存
 baseLayerPicker: false, // 底圖切換控件
 animation: false // 控制場景動畫的播放速度控件
 };
 let viewer = new Cesium.Viewer(this.$el, viewerOption);
 viewer._cesiumWidget._creditContainer.style.display = "none";// 隱藏版權
 }

效果圖

運行項目

npm run serve

遇到問題及解決辦法

1. 加載模型數據問題

項目中需要用到三維模型數據，格式為3dTiles格式，剛開始把模型數據放在了assets目錄下，發現在代碼中調用時加載不了資源，經過查閱相關資料，發現assets目錄下資源是處理過的，cesium不能直接調用，如果使用的化需要在源碼裡import進來，而且需要在vue.config.js中配置webPack的相關規則如下:

	configureWebpack: {
 	 module: {
 	 unknownContextCritical: /^.\/.*$/,
 	 unknownContextCritical: false,
 	 rules: [
 	 {
 	 test:/\.(gif|svg|gltf|glb)(\?.*)?$/,//加載三維模型特定數據格式
 	 loader: 'url-loader',
 	 },
 	 {
 	 test:/\.(json|b3dm)(\?.*)?$/,
 	 loader: 'url-loader',
 	 }
 	 ],
 	 },
 	}

經過一通折騰最終數據能加載到cesium中了，都是坑啊！

後來發現這個路子太麻煩了，直接把模型數據放在public文件夾下，因為此文件夾下數據VueCLI不做處理，。。。

2. 加入彈出框

如果把cesium載入到iview的modal中作為一個彈出窗體，modal第一次打開後，然後關閉modal，modal裡面的內容不會清空，導致再次打開不能正常載入cesium,所以注意modal關閉後清空裡面的內容。

小結

通過以上方法將Cesium和VueCLI3.0集成，後續可進行三維項目開發了，結合二維地圖，也可進行二三維一體化開發，關於Cesium開發在後續文章中展開，歡迎大家交流使用心得。