cesium初始化地图卡住问题,移除默认Bing影像图层

156 阅读1分钟

最近在项目运维中,我注意到 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()
			},

希望这个排查经验对遇到类似问题的同学有所帮助。