最近在项目运维中,我注意到 Cesium 初始化地球视图时经常出现卡顿现象。由于一直主要负责维护 UniApp 的 APP 端,最初我以为是不同机型或移动端兼容性问题导致的。直到某天 Web 端也出现了同样的情况,才意识到这可能是一个更普遍的问题。
经过仔细排查,发现 Cesium 在初始化时会自动加载 Bing 地图资源。一旦网络出现波动,就容易引起地图资源加载阻塞,进而影响后续所有图层的加载,造成界面卡顿。
解决方法其实很简单:直接在代码中移除 Cesium 默认的影像图层,避免因 Bing 地图加载问题引发的阻塞。调整之后,地图加载流畅,不再出现卡顿问题。
// 创建地图
async initMap() {
// 创建地图实例
this.viewer = createViewer("cesiumContainer");
// cesium默认了bingMap,网络问题会导致后面的图层阻塞,直接移除cesium默认影像图层
this.viewer.imageryLayers.remove(this.viewer.imageryLayers.get(0))
// 初始化底图
this.imageryLayers = initBasemaps(this.viewer, '高德地图-影像');
window.viewer = this.viewer;
window.Cesium = Cesium;
// 发送完成信号
this.sendMsg()
},
希望这个排查经验对遇到类似问题的同学有所帮助。