空间数据可视化已成为基金结题、成果报奖与甲方汇报的硬性刚需但前端交互地图、空间数据库、后端接口与云部署的全栈技术门槛长期制约着科研团队成果转化的最后一公里。2025年以来Claude Code与Codex等AI Agent实现了从代码建议到项目级开发的能力跃迁使科研人员无需精通编程即可通过双Agent协作范式——Claude Code负责工程实现、Codex负责质量审查、研究者负责需求定义与成果验收——独立完成完整的WebGIS系统构建。很多WebGIS项目并不缺想法真正卡住的是不会从零搭工程、不会接真实数据、不会把地图大屏做得像样、不会把前端、后端和空间数据库连起来更不会部署成一个甲方或答辩现场能打开的地址。本课程正是基于这一技术变革与科研深度需求的交汇而设计以NASA GIBS/EONET真实遥感数据为核心驱动通过两天全链路实战完整跑通从数据接入、Leaflet/MapLibre交互地图、ECharts科技大屏与Canvas动效可视化、PostGIS空间数据库、Express后端接口到阿里云公网部署的技术闭环现场完成八大科研专题系统帮助每位学员带走一套可上线运行、可替换自有研究区数据、可直接写进结题验收材料的WebGIS科研成果系统。专题一、双Agent工作台搭建课堂目标让每位学员拥有一个可运行、可复核、可继续扩展的WebGIS项目工作台。1.讲清Codex与Claude Code的角色Claude Code负责实现Codex负责审查你负责需求和验收。2.检查账号、权限、终端、编辑器、浏览器开发者工具。3.初始化Vite地图项目建立目录、脚本和运行命令。4.编写CLAUDE.md约定技术栈、目录规范、提交前自检规则。双AI分工Claude Code初始化工程并跑通dev/buildCodex审查依赖、目录、构建脚本和潜在风险。现场实操学员跟做新建项目、运行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真实数据专题图与数据源说明。专题四、EChartsCanvas科技大屏课堂目标把专题地图升级成适合汇报、演示和作品集展示的科技大屏。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 APIbbox查询、点选最近、按属性过滤、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成果、演示地址、长图/二维码、复用资产包。点赞关注
