涵盖从真实数据驱动的Leaflet交互地图、MapLibre矢量瓦片、ECharts科技大屏与Canvas动效可视化，到PostGIS空间数据库、Express后端接口及阿里云部署的全流程实践，构建可上线、可复用、可交付的WebGIS科研成果系统
很多WebGIS项目并不缺想法，真正卡住的是：不会从零搭工程、不会接真实数据、不会把地图大屏做得像样、不会把前端、后端和空间数据库连起来，更不会部署成一个甲方或答辩现场能打开的地址。本教程正是基于这一技术变革与科研深度需求的交汇而设计，以NASA GIBS/EONET真实遥感数据为核心驱动，通过两天全链路实战，完整跑通从数据接入、Leaflet/MapLibre交互地图、ECharts科技大屏与Canvas动效可视化、PostGIS空间数据库、Express后端接口到阿里云公网部署的技术闭环，现场完成八大科研专题系统，帮助每位技术人员带走一套可上线运行、可替换自有研究区数据、可直接写进结题验收材料的WebGIS科研成果系统。
【贯穿全程的双AI协作方法】：
-
你提出目标：把"想要一个能演示的台风路径大屏"拆成数据、地图、交互、动效、部署等任务。
-
Claude Code实现：在本地读写文件、安装依赖、跑构建、截图自检，把功能做到可运行。
-
Codex审查：从性能、健壮性、安全、可维护性、可访问性等维度挑问题并给出改法。
-
你拍板验收：判断哪些建议要改，哪些保留，形成自己的项目经验和复用规则。
-
资产回写：每个专题沉淀提示词、复核清单、项目骨架、部署配置，逐步形成自己的WebGIS工作台。
【收获】：
1.以真实案例数据驱动的WebGIS科技大屏：8系统专题，可切换、可回放、可截图演示。
2.PostGIS全栈系统：前端地图、Express后端接口、PostGIS空间数据库完整打通。
3.公网可访问演示地址：部署到阿里云，支持扫码展示或发给甲方、导师、面试官查看。
4.可复用资产：源码、课件、真实数据、项目模板、提示词库、Codex审查清单、部署说明。
5.新的工作方式：用Claude Code实现，用Codex审查，自己做需求负责人和验收人。
【实战成果预览】：8个真实数据专题
以下8个专题使用NASA等公开真实数据源构建，重点不是只做"漂亮页面"，而是让每个成果都能解释数据来源、时间维度、地图图层和复用方法。
【内容简要】：
专题一：双Agent工作台搭建
目标：让每位学员拥有一个可运行、可复核、可继续扩展的WebGIS项目工作台。
1.讲清Codex与Claude Code的角色：Claude Code负责实现，Codex负责审查，你负责需求和验收。
2.检查账号、权限、终端、编辑器、浏览器开发者工具。
3.初始化Vite地图项目，建立目录、脚本和运行命令。
4.编写 CLAUDE.md，约定技术栈、目录规范、提交前自检规则。
**双AI分工：**Claude Code初始化工程并跑通dev/build；Codex审查依赖、目录、构建脚本和潜在风险。
**现场实操：**学员跟做新建项目、运行dev/build、保存第一版提示词。
**验收标准：**浏览器能打开地图页面，终端构建无报错，项目规则文件能被AI正确读取。
带走交付物： 项目骨架、CLAUDE.md、提示词库、复核清单。
专题二：Leaflet交互地图
目标：把静态地图做成能点、能查、能换数据的交互专题图。
1.加载OSM/暗色底图，讲清经纬度、缩放级别、图层概念。
2.导入GeoJSON，按属性做分级设色、比例符号和高亮样式。
3.增加图层控制、图例、弹窗、点击查询、bbox范围拾取。
4.补上弹窗转义、空数据提示和图层加载失败兜底。
**双AI分工：**Claude Code实现地图交互；Codex审查事件绑定、数据兜底、弹窗安全和可访问性。
**现场实操：**把课程样例或自己的研究区数据做成交互专题图。
**验收标准：**能点击要素、显示属性、切换图层、看到图例；替换数据后不需要重写主逻辑。
**带走交付物：**可替换数据的Leaflet专题图模板。
专题三：MapLibre + 真实数据
目标：从普通地图升级为真实遥感/事件数据驱动的WebGIS专题。
1.理解MapLibre的栅格瓦片、矢量瓦片、样式表达式和图层顺序。
2.接入NASA GIBS：真彩、降水、气温、海色、海温、海冰等图层。
3.接入EONET事件：台风、火点、洪水、冰山等真实事件数据。
4.实现日期切换、时间轴回放、多日合成、缺测帧跳过和加载失败提示。
**双AI分工：**Claude Code接图层和时间轴；Codex复核瓦片URL、日期参数、缓存预取、坐标和投影适配。
**现场实操：**选择一个NASA图层完成时间回放专题。
**验收标准：**能按日期切换，图层加载失败有提示，不出现空白死页。
**带走交付物：**NASA真实数据专题图与数据源说明。
专题四：ECharts+Canvas科技大屏
目标：把专题地图升级成适合汇报、演示和作品集展示的科技大屏。
1.搭建大屏布局：地图主视图、指标卡、趋势图、图例、时间控件。
2.ECharts制作趋势、区域统计、仪表盘，并与地图状态联动。
3.Canvas实现流场粒子、站点脉冲、台风路径、数据飞线等动效。
4.加入响应式适配、低性能模式、标签页隐藏暂停动画、按需加载。
**双AI分工：**Claude Code实现图表和动效；Codex审查 rAF 循环、内存、移动端布局和首屏性能。
**现场实操：**把专题三的数据升级成可汇报的大屏页面。
**验收标准：**图表与地图同步，窄屏不遮挡，隐藏标签页后动画暂停。
**带走交付物：**可演示科技大屏、截图素材、性能优化清单。
专题五：PostgreSQL + PostGIS
目标：把空间数据从文件升级为空间数据库，支撑可交付项目的查询和分析。
1.用Docker启动PostGIS，讲清数据库、表、空间字段、SRID。
2.导入GeoJSON/Shapefile，建立GiST空间索引。
3.编写范围查询、最近邻、距离、缓冲区、相交判断等空间SQL。
4.把业务问题翻译成SQL：视野内查点、附近查设施、区域统计。
**双AI分工：**Claude Code跑通建库导入；Codex审查索引、查询计划、字段命名和数据质量问题。
**现场实操：**把课程样例或自带研究区数据导入PostGIS。
**验收标准：**能用SQL返回GeoJSON所需字段，查询速度可接受。
**带走交付物：**PostGIS数据库、建表脚本、常用空间SQL模板。
专题六：Express后端+前后端打通
目标：把空间查询封装成接口，让前端地图能实时调用后端结果。
1.建立Express项目，配置环境变量、数据库连接池和健康检查。
2.封装REST API：bbox查询、点选最近、按属性过滤、limit限制。
3.使用参数化查询防SQL注入，增加经纬度/bbox/limit校验。
4.前端调用接口，把返回GeoJSON动态上图，并处理加载态和错误态。
**双AI分工：**Claude Code实现接口和前端调用；Codex审查CORS、错误脱敏、状态码、连接释放和优雅退出。
**现场实操：**点地图触发后端查询，结果实时显示在前端。
**验收标准：**非法参数返回明确错误，数据库异常不泄露敏感信息。
**带走交付物：**Express API、前后端联调页面、接口说明。
专题七：阿里云上线交付
目标：把本地项目变成公网可访问成果，满足演示、验收和作品集传播需要。
1.讲清ECS、Nginx、Node服务、Docker/PostGIS、域名与HTTPS的关系。
2.前端打包并部署静态站，后端用进程管理或容器方式运行。
3.配置反向代理、跨域、环境变量、端口、安全组和日志查看。
4.讲备案前临时IP访问、正式域名备案、更新回滚和备份策略。
双AI分工：Claude Code写部署脚本和配置；Codex审查端口暴露、密钥泄露、CORS放开过度和部署风险。
现场实操：把本地项目部署成公网可访问地址。
验收标准：手机扫码可打开，前端能正常请求后端接口。
带走交付物：部署脚本、Nginx配置、运维说明、演示二维码素材。
专题八：结课综合项目
目标：完成一个能讲清业务场景和技术链路的结课作品。
1.选定综合主题：气候热点、洪水监测、植被变化或自带项目数据。
2.串联真实数据接入、地图交互、大屏展示、PostGIS查询、后端接口。
3.Claude Code按任务清单补齐功能；Codex做终轮审查并列出修改项。
4.学员替换标题、图层、研究区、指标和演示话术，形成个人化成果。
**双AI分工：**Claude Code做最后实现和修复；Codex做性能、健壮性、安全、可维护性终审。
**现场实操：**完成一个能本地运行、能线上访问、能说明数据源和关键功能的作品。
**验收标准：**能打开演示地址，能说清数据源、核心功能、部署方式和后续如何换数据。
**带走交付物：**全栈WebGIS成果、演示地址、长图/二维码、复用资产包。
推荐阅读：
1、前沿AI-Agent2.0工具链深度科研系统教学方案：贯通LLM、Claude Code、codex、OpenClaw、Hermes-meta、人机协同实现从文献挖掘到成果产出
2、基于claude code、codex双AI协同高水平论文撰写与质量校准：数据分析→论文初稿→交叉审稿全流程
3、面向真实科研场景，构建由Codex、Claude Code、OpenClaw、Hermes四位"AI研究员"组成的可迭代、可迁移的科研协作团队实战