cesium 3dtiles 加载本地数据_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开发在后续文章中展开，欢迎大家交流使用心得。