Vue/React + Cesium1.63.1配置出错

在更新Cesium到1.63.1版本后,Vue或React项目中出现配置错误,提示'cesium/Cesium'没有默认导出。原因是新版本Cesium采用模块化导出,不再提供全局cesium对象。为解决问题,需要按需导入Cesium的特定模块,而非整体引入。若项目改动过大,可考虑回退到1.62版本。

    之前按照网上的教程配置过Vue+Cesium和React+Cesium配置,都能够成功运行。但是今天在完成一个功能的时候需要更新Cesium,更新后发现配置好的Cesium报错了,不能使用。
    报错Attempted import error: ‘cesium/Cesium’ does not contain a default export (imported as ‘Cesium’)。问题在于根据路径找得到对应文件,但是对应文件并没有默认export的参数。出错的地方在对应引入Cesium的地方:

import Cesium from "cesium/Cesium";

    打开node_modules/cesuim/Source/Cesium.js后发现,Cesium更新到1.63后它的类都是模块化导出,不再像以前一样导出cesium,再通过cesium调用。如:

export { default as ApproximateTerrainHeights } from './Core/ApproximateTerrainHeights.js';
export { default as ArcGISTiledElevationTerrainProvider } from './Core/ArcGISTiledElevationTerrainProvider.js';
export { default as ArcType } from './Core/ArcType.js';
export { default as AssociativeArray } from './Core/AssociativeArray.js';
export { default as AttributeCompression } from './Core/AttributeCompression.js';
export { default as AxisAlignedBoundingBox } from './Core/AxisAlignedBoundingBox.js';
export { default as BingMapsApi } from './Core/BingMapsApi.js';
export { default as BingMapsGeocoderService } from './Core/BingMapsGeocoderService.js';
export { default as BoundingRectangle } from './Core/BoundingRectangle.js';
export { default as BoundingSphere } from './Core/BoundingSphere.js';
export { default as BoxGeometry } from './Core/BoxGeometry.js';
export { default as BoxOutlineGeometry } from './Core/BoxOutlineGeometry.js';
export { default as Cartesian2 } from './Core/Cartesian2.js';

    所以不能像之前网上普遍的引入cesium做法一样,,需要按需引入,如:

import Viewer from "cesium/Cesium";
import UrlTemplateImageryProvider from "cesium/Cesium";
import createWorldTerrain from "cesium/Cesium";
import Cesium3DTileset from "cesium/Cesium";

    当然,如果你的项目已经使用低版本很久了,如果改成按需引入会引起较大改动,可以选择安装1.62版本。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值