Lazily create and toggle Cesium globe visibility

The globe container now uses a `visible` class instead of
`display`, allowing the Cesium viewer to be pre-created on page
load while remaining hidden until the geographic view is selected.

src/core/App.js

@@ -116,6 +116,7 @@ export class App {
 
     this.timeline = new Timeline();
     this.globe = new CesiumGlobe({ onPick: (i) => this._pickGlobe(i) });
+    this.globe.ensureCreated(); // 打开页面时就渲染缓存好三个视图
 
     this.scene.add(this.binder.group);
     this.scene.add(this.timeline.group);
@@ -352,7 +353,7 @@ export class App {
 
     // Cesium 地球：地理视图显示 Cesium 画布，其余视图显示 Three.js 画布
     document.getElementById('scene').style.display = isGlobe ? 'none' : 'block';
-    document.getElementById('cesium-container').style.display = isGlobe ? 'block' : 'none';
+    document.getElementById('cesium-container').classList.toggle('visible', isGlobe);
 
     if (isGlobe) {
       this.globe.ensureCreated();

src/styles.css

@@ -28,8 +28,9 @@ html, body {
 #scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
 #cesium-container {
   position: absolute; inset: 0; width: 100%; height: 100%;
-  display: none; background: #14100d;
+  visibility: hidden; background: #14100d;
 }
+#cesium-container.visible { visibility: visible; }
 #cesium-container .cesium-viewer,
 #cesium-container .cesium-widget,
 #cesium-container canvas { width: 100%; height: 100%; }