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.

scripts/inspect-temp.mjs

@@ -0,0 +1,26 @@
+import puppeteer from 'puppeteer-core';
+const CHROME = 'C:/Program Files/Google/Chrome/Application/chrome.exe';
+const browser = await puppeteer.launch({ executablePath: CHROME, headless: 'new',
+  args: ['--no-sandbox', '--disable-gpu', '--use-gl=swiftshader', '--enable-unsafe-swiftshader', '--window-size=1440,900'] });
+const page = await browser.newPage();
+await page.setViewport({ width: 1440, height: 900 });
+const errors = [];
+page.on('pageerror', (e) => errors.push(e.message));
+page.on('console', (m) => { if (m.type() === 'error') errors.push('console: ' + m.text()); });
+await page.goto('http://localhost:5250/', { waitUntil: 'domcontentloaded', timeout: 60000 });
+await new Promise(r => setTimeout(r, 8000));
+// 还没切到地理视图，Cesium 应该已经创建
+const pre = await page.evaluate(() => {
+  const g = window.__app.globe;
+  return { created: !!(g && g.viewer), markers: g && g.markers ? g.markers.length : 0 };
+});
+console.log('启动即创建:', JSON.stringify(pre));
+await page.click('.view-btn[data-view="globe"]');
+await new Promise(r => setTimeout(r, 2000));
+const after = await page.evaluate(() => {
+  const el = document.getElementById('cesium-container');
+  return { visible: el.classList.contains('visible'), visibility: getComputedStyle(el).visibility };
+});
+console.log('切到地理:', JSON.stringify(after));
+console.log('ERRORS', errors.length ? errors.join(' | ') : '(none)');
+await browser.close();

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%; }