Vue2 项目集成 Cesium1.112.0 报错问题解决

已于 2023-12-14 13:15:12 修改
阅读量332 收藏
点赞数
文章标签： vue.js javascript
于 2023-12-14 11:02:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shanshiping/article/details/134990315
版权

vue2 项目集成最新版本cesium1.112,  运行时报错下面的错

看了一下报错信息，这个问题主要原因是Cesium最新版的代码里面涉及到了Optional chaining (?.)

这种写法，而webpack4识别不出来。

我用到的主要依赖如下：

"vue": "2.6.10",
"cesium": "^1.112.0",
"copy-webpack-plugin": "^5.1.0",

用的webpack 版本是4.4，webpack5就不会有这个问题，官方的demo里面也是webpack5的

搜索了很多方案，发现还是歪果仁的方法比较靠谱，可以尝试一下下面这两个链接里面说的解决办法

Cesium 1.99.0 Build error on linux operating system · Issue #10900 · CesiumGS/cesium · GitHub

Error after upgrading to Cesium 1.107.2 => GLTF loader error - CesiumJS - Cesium Community

幸运的话，基本上就能解决了。

我是在解决了这个报错问题后，又出来一个新的错误，

可以发现这个错误，已经不是之前那个问题了。

参考了一些帖子，但是都没有解决问题

报错File was processed with these loaders: You may need an additional loader to handle the result...-CSDN博客

最后索性修改这块得源代码，根据报错信息有一段判断条件太复杂，估计是解析不了。索性把这块给注释掉。

接下来就是见证奇迹的时刻。

不管怎么样，vue2 成功集成了最新版的cesium1.112。

如果有谁遇到同样问题，有更好的办法解决的，欢迎在评论区把方法贴出来分享给大家。

下面这篇文章和我遇到的问题类似，也说了很多方法，我照着试了都不行

最新版 Cesium（1.99.0） 构建封装开发环境以及遇到问题_cesium版本-CSDN博客

如果最终还是解决不了，就只能退而求其次，降低cesium版本，降到1.95.0 或是1.8x试试。

其他参考链接：

vue2项目与?.可选链不适配问题？-CSDN博客

vue2中支持可选链运算符（?.） - 掘金

Vue2 中 ?. 可选链式调用操作符的那些事儿 - 掘金

vue项目支持js新语法可选链“?.“以及逻辑空分配（双问号）“??“_vue中?.-CSDN博客

爱与信
关注
vue2中CesiumV1.113.0加载离线地形数据
qq_37312180的博客
01-22 627
离线地形数据可以放在vue项目下的public/data/sjzTerrain文件下。这时，我们可以把离线地形数据放在本机的iis上。加载地形数据后，可以根据经纬度获取高程。然后运行项目，不会报上面的错误了。
vue引入cesium报错问题
xmy116的博客
11-17 439
vue引入cesium报错问题。
Vue2 集成 Cesium 报错的问题
xiaozuo28的博客
10-23 263
Vue2 集成 Cesium 报错的问题
vue2（vue-cli3x[vue.config.js]）使用cesium新版（1.117.0）配置过程
最新发布
this__valve的博客
06-28 2211
看来很多解决方法都没有办法，最后终于。呜呜呜呜这里我用的是vue-cli去搭建的项目的vue2 项目，其实不建议用vue2搭配cesium。因为目前cesium停止了对vue2的版本更新，现在默认安装都是vue3版本，因此需要控制版本，否则就会报错。只有cesiun为npm install cesium@1.95.0的时候搭配vue2使用不会用报错问题，而搭配使用新版本的cesium会报错。真的头疼，但是最后还是解决出来了。有2个方法。先说最好用的吧。
【记录vue/cli5.04 引入cesium@1.98.1版本报错异常】
weixin_44472222的博客
04-01 452
注意：若想要在data中实例化Cesium.Viewer，请在构造函数中全局对象上挂载或在window上挂载，虽然在单组件中不会有任何影响，问题出现在当cesium导入大量数据渲染时，导致页面异常卡顿或不加载，原因是viewer与vue中的data或者computed进行了绑定，导致vue对viewer进行了数据劫持，劫持了太多数据。一、引入cesium，本案例引入cesium@1.98.1版本（高版本会带有引入cesium方法失败问题，可能是vue2版本太低或webpack没有配置正常导致，自行百度）
vue2+cesium加载离线地图报错
小白代码路上的磕磕绊绊
03-09 1598
vue2引入cesium
vue2.x集成cesium(附webpack配置)
qq_45856723的博客
03-07 1539
vue2.x集成cesium含vue.config.js配置。保姆级教程
vue学习第一篇 vue 引入Cesium时会报错
zhaolifang_28的博客
06-27 743
引入Cesium后总是会报Cesium没有引入的错误
cesium 学习笔记
最爱松露巧克力
06-30 2223
Cesium简介 Cesium是一个基于JavaScript的开源框架，可用于在浏览器中绘制3D的地球，并在其上绘制地图（支持多种格式的瓦片服务），该框架不需要任何插件支持，但是浏览器必须支持WebGL。 Cesium支持多种数据可视化方式，可以绘制各种几何图形、导入图片，甚至3D模型。同时，Cesium还支持基于时间轴的动态数据展示，例如，我们可以用它绘制卫星运行轨迹。 Cesium HelloWorld 下面的例子在浏览器中显示一个太空背景、具有地图覆盖的3D地球： index.html X
Cesium加载地形
Scrow1204的博客
05-12 8832
一、创建服务器（看第一篇笔记） 二、加载地形图数据 在Cesium中，地球影像数据跟地形数据是分开的，为了加载更快，Cesium默认加载的地形数据是非常模糊的，需要修改 //加载在线地形图数据 var worldTerrain = Cesium.createWorldTerrain({ // required for water effects requestWaterMask : tru...
Vue Cesium学习-流动线
LavaStrom
10-22 2098
Vue Cesium 是一款好用的地图开发工具，对于初学者非常友好 官网地址： https://zouyaoji.top/vue-cesium/ cesium - 流动线学习【已封装成vue组件】 代码效果 安装Cesium 1、需要进行安装 npm install vue-cesium --save main.js全局注册 import VueCesium from 'vue-cesium'; Vue.use(VueCesium); <template> <div class=
Cesium 基本知识、控件、坐标、相机、实体、实体删除、数据加载
zhushanlin的博客
05-24 84
##5.1 组合实体。
cesium在vue中引入报错解决；cesium在vue中初始化地球
killerdoubie的博客
09-25 955
没出来是因为这个地图请求的是在线的地图 没有权限 至少是cesium引入成功了。找了很久各种办法都用了 最后就是降到这个版本。在main.js中这样引入就可以运行起来了。
在vue2中使用cesium
weixin_48549175的博客
05-11 2647
我最经的项目中要使用cesium，cesium使用起来倒是简单原生的话直接复制就可以用了，但是在vue上就有点麻烦了。 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="utf-8"> <!-- Include the CesiumJS JavaScript and CSS files --> <script src="https://cesium.com/downlo
vue+cesium报错解决
湫沐椿风
12-27 2707
ThirdParty/zip.js Cannot read property 'length' of undefined
vue2 + cesium1.95.0 集成指南针（cesium-navigation-es6）问题解决方案
qq_26579715的博客
07-24 905
cesium-navigation-es6、vue、cesium、指南针
Vue.js2+Cesium1.103.0 一、初始化
qq_37236395的博客
05-30 478
Vue.js2+Cesium一、初始化 Demo Github 初始化 环境 node V10.15.0 npm 6.4.1 <template> <div id="cesium-container" style="width: 100%; height: 100%;" /> </template> <script> /* eslint-disable no-undef */ export default { data () {
浅谈cesium在vue2中的使用---踩坑日记（一）
qq_33990948的博客
01-07 3229
vue2+cesium，我的踩坑记录 许久不见，我又诈尸更博了。最近刚刚忙完项目，继续研究cesium，为以后做准备。也遇到了好多好多的坑，查了很多资料，好在最终是解决了。 在此分享下我的经验，顺便记录一下下。 使用步骤 一. 搭建vue环境 参照官网方法进行安装，就不进行过多的叙述了。 vue官网传送门 二.cesium的安装使用 1.cd 到你的项目根目录下，打开命令行，输入 npm install cesium --save 进行安装cesium的依赖 然后运行npm install cesium@1
Cesium 日常问题整理
水w的博客
04-07 951
Cesium 日常问题整理
vue 集成cesium 1.105
09-14
要将Cesium 1.105集成到Vue中，需要执行以下步骤： 1. 在Vue项目中安装Cesium库。可以通过npm或yarn来安装，执行以下命令： ```shell npm install cesium@1.105 --save ``` 或 ```shell yarn add cesium@1.105 ``` 2. 在Vue项目的`src`目录下创建一个`assets`文件夹，并将以下文件复制到此文件夹下： - `node_modules/cesium/Build/Cesium/Cesium.js` - `node_modules/cesium/Build/Cesium/Widgets/widgets.css` 3. 在Vue项目的`public`文件夹下创建一个`js`文件夹，并将以下文件复制到此文件夹下： - `node_modules/cesium/Build/Cesium/Workers` 4. 在Vue项目的`public`文件夹下的`index.html`文件中，添加以下代码段到`head`标签中： ```html <link rel="stylesheet" href="%PUBLIC_URL%/js/widgets/widgets.css" /> <script src="%PUBLIC_URL%/js/Cesium.js"></script> ``` 5. 在Vue项目的`src`目录下创建一个`components`文件夹，并创建一个`CesiumViewer.vue`文件。在此文件中，可以使用以下示例代码来创建一个Cesium Viewer组件并展示地球： ```vue <template> <div id="cesiumContainer" style="width: 100%; height: 100%;"></div> </template> <script> export default { mounted() { const viewer = new Cesium.Viewer('cesiumContainer'); } }; </script> <style scoped> #cesiumContainer { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> ``` 6. 在Vue项目的App.vue文件或其他组件中，使用以下代码导入并使用CesiumViewer组件： ```vue <template> <div id="app"> <CesiumViewer /> </div> </template> <script> import CesiumViewer from './components/CesiumViewer.vue'; export default { components: { CesiumViewer } }; </script> ``` 完成以上步骤后，Cesium 1.105就可以在Vue项目中使用了。运行Vue项目后，将展示一个带有Cesium Viewer的地球场景。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值