涵盖从真实数据驱动的Leaflet交互地图、MapLibre矢量瓦片、ECharts科技大屏与Canvas动效可视化到PostGIS空间数据库、Express后端接口及阿里云部署的全流程实践构建可上线、可复用、可交付的WebGIS科研成果系统很多WebGIS项目并不缺想法真正卡住的是不会从零搭工程、不会接真实数据、不会把地图大屏做得像样、不会把前端、后端和空间数据库连起来更不会部署成一个甲方或答辩现场能打开的地址。本教程正是基于这一技术变革与科研深度需求的交汇而设计以NASA GIBS/EONET真实遥感数据为核心驱动通过两天全链路实战完整跑通从数据接入、Leaflet/MapLibre交互地图、ECharts科技大屏与Canvas动效可视化、PostGIS空间数据库、Express后端接口到阿里云公网部署的技术闭环现场完成八大科研专题系统帮助每位技术人员带走一套可上线运行、可替换自有研究区数据、可直接写进结题验收材料的WebGIS科研成果系统。【贯穿全程的双AI协作方法】1. 你提出目标把“想要一个能演示的台风路径大屏”拆成数据、地图、交互、动效、部署等任务。2. Claude Code实现在本地读写文件、安装依赖、跑构建、截图自检把功能做到可运行。3. Codex审查从性能、健壮性、安全、可维护性、可访问性等维度挑问题并给出改法。4. 你拍板验收判断哪些建议要改哪些保留形成自己的项目经验和复用规则。5. 资产回写每个专题沉淀提示词、复核清单、项目骨架、部署配置逐步形成自己的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/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成果、演示地址、长图/二维码、复用资产包。推荐阅读1、前沿AI-Agent2.0工具链深度科研系统教学方案贯通LLM、Claude Code、codex、OpenClaw、Hermes-meta、人机协同实现从文献挖掘到成果产出2、基于claude code、codex双AI协同高水平论文撰写与质量校准数据分析→论文初稿→交叉审稿全流程3、面向真实科研场景构建由Codex、Claude Code、OpenClaw、Hermes四位AI研究员组成的可迭代、可迁移的科研协作团队实战4、基于Claude Code与Codex双Agent协作的WebGIS全链路开发