技术栈:Vue3 + TypeScript + Element‑Plus + OpenLayers + Cesium + ECharts + WebGL + GLSL + GeoServer + PostGIS + Java + Nginx + ArcGIS
平台面向集团水电业务,构建二三维一体化无人机管控系统,实现空间数据服务管理、无人机任务全生命周期管理、机库设备实时监控、飞行航线规划、安全冲突评估、巡检成果可视化、多维统计分析。
1. 二三维地图模块:Cesium 承载三维地形场景,OpenLayers 负责二维业务地图;基于 WebGL/GLSL 自定义着色器,实现管线、航线、巡检区域特效渲染;对接 GeoServer 发布 WMTS/WFS 空间服务,PostGIS 存储管理点位、航线、巡检区域等空间矢量数据;兼容 ArcGIS 各类空间数据格式。
2. 无人机业务模块:机库站点树管理、无人机设备实时状态监控、机库视频预览;业务需求录入、航线航点编辑、空域 / 时间 / 航线三重安全评估;任务拆分、子任务冲突校验、设备指派下发;飞行任务列表管理,展示里程、时长、告警信息,查看图片视频巡检成果。
3. 可视化大屏模块:资源指标概览、任务多维度统计图表,任务类型、任务状态、飞行趋势、机库能力排行、隐患处置排行,支撑运维决策。
4. 后端服务:Java 提供业务接口,PostGIS 处理空间查询、空间计算;Nginx 做反向代理、静态资源、地图服务代理。
前后端分离架构,前端 Vue3+TypeScript+Element‑Plus 搭建业务与大屏页面;
- GIS 部分:Cesium 实现三维地形、航线航点绘制;OpenLayers 实现二维矢量编辑;使用 WebGL + GLSL 编写自定义着色器,实现航线、巡检区域特效;对接 GeoServer WMTS/WFS 服务,做图层管理、要素查询;兼容 ArcGIS 数据;
- 业务组件:开发任务列表、任务拆分表单、安全评估弹窗、机库监控面板;ECharts 实现环形图、折线图、排行榜各类统计图表;实现地图与业务表单双向联动;
- 后端:Java 开发业务接口,PostGIS 完成空间计算、矢量数据存储;Nginx 实现反向代理、静态资源托管、地图服务转发。
重点解决:大量航线要素渲染性能问题,GLSL 着色器优化图元渲染;PostGIS 空间查询性能优化;二三维地图图层同步;海量任务数据分页加载,保障大屏流畅运行。