随着全球气候的进一步恶化,强降雨的恶劣天气时有发生,导致山洪灾害的发生频率越来越高,加强山洪灾害防御工作,保障人民群众生命财产安全和山丘区经济社会发展,是一项非常必要和紧迫的工作。但目前基于GIS技术的山洪预警系统的预警展现效果单一、不够直观、对最终决策作用有限。有鉴于此,论文对山洪预警与推演系统的功能和前端界面进行了重新设计,引入了一种新颖的前端开发框架AngularJS,作为系统UI开发的基础;使用WebGIS技术框架搭建二、三维的Web GIS操作平台,并辅以业务应用,实现客户端的GIS操作和数据展示;此外,还增加了洪水推演计算模块,为山洪预警提供数据和决策对比。GIS客户端的地图实现方面,选择以ArcGIS Server和TerraGate作为发布符合OGC规范的空间地理信服务的平台,以Leaflet作为二维GIS客户端开发工具,以TerraExplorer作为三维GIS浏览器客户端,利用ActiveX控件和TerraExplorer JavaScript应用开发接口实现地图操作,以Browser/Server结构搭建WebGIS系统。客户端业务应用方面,运用AngularJS的核心特性与相关技术,例如:数据绑定、依赖注入、指令、异步请求、缓存等,设计客户端的操作流程过程、数据展示方式和功能。用户界面的功能模块中,部分的GIS功能被嵌入到了业务操作流程中,提供给用户数据信息的同时,展示地图的动态变化效果。数据信息的展示,则使用了大量的动态数据表格和曲线图,提供给用户直观、清晰的展现效果。客户端优化方面,通过研究AngularJS的内部运行机制,从控制监视器的复杂程度,网络事件的响应时间,检测模型变化的轮训机制等方面,设计AngularJS初始化的配置文件,JavaScript代码结构和使用环境,加快AngualrJS的运行效率,提高Web的响应速率。论文以AngularJS为系统UI开发的基础,整合二维、三维WebGIS的前端JavaScript库和成熟的用户界面框架,实现了GIS功能的同时,还嵌入了其他业务应用,构建了一个富客户端、高效的山洪预警与推演系统的前端应用。