赞
踩
百度的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个扩散圆是同一个要素,但是为了方便记录关键帧每一轮的开始时间,每一个扩散圆都用一个要素来表示,通过要素的自定义属性来记录关键帧每一轮开始渲染的时间。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。