OpenLayers4结合setInterval函数实现简单的地图动画----以溢油粒子的漂移扩散为例

开发测试环境
Chrome 73
OpenLayers版本：v4.4.2

前言

随着浏览器对图形绘制功能的支持越来越好，越来越多的可视化直接在前端进行。SVG、Canvas、WebGL给前端可视化带来了无限可能，这也是我痴迷于此的原因。
废话少说，老师让帮着写一下溢油粒子漂移扩散的动画，之前的方法是在后端可视化之后对于结果进行切片，然后将切片加载到浏览器进行显示。这里改成使用Html5 Canvas进行绘制，由于OpenLayers对于矢量要素的绘制进行了封装提供相应的API，省事起见，我们就利用其进行可视化（利用原生的Canvas对要素进行基于地图的绘制近期会写）。

油粒子数据的组织

我认为可视化的核心还是数据，各种可视化的方法只是外在的表现手段，一个不了解数据的人做不好可视化。好的数据组织模式让你的可视化过程做到事倍功半，这里考虑到要将数据绘制在地图上，Openlayers又提供了GeoJSON格式数据解析渲染的API，考虑将数据组织成GeoJSON格式。
GeoJSON标准

将油粒子绘制在地图上

先不考虑动画效果，首先要实现将一个时刻的油粒子的分布绘制在地图上,这里的绘制操作利用OpenLayers提供的API就变的非常简单，这里主要用到下面几个API,无非就是几步：解析矢量数据加入矢量数据源、矢量数据源创建矢量图层、设置矢量要素样式、将矢量图层加入地图对象

ol.format.GeoJSON   //对GeoJSON对象进行解析
ol.source.Vector   //解析后的数据作