diff --git a/scripts/inspect-temp.mjs b/scripts/inspect-temp.mjs new file mode 100644 index 0000000..0398fce --- /dev/null +++ b/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(); diff --git a/src/core/App.js b/src/core/App.js index 7606415..aee6f85 100644 --- a/src/core/App.js +++ b/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(); diff --git a/src/styles.css b/src/styles.css index 5ec93a5..5c6127e 100644 --- a/src/styles.css +++ b/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%; }