npm install cesium -s

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

创建CesiumViewer.vue组件

创建组件可以方面项目中多次调用，提高效率。由于cesium中编程需要写入的代码较多，所以将js文件独立出来。

<template>
 <div class='warpper'>
 <div id='cesium' class='cesium'></div>
 </div>
</template>
 
<script>
 import cesium from '../util/cesium.js';
 
 export default cesium;
</script>
 
<style scoped lang='scss'>
 .warpper{
 width: calc(100% - 20px);
 height: 100%;
 padding: 10px;
 .map{
 width: 100%;
 height: 100% !important;
 }
 }
</style>

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开发在后续文章中展开，欢迎大家交流使用心得。