如何开发炫酷动态地图

       在如今H5横行的时代,各种各样炫酷的可视化琳琅满目。随着数据可视化技术的流行,让数据重新焕发出新的生机。不得不承认d3.js所创建的高大上可视化效果让越来越多的人为之倾倒。国产的echarts也让国产图表数据可视化效果提升了不止一个逼格。那么使用GeoHey SDK就不能做出高大上的可视化动画效果了吗?答案肯定是啊。接下来小编就带你一起使用GeoHey的JavaScript SDK来做一个全球地震分布的可视化动画。

数据

  • 全球地震数据(2015.7.20~2016.4.12)
  • 在GeoHey数据上图产品中空间化地震数据,开启时态选项,时间按天分段。

对所有数据进行直接在地图上的静态可视化展示的效果如下图:

       不适用动态可视化,是不是感觉不到时间感,只能直观上了解到所有在一段时间内的全球所有的地震发生情况。无法看到一个随时间演变的地震分布。那么好了,制作动态的可视化效果此时就是大杀器了。

原理

       使用GeoHey JS SDK的点来标识地震发生的位置。点的半径代表震级大小。因为是动画,所以要先分帧(ps:动画原理如果不太清楚的同学,就需要自己恶补一下了),每一帧动画其实就是一幅静态的图像。绘制的大体步骤:

  • 数据分层,对我们的地震数据进行按照时间字段重分类
  • 对每一层数据绘制到地图上,对点要素进行颜色、半径等的渲染
  • 使用计时器进行不断刷新,控制动画的播放

选择底图

       底图的选择当然要来一个严肃而又高大上的,本人偏爱深色背景的地图。个人感觉深色背景的底图不仅能衬托出地震这个话题的严肃感,而且还有一种酷酷的感觉。当然同学们在做的时候,可以根据自己的喜好来在GeoHey的地图功能中选择自己喜欢的底图,里面有大量我们精心制作的地图供大家选择。

点要素配色

       用来标识震源位置的点的配色选择要与底图颜色形成对比,这样在视觉效果上能有一种明显的冲击感。选择黄色作为颜色选项。加上一点儿透明度和渐变效果,让点显示出来更加漂亮。

动画刷新

       动画的帧的切换,在浏览器端的选择有两种,一种是使用计时器setInterval方法,这种方式好处是可以随意的设置时间间隔,但是缺点也是非常明显的,就是对浏览器不是很友好,在浏览器最小化状态下依然会运行。无法让浏览器很好的发挥性能。还有一个是requestAnimateFrame,这是专门为动画设计的API,在浏览器最小化的时候会自动暂停动画,同时其刷新帧率会保持在60FPS,节约CPU资源。好了,最后的效果可以看录制的视频效果。

结论

       刚看到可视化动画视频后,被吓到了,怎么这么多地震,还让不让人活了!!!不过仔细看,大部分都是在海洋里发生的,而且通过之前的散点图,我们也可以看到,即使是发生在陆地,这些地震大部分震级很小,人体自身很难察觉。这下可以放心了~~~

结束语

       最后说一下,未来GeoHey还会提供和开放更多的炫酷可视化效果的接口和服务,各位数据可视化爱好者持续关注。

lzqGISer

继续阅读此作者的更多文章