如何为 Gods Eye View 添加一个新数据层图层接口从零到合并的完整教程【免费下载链接】gods-eye-viewA spy satellite simulator in your browser, except the data is real. Live open source spatial intelligence on a photorealistic 3D globe.项目地址: https://gitcode.com/GitHub_Trending/go/gods-eye-viewGods Eye View是一个运行在浏览器里的开源间谍卫星模拟器——它用真实数据驱动一个照片级真实的 3D 地球实时呈现航班、船舶、监控摄像头、无线电、海底电缆等开放空间数据。想让自己的数据也上天吗本教程带你完整走一遍从读懂Gods Eye View 图层架构到创建图层目录、注册数据源、接入图层面板最后通过边界检查完成合并。 第 1 步理解图层架构先读这 5 分钟在动手之前先搞清楚一个数据层由哪几块组成。项目文档 docs/CODE-BOUNDARIES.md 用一张组件归属表讲得很清楚目录职责你改哪里src/layers/family/数据获取、记录、Cesium 渲染资源✅ 新图层主体src/app/layers/把场景服务注入每个图层工厂✅ 加一行装配src/app/应用装配、目录注册、生命周期✅ 注册图层src/data/图层状态、分享链接编解码✅ 注册状态条目server/providers/Node 端数据代理与缓存⭕ 视数据源而定一个简单记法src/layers写图层本体src/app负责装配src/data负责状态与分享server负责取数。更多装配细节可参考 docs/APPLICATION.md 与 docs/INFRASTRUCTURE-LAYERS.md。 第 2 步创建图层目录照抄自行车共享样板项目里现成的 src/layers/bikeshare/ 是结构最紧凑的图层之一把它当作你的模板。典型目录长这样以 bikeshare 为例index.js—— 图层总装把下面各模块拼成一个完整图层实例source.js——数据源接口对外只暴露取数方法如getStationsingestion.js—— 数据拉取与更新节奏lifecycle.js—— 开启/关闭/清理rendering.js—— Cesium 资源绘制state.js/model.js/policy.js—— 状态、数据模型与策略source.test.mjs—— 数据源的单元测试打开 src/layers/bikeshare/index.js 可以看到装配顺序createState → createIngestion → createModel → createViewport → createRendering → createSelection → createControls → createLifecycle。每个模块都通过统一的context { state, services, parts, source }通信——这就是 Gods Eye View 的图层接口约定模块间不互相 import全部经由 context 传递。 第 3 步实现数据源source并声明取数方法数据源是图层与外界的唯一通道。装配入口 src/app/constructCatalog.js 中有一份SOURCE_METHODS清单它规定了每个图层的数据源必须实现哪些方法例如bikeshare: [getStations], cctv: [getCatalog, getHealth, getFrameUrl, getMediaUrl], traffic: [requestRoads, getStatus, fetchFlowForBounds, ...]你要做的就是在SOURCE_METHODS中为你的图层声明取数方法列表在 src/standalone/layerSources.js 中提供对应的 provider浏览器直连或走server/providers/的 Node 代理均可确保导入模块不会立即发起请求——边界检查会拦截这一点。 如果你的数据需要代理如跨域、缓存参考 server/providers/ 下gbfs.js这类小型 provider 的写法一个 middleware 进程级缓存不引入任何渲染代码。 第 4 步把图层注册进应用目录catalog这一步让图层活起来。涉及两个文件① 应用装配在 src/app/constructCatalog.js 的createApplicationCatalog中仿照createApplicationBikeshare加一行。每个图层的装配模块放在 src/app/layers/ 下如 src/app/layers/bikeshare.js职责只有一个——把场景服务渲染调度、拾取注册、覆盖层等注入图层工厂export function createApplicationBikeshare({ source }) { return createBikeshareLayer({ source, services: { render, sprites, picking, overlays }, }); }② 目录登记src/app/catalog.js 的createLayerCatalog要求图层实例与序列化元数据一一对应重复或缺失的 id 会直接抛错——这是防止拼写错误进入共享链接的第一道闸门。若你的图层需要被面板按钮直接控制还要在CONTROL_LAYER_IDS中登记。注册完成后图层就会出现在侧边栏图层面板中可随时开关。下面这张动图展示的就是全球电台图层开启后的真实效果 第 5 步注册图层状态图层开关 分享链接想让图层的开/关状态可以被本地保存并编码进分享链接吗答案是 src/data/layerState.js 中的LAYER_STATE_REGISTRY。每个条目长这样{ id: bikeshare, token: b, disposition: enabled-only }id与 catalog 中图层 id 完全一致token一个未占用的单字母用于 URL 中l字段如?lb.f.tdispositionenabled-only只有开关或enabledoptions还带图层选项若图层带选项如 CCTV 的覆盖模式还需在OPTION_GROUPS中声明选项规格。该文件内置validateLayerStateRegistry自检token 重复、id 非法会立即报错合并前跑一次测试即可验证。✅ 第 6 步跑通检查准备合并Gods Eye View 有非常严格的架构门禁提交前务必本地跑通命令作用依据npm run test单元测试含图层 source 测试TESTING.mdnpm run check:boundaries导入方向 包边界双检查scripts/check-import-directions.mjs、scripts/check-package-boundaries.mjsnpm run format:checkPrettier 格式一致性docs/CODE-BOUNDARIES.md最容易踩的两个坑浏览器图层 import 了 Node/渲染模块—— 数据源source必须是可移植的纯模块不能触碰 Cesium、DOM 或fetch全局导入即发起请求—— 工厂函数调用才创建缓存状态import 时不做任何获取。 合并前自查清单新图层目录位于src/layers/family/模块间通过 context 通信SOURCE_METHODS已声明取数方法且实例均通过校验catalog 中图层 id 与LAYER_STATE_REGISTRY的 id 完全一致分享 token 全局唯一未占用现有字母source.test.mjs覆盖空响应、畸形数据等边界情况npm run check:boundaries与npm run format:check全部通过 结语Gods Eye View 的图层体系设计得很克制source 管取数、layers 管渲染、catalog 管注册、layerState 管持久化四者各司其职。照着 bikeshare 这个样板从目录到合并通常只需要几天时间。完成一次贡献后别忘了在 CHANGELOG.md 中为你的新图层留下一笔——它可能正是下一个用户打开地球时看到的第一层数据。【免费下载链接】gods-eye-viewA spy satellite simulator in your browser, except the data is real. Live open source spatial intelligence on a photorealistic 3D globe.项目地址: https://gitcode.com/GitHub_Trending/go/gods-eye-view创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考