OpenLayers 6 实现百度echarts风格的“空气质量”散点图

百度的echarts（现在被Apache收编了）所包含的可视化样式非常的丰富多彩，是众多可视化项目必选的框架之一。

 

除了直方图等各种图标之外，echarts也有一些基于地图（当然是百度地图）的可视化功能，还有大神将OpenLayers和echarts结合起来做成了现成的组件供调用。但是在实际使用中，我发现echarts地图应用的交互体验其实并不是很好，图形化数据在地图层之上像是“挂”上去的，在拖动地图的时候，会出现错位：

 

于是我萌生了一个自己实现这个散点图动画效果的想法。通过分析，最终大致上实现了这个散点图(没有做交互功能)，并且性能还不错(gif图帧率有点低，实际还要流畅一些)：


 

分析：

OpenLayers渲染点要素是很容易完成的，但是echarts这个动画的效果不大容易做。
通过观察，发现每个带动画效果的点向外扩散的圈只有三个，总共有5*3=15个圆形渲染的点要素，所以感觉OpenLayers的性能应该跟得上。
OpenLayers官方实例有一个类似的动画效果，是利用render机制实现的，可以拿来借鉴。

实现：

首先准备数据，可以在echarts网站上拷贝出来，这个就不说了。

然后把基本的地图搭出来，数据读取出来并做一下初步的处理。

import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Point from 'ol/geom/Point';
import Feature from 'ol/Feature';
import { fromLonLat } from 'ol/proj';
import { getVectorContext } from 'ol/render';
import {Style, Stroke, Fill, Circle as CircleStyle} from 'ol/style';
import data from './data/scatter.json'
import { easeOut } from 'ol/easing'
 
let tileLayer = new TileLayer({
  source: new OSM()
})
let map = new Map({
  target: 'map',
  layers: [
    tileLayer
  ],
  view: new View({
    center: [11936406.337013, 3786384.633134],
    zoom: 5
  })
});
 
var poi = []
data.data.forEach((item, index) => {
  item.coord = data.coord[item.name]
  poi.push(new Feature(new Point(fromLonLat(item.coord))))
  poi[index].set('name', item.name)
  poi[index].set('value', item.value)
  var bdStyle = new Style({
    image: new CircleStyle({
      fill: new Fill({
        color: [128, 0, 128]
      }),
      radius: item.value / 20
    }),
  })
  poi[index].setStyle(bdStyle)
})
poi.sort(function (a, b) {
  return b.get('value') - a.get('value');
})

这个扩散圆圈的动画不妨来分析一下：如图所示，每一组动画都有3-4个不同半径和透明度的圆环组成，随着时间动态改变半径和透明度这两个属性，形成了“波动”的动画。所以要实现这种效果，需要在同一个点位渲染3-4个这样的圆环，并通过render控制实现关键帧(每一次渲染确定的半径和透明度圆环暂时叫做一个关键帧)的不断变化，最终形成动画效果。

接着又要祭出render大法了。

首先定义几个全局变量，用于控制动画：

var duration = 2000;
var n=3
var flashGeom=new Array(5*n);

每次动画周期设置为2秒，然后扩散圆的数量为3个一组，声明一个5*n大小的数组，准备用于存放渲染扩散圆的要素。虽然很明显同一组的3个扩散圆是同一个要素，但是为了方便记录关键帧每一轮的开始时间，每一个扩散圆都用一个要素来表示，通过要素的自定义属性来记录关键帧每一轮开始渲染的时间。

更多请见：http://www.mark-to-win.com/tutorial/175099.html