[发布]看天气WeatherCan V1.0 ---气象数据分析系统web版

news/2024/11/16 21:50:00/

疫情封闭在家,把这两年的技术整理了一下,做了一套比较完整的气象数据分析处理系统:WeatherCan。发布出来大家试用。程序还在开发中,功能很不完善,纯业余兴趣开发,有建议或想参与开发的可跟我联系:hz_gjf@163.com

  

仅支持chrome、Safari浏览器。windows、android、iso兼容。(手机屏幕太小,能用但不好用)

主界面:

WeatherCan,其实就是FreeMicaps的web版。

一、前言

多年前,曾写了FreeMicaps,C#开发,部分开源。见:FreeMicaps更新(2013.7.30):FreeMicaps V0.3.0_老郭的专栏-CSDN博客

科技发展,气象数据源也不断变化,到2017年,气象日常业务数据基本上全改为了mdfs和cimiss接口提供,原文件型数据已彻底淘汰,FreeMicaps因使用文件型数据基本上没有法用了。原计划将FreeMicaps数据源接入气象部门的cimiss平台,但没想到新的Micaps4.0的并未使用cimiss,而是推出了全新的分布式文件系统mdfs,加之cimiss数据服务的确速度比较慢,做实时系统不太适应。FreeMicaps继续开发一段时间后彻底放弃了。

随着html5的普及,做web版气象数据分析系统成为了可能。一直以来都有强烈的欲望将FreeMicaps在web端实现,早些年Flash流行的时候用Flex实现过一部分功能,后来借助html5的canvas,还有wpf,实现了基本的webgis(中间还用opengl实现过)。但技术更新很快,基于瓦片图的webgis大为流行,速度、效果堪称完美。不再重新发明轮子了,直接用成熟的开源webgis框架,气象数据使用canvas绘制叠加,开发容易了不少。

用过Micaps和FreeMicaps的应该很容易上手,功能、界面、用法基本与C/S版一致,速度嘛毕竟是脚本语言实现,要慢一些,但完全能承受,程序绝大部分功能是用十年前的老机上完成的,如果你感觉速度太慢,那....你的电脑该换了。

二、气象数据:

国内气象部门的数据格式基本上是每年都在变,没有稳定的数据源开发无从下手。文件型Micaps格式数据应该是彻底淘汰了(WeatherCan前期版本实现了几种Micaps格式数据的支持),目前cimiss数据是官方标准,但速度慢,mdfs数据专供Micaps4,格式和协议复杂,今年部署的气象大数据云平台还不知道会怎么样。算了,既然前端数据交换只能用http协议,那就彻底将数据源抽象出来,传输用http协议,有什么数据就实现相应的解析接口。

WeatherCan对数据接口进行了抽象,基于http实现了cimiss和mdfs两种数据的传输和解析,且可以通过插件根据更多数据类型进行扩充。由于cimiss数据是几乎是明文,受制于数据保密要求,怕别有用心的人抓取数据,暂不提供访问。目前实现了:

  1. 地面填图数据
  2. 高空填图数据
  3. 站点数据
  4. 格点数据
  5. 格点矢量数据
  6. 交互矢量数据(不完全支持)
  7. 图像数据(卫星、雷达互联网抓取)

因缺乏相关资料,mdfs数据的读取解析十分困难,目前仅有国家气象中心的《MICAPS4网络数据存储及传输格式》可参考,数据格式说明仅5页,初次学习真是不知所云,最后只能使用二进制编辑器逐个对照,目前文档上所涉及的数据解析已经全部实现。

需要声明的是,气象数据目前并不是完全公开的,程序里已对非全球交换数据进行屏蔽处理,但还不确定现提供的数据全都可以完全开放,如有问题,请联系我删除。对于地图数据,使用天地图、高德等官方地图,斗胆留了两个国外地图备用,貌似没有“问题地图”,但如果不合法,立即删除。

二、服务器端("无后端")

因业余开发条件所限,没有专用服务器,即使有专用服务器,也没能力运维,所以程序所有功能都使用JavaScript(typescript)编写,纯前端开发。程序直接对接气象部门的mdfs和cimiss数据服务。甚至本地直接打开html文件都完全正常运行!

(这里说的“无后端”并非真正无后端,而是没有专用后端服务,后端使用了现有的专业团队运维的数据服务接口)

完全使用JavaScript实现这样一个系统难度很大,包括数据解析、绘图、等值线分析、流线分析、图像投影、图像换调色板等功能全用JavaScript实现了一遍,好在这些功能以前基本上都用C#做过,这次只是用JavaScript重写。

无服务器带来的另一个好处是省去了运维,按以前开发app时的经验,只要前端写好,基本上就不用管了,无任何运维压力。

三、关于UI(无美工)

实话说,我对于UI、美工,的确不在行,所以从开始就是找成熟的UI框架,前些年使用EasyUI,因为它不仅使用css,而且提供很完善的js代码控制,对于擅长编码的人来说,用起来很顺手。最近开发中,看着基于EasyUI的界面,却有些受不了,太土了,换吧!所幸WeatherCan基本上单页面程序,涉及UI部分不多。

顺手找到了LayUI,号称国内用的最多的UI框架,等做的差不多了才发现一个大坑,导航菜单只支持一级菜单!没办法,硬着头皮自己实现了一个多重菜单。而且它提供的代码控制部分太少,很多地方需要用html拼接,打算放弃它了。介于这个原因,程序里涉及到弹出层等涉及界面的部分基本上都没做,打算换了后再做。

网页UI这东西,简直不是人能干的。各种奇技淫巧的css样式,好不容易在chrome上调好,换个浏览器,乱了,调好,另一个浏览器又不兼容。就这个简单界面,差不多三分之一的时间都在和它斗争,最后只有放弃ie、foxfire。但支持chrome、safari还是需要的,因为还想让它能在平板和智能电视上运行。

关于美工,没有一定天赋是不行的,越调越丑,索性简单化,颜色就用黑白灰,略加一点彩色提醒,字体就用一种,简单有简单的美。

本打算支持更换主题功能,但对UI,我还是有些胆怯。看了下Micaps4的换主题功能,仅主题文件夹下就700多个文件,对各种数据的颜色、字体、样式、调色板都要重新进行定义,可见一个简单的主题功能需要的工作量。放弃了。

四、功能

关于功能,基本与Micaps一致,各类气象数据在gis上的分析展示,不多说,大家上手一试便知。

本程序是针对气象专业人员的数据分析工具,不提供面向大众的天气预报结果。但不排除后面增加这些功能。

与客户端相比,本程序最大优点是在浏览器上运行,不需要安装任何软件插件。打开网站就能用,但要使用比较高端复杂的功能,还是装Micaps吧。

五、依赖

程序使用了leaflet,protobuf,axios,moment,layui,html2canvas等开源库,对依赖的代码是直接引用,以插件形式扩充和完善原有功能,没有对开源代码进行任何修改。站在巨人的肩膀上,必须按照开源协议进行声明,向无私的开源作者致敬。

关于webgis框架,有人问为什么不用百度、高德等国产gis框架?主要是leaflet是开源的,具有完美的开发文档、非常好的代码结构,无依赖,有无数人在它上做插件式开发。不过,本程序中webgis框架只是一个展示平台,绘图什么的都是基于canvas的,画完放进gis里而已,更换其它成熟的开源webgis框架做,难度也不是太大。

关于百度地图,其实挺好,特别是可以自定义地图主题,非常适合做数据展示,但一般只能在它上面做应用,很难从较底层进行扩展,如果换它,不清楚坑有多大。

开发依赖,使用webpack打包,使用babel进行es6转换,部分使用了typescript......

对于前端开发,我也是新手,以前只是简单使用,觉得挺简单,越用越才越感到水不是一般的深...,习惯了强类型语言,对于弱类型脚本语言,各种不适应,直到后面开发部分模块试了下typescript,总算找到了感觉,有些回到了C#。但项目已经写了100多个js文件,超过200个类,近30000行代码,想换已经来不及了。(代码中,各种版本js、typescript各种混用,自己都点看不下去,所幸有强大的webpack和插件,各种代码统一转换为es5,打包后整个项目不到6M)。

六、截图

1、用户交互绘图

2、地面综合图

3、地面单要素填图

4、高空单要素填图

5、等值线图

6、格点等值线分析图

7、等值线填色

8、换调色板

9、格点转图像+转投影

10、卫星云图

11、数值模式

12、流线

13、降水量

14、天气现象

15、雷达拼图

16、模式叠加

17、天气图快照

18、打印


http://www.ppmy.cn/news/201740.html

相关文章

C++天气预报小软件

前言:这个东西是八月份自己捣鼓着玩的 现记录下 需要解决的问题:1.选择对应的接口(稳定,最好使用官方提供的)2.获取数据2.对返回数据的处理 问题1:天气接口的获取 >通过城市名 来获取当前城市的温度以…

科普系列--天气气象的监测和设备

天气预报的各种数据监测, 监测设备的种类和说明等信息。 深圳市气象局(台)深圳市气象局门户网站为您提供权威、及时、准确的深圳天气预警、天气预报、天气实况、台风路径、深圳气候等信息服务,为深圳及其周边城市的生产生活提供全…

【QT开发专题-天气预报】14. 请求天气数据

本专栏将会在未来4个月内,完成以下几个 Qt 项目: 《天气预报》《文本编辑器》《俄罗斯方块》《绘图板》《网络聊天室》《串口助手》完成时间预计在 2022-12-31,文章数目在50篇左右,更新完毕之后,价格恢复到 ¥299 专栏优势: 每个项目都是从零新建工程开始良好的代码风格…

数值天气预报

The Quiet Revolution of Numerical Weather Prediction Peter Bauer, Alan Thorpe & Gilbert Brunet http://www.nature.com/nature/journal/v525/n7567/full/nature14956.html 摘要 数值天气预报的发展如同一次寂静革命(译注1),来自…

Qt 天气预报 天气查询 (代码附上)

参考链接:https://blog.csdn.net/fangye945a/article/details/84933234 QT获取天气信息一般都是通过调用天气服务器的接口来获取的,而获取天气的接口有很多,大家可以自行在网上查找。 源码找到了,写的随意了点,别建议…

Android开源天气预报app - 清新小天气

LittleFreshWeather 源码github地址 注意咯~~ 最新版已适配最新和风天气接口,可以接着用啦 ^^ 这是一款简洁的天气预报app–清新小天气,它能够支持国内绝大多数城市,提供包含实时天气、七天预报、实时气象信息及生活指数等预报信息。。。广…

天气预报,基于ESP8266,彩屏显示

成品展示: 功能介绍: 【1】联网获取心知天气下发的当日天气信息,如:温度、湿度、风向、风力等级等; 【2】自带RTC时钟,支持人机交互时间修改; 【3】支持2.4Gwifi连接,支持更换地点…

QT天气预报

项目介绍 本项目基于QT平台开发的一款天气预报的应用,效果图如下: 1、 有城市的天气预报,有背景图、控件半透明化。 2、 显示日期,城市名称,当天的天气预报 3、 当天天气预报的详细数据 4、 该天的一些生活指数&…