EC模式数值预报可视化系统设计

1、    ec模式数值预报可视化系统设计    王程程+吴天亭+范玉鑫摘要 本文利用javascript技术，设计了一款欧洲细网格数据气象大数据可视化系统，它是一个以中国气象局下发的ec模式数据为数据源的各主要气象要素的大数据可视化系统。jquery作为程序的异步处理函数库，angular.js作为mvc函数库。关键词 ec模式；jquery；大数据；可视化；气象；系统设计p456.7 a 1007-5739（2017）10-0198-02随着气象事业的发展，数据预报的精度越来越准确，特别是在气象预报当中的ec模式数据精度更是越来越高，但是一直没有一个直观

2、的可视化系统，可以帮助预报员在宏观上对数值预报结果有一个直观的分析。本文研究的ec模式数值预报可视化系统解决了这个问题。无论是数据量较小的ec粗网格数据还是数据量较大的ec细网格数据，本系统都可以直观利用网页的动画效果实现各要素的全球化展示，特别是风场数据在可视化当中风的强度和风的速度，准确而直观。在吉林省的气象预报业务当中得到了广泛应用。1 气象大数据可视化现状枯燥的数据在气象预报当中经常使用，很早就有气象人员提出了对气象要素进行可视化研究，但是一般局限于实时数据和历史数据。对于在预报当中非常有用的数值预报数据的可视化一直研究较少，特别是对于ec模式可视化研究，目前国内还不多见。关于历史数据

3、可视化研究，目前英国的气象工作者走在前列，特别是历史数据中的温度要素，英国气象开发者开发了一个关于英国气象温度历史的网页，在该网页上不仅能够用可视化的方式展示19112012年整个气象史的数据情况，还可以对英国这些年的温度情况进行比较和统计分析。对于英国曾经在哪些年出现过气象灾害也会标注，通过可视化的温度数据也利于找到温度和气象灾害的关系。100年的历史仅仅用一张可交互的d3图形就清晰明了地展现出来（图1）。2 ec模式可视化系统总体设计数据来源是中国气象局卫星下发的ec粗网格和ec细网格数据，通过java程序对ec数据进行格式处理，处理成前端javascript可以使用的json格式的数据。

4、然后利用html5技术在网页上显示风场、气压、湿度、温度等要素，并且可以将温度和风场、气象和风场结合到一起显示，真正实现了可视化，便于预报员更好地分析未来的天气情况。要素的可视化是以风场动画图与其他要素的色斑图结合为主，并且可以通过时间线做多看72 h后的数值预报情况。世界地图通过将时间地图的shp数据转化为topojson数据，然后通过网页将世界地图放在地球上，这样可视化过程更为直观（图2）。3 html5和javascript相关技术html（hypertext mark-up language）是网页当中的核心部分，旧有的html技术虽然在互联网上还在广泛使用，但是对于现在来说在技术上已

5、经有些不足，无论是cpu占有率还是对插件和图像的支持都已落后于时代，所以在2006年提出了html5对html的升级版，相较之前无论是网页的速度还是对多媒体的支持都有了质的飞跃，所以在新研究開发的网页应用上都已经开始普遍使用html5技术。html5和html比较再也不用使用flash了，新的html5支持声音标签和视频标签。因为不再使用flash，html5在移动端也更加方便，甚至服务器上的程序不用更改就直接可以在手机移动端运行。利用html5结合javascript处理矢量图形非常方便，矢量图形的优点是在图形放大或者缩小时不会影响图形的清晰度。这个优点使气象数据的可视化变得方便和友好。并且

6、利用javascript和html5的接口，还有很多封装好的插件供程序使用，开发起来非常方便1-2。3.1 jqueryjquery是使用javascript开发的一个接口。jquery在开发过程中能更便捷地处理html的文档，由于它的功能强大，几乎在所有的前端开发当中都要使用javascript的这个函数库。jquery使用简单，而且无论是动画还是css操作还是异步处理都能更加方便地实现。嵌入在html页面的里的javascript表达式或语句，不管是作为html元素的特性，还是嵌入在页面中的脚本javascript，都是不正确的。这样做的理由主要基于低耦合，或者叫作分离的思想，这完全雷同于

7、在html中把样式通过css从结构中分离出来。对于css样式的应用，所带来的好处，在此不再赘叙3-4。不管是基于样式还是行为，它们所实现的是与结构的分离，最显而易见的好处即是可以通过某一语句实现对所选定元素的样式或行为的统一，而无需针对某一个逐个改变。3.2 mvc在web开发中框架的选择至关重要，因为框架决定着开发的难度和软件维护的成本。本文选择了在github上开源的angularjs作为软件开发的mvc框架。angularjs是一个由谷歌开发的mvc框架，虽然是使用的javascript但是不依赖于任何其他的javascript框架。因为本系统开发过程遵循模块化开发的原则，所以mvc框架

8、必不可少，只有这样，以后的扩展和维护才更加方便。angular.js的优点就是模块功能强大，自带丰富的angular.js指令，是一个比较完善的前mvc端框架，包含模板、数据双向绑定、路由、模块化、服务、过滤器、依赖注入等所有功能。唯一的缺点就是代码体积略大，但是经过本系统测试，并不影响前端可视化速度。3.3 后台搭建本系统的后台使用现在前端开发使用比较广泛的node.js，node.js的优点是本身就是用javascript开发的，所以在html5和javascript支撑的系统当中，既能保持很好的稳定性，又能保持程序运行有较好的速度。而且node.js本身功能也十分强大，便于程序在开发过程

9、中的调试和程序开发结束后的测试。4 结语作为轻量级的前端网页可视化程序，无论是异步处理还是mvc都考虑到后，对于以后的程序扩展非常方便。当增加资料类型或者要素类型时，只要尊重本系统模块化开发的规则，就能在可视化的技术上走得更远。因为本系统支持的ec模式数据是格点化数据，如果是实时或者历史的站点数据，可以通过插值成格点数据然后加入到本程序的模块当中，所以本系统不只是一个ec模式的可视化系统，随着研究的深入，也将是一个气象综合数据的可视化系统。5 参考文献1 钟强.node.js平台下web前端架构的研究j.无线互联科技，2013（12）：124.2 巴特尔.基于nodejs的理财应用的设计与实现d.长春：吉林大学，201