Claude Code与Codex双Agent协作：WebGIS全链路开发实战解析

空间数据可视化正在成为科研基金申报、成果报奖与甲方汇报的硬性刚需。然而前端交互地图、空间数据库、后端接口与云部署构成的全栈技术门槛，长期制约着科研团队成果转化的"最后一公里"。B站"AI上研修"频道推荐的邓老师主讲课程，聚焦一个颇具代表性的解决路径：用 Claude Code 与 Codex 的双 AI Agent 协作模式，让不精通编程的研究者也能独立完成完整的 WebGIS 系统构建。

本文基于该课程的内容体系，梳理双 Agent 协作范式的技术逻辑与 WebGIS 全链路开发的实践框架。

双Agent协作范式：谁负责实现，谁负责审查

这门课最核心的方法论，是把 AI 辅助开发拆解成明确的角色分工：Claude Code 负责工程实现，Codex 负责质量审查，研究者本人负责需求定义与成果验收。这种"实现—审查—验收"的三方分工，本质上是把传统软件团队的角色映射到人机协作场景中。

课程中邓老师用了一个直观的比喻来解释 AI Agent 的构成。他把 Agent 定义为"Model + Harness"（模型加马鞍/框架）：大模型像引擎，而 Harness 则像汽车外壳——方向盘、油门、刹车、车窗，把这些结合起来才能让车"正确地跑起来"。他进一步类比："模型就是野马，它会乱跑、会出错，Harness 就是马鞍，可以约束马往正确的方向跑。"

这个比喻点出了当前 AI 编程工具的关键认知：单纯的大模型对话框（如豆包、DeepSeek^广告、Kimi、GPT、Grok、Gemini）只能聊天，而要真正驱动项目级开发，需要 Claude Code、Codex 这类具备工程执行能力的 Harness。课程还提到通过 SwitchHosts 等工具配置 Claude Code 的路由与模型接入，构成完整可干活的 Agent。这类配置细节，正是许多科研人员初次接触 AI 编程时的门槛所在。

Claude Code 与 Codex 在定位上有本质差异，理解这一点有助于判断双 Agent 协作的合理性。Claude Code 是 Anthropic 推出的命令行 AI 编程工具，可以直接读写本地文件、执行终端命令、调用外部工具，具备在真实项目目录中持续作业的能力。Codex 则是 OpenAI 推出的代码生成与审查模型（现已深度整合进 ChatGPT 及 GitHub Copilot 生态），擅长对已有代码做静态分析、找出逻辑漏洞与安全隐患。两者"一个动手、一个复核"的分工，利用了它们各自的设计侧重：Claude Code 的优势在于工程执行的连贯性，Codex 的优势在于代码层面的批判性审查。这种双轮驱动的模式，在一定程度上复现了人类开发团队中 Developer + Code Reviewer 的协作结构，从而在没有专业工程师介入的情况下维持基本的代码质量管控。

从Leaflet到MapLibre：真实地理数据的接入

课程的地图开发部分分两个层次推进。Leaflet 交互地图作为入门，涵盖 OSM 暗色底图加载、经纬度与缩放级别概念、GeoJSON 按属性分级设色、比例符号与高亮样式，以及图层控制、图例、弹窗、点击查询、Bbox 范围拾取等交互功能。这一层还特别强调工程健壮性——补充弹窗转义、空数据提示、图层加载失败兜底，形成可复用的专题图模板。

进阶部分转向 MapLibre 与真实卫星数据。这里需要理解矢量瓦片、栅格瓦片、样式表达式与图层顺序等概念，并接入 NASA GIBS 的真彩、降水、气温、海色、海温、海冰等图层，以及 EONET 的台风、火点、洪水、冰山等真实事件数据。功能上实现日期切换、时间轴回放、多日合成、缺测帧跳过。从模拟数据到 NASA 级真实遥感数据的跨越，是科研可视化区别于普通 Web 项目的关键点。

NASA GIBS（Global Imagery Browse Services）与 EONET（Earth Observatory Natural Event Tracker）是 NASA 面向公众和科研社区开放的两套关键数据服务，理解它们的区别有助于把握课程进阶内容的意义。GIBS 是一个图像瓦片服务，提供来自 Terra、Aqua、GOES 等卫星的逐日或多日合成遥感影像，支持标准的 WMTS/TMS 协议，可以直接以栅格瓦片的形式加载进 MapLibre 等地图框架，涵盖真彩色、叶绿素浓度、海表温度、降水强度、海冰覆盖等数十种产品。EONET 则是事件型数据库，以 GeoJSON 格式实时发布台风路径点、野火位置、火山喷发、洪水范围等离散事件，适合以矢量图层叠加展示。两者结合使用——用 GIBS 铺背景遥感场、用 EONET 标注事件位置——正是科研级专题图的标准制作思路，也是课程中时间轴回放功能的数据基础。

大屏可视化：ECharts图表与Canvas动效

面向汇报场景，课程用 ECharts 与 Canvas 搭建科技感大屏。整体布局包含地图主视图、指标卡、趋势图、图例、时间与空间控件。ECharts 负责趋势图、区域统计、仪表盘，并与地图状态实现联动；Canvas 则实现粒子、站点脉冲、台风路径、数据飞线等流畅动效。

这部分还强调工程实践中的性能考量——响应式适配、低性能模式、标签页隐藏时暂停动画、按需加载。这些细节决定了大屏在实际甲方汇报中能否流畅运行，往往是决定项目"体面度"的隐性因素。

PostGIS空间数据库与Express后端

真正的 WebGIS 系统离不开空间数据库支撑。课程用 Docker 启动 PostgreSQL + PostGIS，讲解数据库、表、空间字段、SRID 等基础概念，导入 GeoJSON、Shapefile 并建立 GiST 空间索引，编写范围查询、最近邻距离、缓冲区、相交判断等空间 SQL。这里的一个重要能力，是把业务问题翻译成 SQL——"视野内查点、附近查设施、区域统计"。

后端则采用 Express 打通前后端：配置环境变量、数据库连接池、健康检查，封装 REST API（Bbox 查询、点选、最近邻、按属性过滤、Limit 限制），并使用参数化查询防 SQL 注入、增加经纬度与 Bbox 校验。前端调用接口后把返回的 GeoJSON 动态上图，并处理加载态与错误态。这套架构虽然基础，却完整覆盖了生产级 Web 应用的安全与健壮性要点。

PostGIS 是 PostgreSQL 的空间扩展，使关系型数据库能够存储点、线、面等几何类型，并提供 ST_Intersects、ST_DWithin、ST_Buffer、ST_Distance 等数百个空间函数，支持基于 GiST（广义搜索树）索引的高效空间查询。SRID（空间参考标识符）是 PostGIS 中标识坐标系的整数代码，例如 SRID 4326 对应 WGS84 地理坐标系（即常见的经纬度），SRID 3857 对应 Web 墨卡托投影（WebGIS 底图的通用坐标系）。在导入 GeoJSON 或 Shapefile 时正确指定 SRID，是保证空间查询结果准确的前提。相比传统的文件型 GIS 工作流，把空间数据入库的最大优势在于：可以通过 SQL 把空间逻辑（如"缓冲区内的站点"）与业务逻辑（如"过去 7 天有观测记录"）在同一条查询中联合处理，再由后端接口直接返回 GeoJSON，前端无需额外转换即可上图，大幅简化数据流转链路。

阿里云部署与八大专题综合项目

全链路的收尾是 阿里云^广告 ECS 部署：厘清 ECS、Nginx、Node 服务、Docker、PostGIS、域名与 HTTPS 之间的关系，前端打包部署静态站，后端用进程管理或容器方式运行，配置 Nginx 反向代理、跨域、安全组、日志，处理备案前临时 IP 访问、正式域名备案、回滚与备份策略，最终生成公网可访问的演示地址。

课程最终以综合项目收束，提供多个真实主题供学员选择并个性化：海洋叶绿素（PACE OCI 八天滚动合成）、全球台风热带风暴（EONET 真实轨迹多风暴同步动画）、全球极端降水（GPM IMERG 逐日回放）、近地表气温与卫星火点叠加、海表温度与洋流（GHRSST 海温与湾流、黑潮、赤道流、ACC 流线）、区域洪水淹没监测、农林植被 NDVI、两极海冰对比等。每个主题都由 Claude Code 按任务清单补齐功能、Codex 做审查并列出修改项，学员替换标题、图层、研究区与指标形成个人化成果。

值不值得学：一个务实的判断

这门课的价值主张清晰：它面向的不是专业前端工程师，而是有可视化刚需但缺乏全栈能力的科研人员。双 Agent 协作模式降低了编码门槛，八大专题覆盖了从工作台搭建到云上线的完整链路，NASA GIBS、EONET 等真实数据源的接入也让成果具备科研级说服力。

需要理性看待的是，AI Agent 协作仍处于快速演进阶段，工具配置（如 SwitchHosts、模型路由）本身存在一定复杂度，且课程效果高度依赖学员的需求定义与验收能力——毕竟"你负责验收"这一环无法外包给 AI。对于希望快速产出 WebGIS 成果、又愿意学习 AI 协作工作流的研究者而言，这条路径提供了一个可行的参考框架。