Skip to content

Adamo1209/WebGIS-React-Python

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WebGIS实验:React前端+PyWPS服务层+FastAPI与Flask后端

一、项目架构图

系统采用经典的前后端分离架构模式,后端服务层基于Flask、FastAPI微框架构建,通过PyWPS扩展实现符合OGC WPS规范的地理处理服务(WPS)接口。服务核心由多个独立的空间处理进程组成,包括缓冲区分析、NDVI计算、林下地形提取等算法模块,这些进程通过统一的服务注册机制接入PyWPS引擎。数据存储层采用本地文件系统管理上传的地理空间数据,处理结果以文件形式持久化到指定输出目录。前端呈现层使用React框架结合Vite构建工具开发,利用CesiumJS引擎实现地理数据可视化,通过Material-UI(MUI)组件库构建现代化的用户界面。前后端通信采用JSON与XML格式WPS请求相结合的方式,支持矢量数和栅格处理的请求。系统还包含基于FastAPI微框架搭建的服务,此服务主要用于Geoserver的WMS资源管理,形成主处理服务与辅助服务的协同架构。整个架构体现了模块化设计思想,各功能组件职责清晰,通过标准化接口实现集成。

二、PyWPS后端

后端实现以Flask微框架为基础框架,通过PyWPS构建地理处理服务(WPS)核心。主程序文件定义了完整的服务路由体系,包括WPS服务入口、静态文件访问和文件上传接口。服务初始化阶段加载配置参数文件(pywps.cfg),注册FeatureCount、Buffer、CalculateNDVI等十个空间处理进程,每个进程对应独立的功能模块。文件上传接口采用multipart/form-data格式接收客户端提交的地理空间数据,存储到预设的静态数据目录并提供HTTP访问路径。WPS服务路由处理XML格式以执行地理处理服务请求,解析输入参数后调用对应的空间处理算法,算法执行完成后返回包含结果引用(或结果)的XML响应。特别针对栅格数据处理,实现了基于rasterio库的NDVI计算进程,支持多波段影像的代数运算;矢量处理方面开发了基于Shapely几何引擎的缓冲区分析进程,可处理GML格式的空间数据。所有处理进程均遵循PyWPS抽象基类规范,统一了输入输出参数定义和执行逻辑,确保服务接口的标准化。

三、React + MUI + Cesium前端

前端采用React函数式组件范式构建单页面应用(SPA),通过Vite实现快速开发与热更新。主应用组件集成菜单栏、资源列表和Cesium地图三大核心区域,形成统一的用户交互空间。菜单系统使用Material-UI的AppBar和Menu组件构建,地理处理菜单包含缓冲区、NDVI计算和林下地形提取三个子项,每项触发对应的模态对话框。处理组件采用统一的交互模式:文件选择、参数输入、异步提交和结果展示。缓冲区处理组件支持本地上传GML文件并指定缓冲距离,NDVI计算组件允许分别上传本地红波段和近红外波段影像,林下地形提取组件处理输入的本地CSV格式的数据。资源管理功能通过Tab页签区分图层管理与资源管理,支持动态添加WMS服务并选择图层加载(基于FastAPI实现此服务)。地图渲染使用Cesium.Viewer创建三维地球场景,集成天地图影像与标注服务作为底图,通过WebMapServiceImageryProvider加载外部WMS图层。地理处理结果组件根据数据类型呈现差异化表现,矢量结果直接渲染到地图,栅格结果提供下载链接及下载按钮,CSV数据以表格形式内容预览并提供下载按钮。所有异步操作均包含加载状态指示和错误处理机制,确保用户体验的流畅性。

四、效果图

1. 使用Postman测试PyWPS后端结果

通过Postman工具对部署的PyWPS服务进行系统性接口测试。

针对NDVI计算服务,构造符合WPS标准的XML请求体,包含两个输入参数:红波段和近红外波段的影像文件引用。测试请求发送至本地5000端点的/wps路由,服务端解析XML后调用CalculateNDVI进程,利用rasterio库读取影像数据执行波段运算,生成NDVI影像并存储到outputs目录。响应返回标准的ExecuteResponse XML文档,包含处理状态信息和结果文件的HTTP引用地址,响应时间约4.55秒,处理的结果数据格式为GeoTIFF。

缓冲区服务测试采用类似流程,提交GML格式的点要素数据和缓冲距离参数,进程将矢量数据解析为Shapely几何对象,执行buffer操作后转回GeoJSON格式,响应在194毫秒内返回包含FeatureCollection的JSON结果。

林下地形提取服务处理CSV格式的数据,执行后端Windows PE文件(exe文件)后返回CSV格式的结果文件,处理耗时约44秒。所有测试均验证服务接口符合OGC规范,输入输出参数定义准确,处理逻辑正确执行,结果文件可通过HTTP直接访问。

2. 项目网站结果

最终构建的GeoDEV系统实现了较为完整的WebGIS平台功能。主界面采用深色主题设计,顶部菜单栏集成地理处理、数据管理和系统说明三大模块。Cesium地球占据主要视图区域,初始视角位于中国上空。地理处理菜单展开后显示三个核心功能项,点击后弹出模态框引导用户完成数据处理流程。

缓冲区分析允许用户上传GML文件并设置缓冲距离,处理结果以GeoJSON形式叠加到地图,面要素以半透明渲染。

NDVI计算界面支持双波段影像上传,处理完成后弹出结果展示对话框,由于浏览器对GeoTIFF预览的限制,系统提供直接下载功能并显示文件详细信息。

林下地形提取处理CSV数据后展示前10行数据预览,而且用户可下载完整结果文件。 数据管理模块支持添加WMS服务资源,通过输入服务地址和别名完成注册,在资源列表中点击可查看可用图层并选择性加载到地图。图层列表显示当前所有加载的地图层,通过复选框控制可见性,支持移除操作。

整个系统界面响应迅速,地图交互流畅,处理状态通过加载动画和提示信息清晰反馈,实现了地理空间数据从上传到处理再到可视化的完整闭环。

About

WebGIS实验:React前端+PyWPS服务层+FastAPI与Flask后端

Resources

License

Stars

Watchers

Forks

Contributors