可视化之Earth NullSchool

      上两篇咱们分别介绍了《Berkeley Earth》和《AQICN》两个网站，今天来看一下Earth NullSchool。

      这个网站的特点是风向图，以前有一篇可视化之风向图，曾经提到过这个网站，也详细介绍了风向图的技术实现原理。今天针对这个网站，再详细的介绍一下。一样，在公众号中回复“worldwind”，会提供该网站的源码Demo。

      如上是该网站的一个动图效果，有兴趣的能够访问网站了解一个大概。做者在github上公布了本身的源码(和网站代码略有不一样)，气象数据来自NCEP，记得上周介绍的AQICN美国数据也是来自该网站，查了一下，该组织应该算是美国的国家气象局：National Centers for Environmental Prediction。

      吸收上一篇的教训，直入主题。固然，想要了解风图原理的，能够看看以前写的可视化之风向图，须要对风图的数据和思路有必定了解，否则本文在理解上可能会有点吃力。

      如上是具体数据列表，Mode里显示支持Air(风图)，Ocean(洋流)，Chem(化学物)，Particulates(颗粒物)，Height指向不一样高度，Overlay表示叠加图层，好比风图+温度，洋流+浪高等，Control为时间轴控件，好比历史数据。点击查看不一样的数据效果，不难找到对应数据的url的规范。

      气象数据采用的是epak格式，二进制流，代码中提供了数据规范。以下是数据规范和对应的JSON属性：

      从converter属性，该数据来自netcdf，而这个格式在以前的Berkeley Earth中也提到过，而原始数据是grib形式，以个人理解，里面应该有一个grib2netcdf2epak的过程，都提供了对应的转换工具。至于为什么绕圈，我搜索了一下大概，知道一个大概优劣，但貌似都不绝对，在此就不妄论了。

      对我我的而言，花时间最久的是如何以localhost方式获取该数据，由于它是HTTPS服务，作了Referer限制，对于我这个Java小白，绝对算得上是一个难题，不过反过来想，这不就是上天给我一个机会，让我学JavaWeb吗。花了很多时间，也请教了研发两位牛人，终于在Jetty+Servlet下实现了一个Java版的Proxy，是本次最有收获的地方，代码一并奉上，见笑。

      有了本地代理服务，对源码进行简单的修改，让其走代理，就实现了localhost的部署，两个参数:url和type。

      在地图初始化的时候，先构建了全球格网，是一个2：1的矩形，下面是通过投影后的球状格网效果，主要用于后续获取任意点在地球上的位置，进而获取对应的风速(X,Y)，该方法提供了临近插值和双线性插值两种方式，该过程封装在rectangularGrid函数中。

      接着，开始请求气象数据数据，解析过程封装在decodeEpak函数中：获取对应的JSON属性，全球风图是720*360大小，精度为0.5℃，每一个点有X和Y两个份量，在X和Y方向的向量，米单位。

      万事俱备只欠东风——起风。这里有两点，第一，平移缩放时没有任何效果的，这是由于当bounds变化时，须要根据更新后的区域从新插值，计算量比较大，而插值的价值是精度上有保证，清晰，因此这是一个取舍。第二，不只有一个风图，还有一个栅格底图，下图蓝绿色效果图，仔细看，和风的走势是吻合的，同时鼠标点击时，能获取对应位置的属性值。

      对风场向量的插值过程是在interpolateField方式中实现的，这里逻辑以下：1:建立当前窗口对应的掩膜，如上图，所有区域都是黑色(0,0,0,0)，只有地球对应的区域颜色为(255, 0, 0, 1) ；2随机生成风粒子，每个粒子有五个属性，位置(XY),风速(UV)和生命周期(t)；3相似一条扫描线，遍历可视区域的每一像素点，经过掩膜判断是否在有效范围内，若是该点有效，则获取其对应的经纬度；4以全球网格为索引，获取该点对应的风场Field，保存到对应的向量场wind field，用于后面的风图效果；5根据风场的强度，对应颜色表设置当前点的颜色强度，保存到mask掩膜中，这样mask在更新时用来判断区域是否可见，更新后则用于显示地图效果，也算是一图两用。如上是初始化的核心部分，里面有不少小的细节，好比风向，在平面上，XY两个向量是直线，而在球面上，要调整为对应的经纬度，是曲线(distortion函数)。

      接着，每一帧根据风图的原理，实时更新：风粒子的当前位置，根据当前位置的风速获取下一帧的位置，数据更新(createField::field.move)后则开始渲染(animate.draw),这部分在风向图原理里面有很清楚的介绍，思路彻底一致，这里只是把关键点和对应函数实现对应起来，关键仍是要思路，若是有意愿不妨本身调试，便一目了然。

      至于鼠标点击显示当前状态，代码我没有看，不过上述过程当中已经提供了位置转换，数据存储，很容易获取映射关系。

      技术内容介绍完毕。

      下一篇会抛开技术，从产品，数据，以及可视化效果等非技术层面上，和你们分享一下我对这三个网站的对比和想法。想要源码的同窗请回复“worldwind”~