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   //解析后的数据作为矢量数据源
ol.layer.Vector //矢量要素图层

动画模拟油粒子的漂移扩散

在完成上面的绘制之后再去做粒子漂移扩散的动画就变得很简单了，无非是图层按照一定时间间隔进行添加与移除。这里使用两种播放模式：
连续播放 前一时间的油粒子图层不移除继续后面时刻的绘制
逐步播放 每次只绘制一个时刻的油粒子分布情况，绘制下一时刻之前对前面图层进行移除

核心代码如下

         listener=setInterval(() => {
                if(step<=frequency)//frequency为总帧数
                {
                    if(apidataLayer)
                    {
                        map.removeLayer(apidataLayer);
                    }
                
                    vectorSource.addFeatures(geojsonFormat.readFeatures(timesData[step]));//解析矢量要素
                    apidataLayer = new ol.layer.Vector({
                        source: vectorSource,
                        //矢量要素样式
                        style: styleFunction
                    }); 
                    map.addLayer(apidataLayer);
                    step++;
                }
                else{
                    clearInterval(listener);//移除监听
                }
            }, 500);//绘制的时间间隔

结语

小功能比较简陋，有感兴趣的朋友留言可提供小Demo