性能优化:Cesium 懒加载+后台预载、按需渲染、射线检测节流、城市标签 primitive 化、时间轴纹理跟随可视区域

- Cesium 改为动态加载(vite 插件不再注入 6MB 脚本),首屏零 Cesium 请求
- 首帧渲染后后台预载地理视图,loading 展示 8 秒期间并行,就绪前地理按钮置灰
- Three.js 按需渲染:静止停止重绘,动画/交互/状态变化时渲染
- 射线检测合帧节流,binder 只测当前页±1、时间轴只测可视窗口
- 移除 vignette 的 mix-blend-mode 全屏合成
- 7342 个城市从 entity 改为 PointPrimitiveCollection + LabelCollection
- 时间轴懒加载窗口跟随可视区域(拖拽/缩放实时跟随)
This commit is contained in:
2026-09-19 03:21:27 +08:00
parent 0c7990a9a8
commit f701862e5a
8 changed files with 175 additions and 32 deletions
+6 -1
View File
@@ -55,7 +55,7 @@ html, body {
.vignette {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse at 50% 42%, transparent 40%, rgba(8, 5, 3, 0.55) 100%);
mix-blend-mode: multiply;
/* 不启用 mix-blend-mode,避免每帧全屏合成开销(深色半透明覆盖即可) */
}
.grain {
position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
@@ -114,6 +114,11 @@ html, body {
transition: all 0.25s ease;
}
.view-btn:hover { border-color: var(--gold); color: #fff; }
.view-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.view-btn.active {
background: linear-gradient(180deg, rgba(201,162,39,0.85), rgba(150,115,20,0.85));
color: #1c1308; border-color: var(--gold); font-weight: 600;