[{"data":1,"prerenderedAt":207},["ShallowReactive",2],{"note-\u002Fnotes\u002Fcesium-viewer-init-implementation":3},{"id":4,"title":5,"body":6,"cover":188,"description":189,"draft":190,"extension":191,"featured":190,"meta":192,"navigation":193,"order":194,"path":195,"publishedAt":196,"readingTime":197,"seo":198,"stem":199,"summary":200,"tags":201,"__hash__":206},"notes\u002Fnotes\u002Fcesium-viewer-init-implementation.md","Cesium 地球初始化 Demo 的实现说明",{"type":7,"value":8,"toc":174},"minimark",[9,13,17,25,42,45,48,62,65,68,73,76,84,88,111,114,118,121,124,127,130,133,150,153,156,159,171],[10,11,12],"h2",{"id":12},"这篇笔记解决什么问题",[14,15,16],"p",{},"这个 Demo 现在故意做得很克制，不是因为功能想不到，而是因为我们需要先拿到一个稳定、可反复验证的 Cesium 初始化基线。",[14,18,19,20,24],{},"之前往页面里叠加扫描圈、点位和联动面板之后，运行过程中出现过 ",[21,22,23],"code",{},"Maximum call stack size exceeded","。在这种情况下，继续往上堆功能会让问题越来越难拆，所以这里先把目标收敛为一件事：",[26,27,28,36,39],"ul",{},[29,30,31,32,35],"li",{},"让真实的 Cesium ",[21,33,34],{},"Viewer"," 在 Demo 详情页里稳定初始化",[29,37,38],{},"保证路由切换和组件卸载时能干净销毁",[29,40,41],{},"保留内容壳和运行时代码分离的页面结构",[10,43,44],{"id":44},"当前实现怎么拆",[14,46,47],{},"当前这条链路分成两层：",[26,49,50,56],{},[29,51,52,55],{},[21,53,54],{},"content\u002Fdemos\u002F*.md"," 负责 Demo 页面元数据和“怎么观察效果”的轻量说明",[29,57,58,61],{},[21,59,60],{},"demos\u002F**\u002F*.js"," 负责真正的浏览器运行时逻辑",[14,63,64],{},"这样做的好处是，Demo 页可以继续承担展示入口和内容壳，而重型 3D 初始化逻辑仍然留在客户端按需加载，不会把 SSR 页面也拖进浏览器专属依赖里。",[10,66,67],{"id":67},"运行时的关键选择",[69,70,72],"h3",{"id":71},"_1-使用-esm-import-初始化-cesium","1. 使用 ESM import 初始化 Cesium",[14,74,75],{},"这个 Demo 直接通过 ESM 方式加载 Cesium，而不是再额外挂一套传统脚本注入逻辑。这样做有两个好处：",[26,77,78,81],{},[29,79,80],{},"依赖边界更清楚，运行时和工程构建保持一致",[29,82,83],{},"以后继续加功能时，更容易沿用模块化拆分方式",[69,85,87],{"id":86},"_2-静态资源继续预先复制","2. 静态资源继续预先复制",[14,89,90,91,94,95,98,99,102,103,106,107,110],{},"虽然运行时代码走 ESM，但 Cesium 仍然需要它自己的静态资源目录。当前策略是继续通过 ",[21,92,93],{},"prepare:cesium"," 把这些资源复制到 ",[21,96,97],{},"public\u002FcesiumStatic","，这样运行时能稳定访问 ",[21,100,101],{},"Workers","、",[21,104,105],{},"Assets"," 和 ",[21,108,109],{},"Widgets","。",[14,112,113],{},"这个点很重要，因为很多“看起来像初始化失败”的问题，本质上不是 Viewer API 本身的问题，而是静态资源路径没准备好。",[69,115,117],{"id":116},"_3-底图先走最稳妥路线","3. 底图先走最稳妥路线",[14,119,120],{},"为了保证没有 token 的情况下也能稳定显示，当前版本优先使用 Cesium 自带的基础纹理资源，不把 Demo 的可运行性绑定到外部服务授权状态上。",[14,122,123],{},"这意味着它不是一个追求“最好看”的版本，而是一个追求“最稳定、最容易定位问题”的版本。",[10,125,126],{"id":126},"为什么先回到最小版本",[14,128,129],{},"这个 Demo 当前最重要的价值，不是展示复杂业务能力，而是作为后续迭代的安全起点。",[14,131,132],{},"如果基础初始化都不稳定，那么后面再加：",[26,134,135,138,141,144,147],{},[29,136,137],{},"扫描圈",[29,139,140],{},"飞线",[29,142,143],{},"点位",[29,145,146],{},"联动面板",[29,148,149],{},"自定义镜头节奏",[14,151,152],{},"这些能力时，很难判断问题到底出在哪一层。先把基线做小，后续每次新增能力时都能更明确地验证“是哪一步把稳定性打破了”。",[10,154,155],{"id":155},"后续怎么继续加",[14,157,158],{},"比较稳妥的节奏是按层往回加，而不是一次性恢复全部效果：",[160,161,162,165,168],"ol",{},[29,163,164],{},"先加单一图层或单一实体能力",[29,166,167],{},"再加交互或面板联动",[29,169,170],{},"最后再回到更完整的可视化编排",[14,172,173],{},"这样每一步都有明确的回退点，也更适合作为作品集里的长期维护 Demo。",{"title":175,"searchDepth":176,"depth":176,"links":177},"",2,[178,179,180,186,187],{"id":12,"depth":176,"text":12},{"id":44,"depth":176,"text":44},{"id":67,"depth":176,"text":67,"children":181},[182,184,185],{"id":71,"depth":183,"text":72},3,{"id":86,"depth":183,"text":87},{"id":116,"depth":183,"text":117},{"id":126,"depth":176,"text":126},{"id":155,"depth":176,"text":155},null,"记录这个最小 Cesium Demo 为什么先回到基础地球版本，以及当前运行时、静态资源和页面职责是怎么拆开的。",false,"md",{},true,4,"\u002Fnotes\u002Fcesium-viewer-init-implementation","2026-04-19","5 min",{"title":5,"description":189},"notes\u002Fcesium-viewer-init-implementation","这篇笔记聚焦 Cesium 初始化 Demo 的实现取舍，包括为什么暂时收敛到最小版本、运行时如何挂载 Viewer、无 token 的底图策略，以及后续如何在稳定基线之上继续扩展。",[202,203,204,205],"cesium","webgis","runtime","nuxt","fYh2Ne9WMFtodMa1eBbP2TrC10JAmhm3Ju1Jv-ZOXkw",1776610107770]