编程VS工具，Html5地图你选谁？

我们进行数据分析时，为了让数据分析的结果更好的呈现，我们会选择数据可视化。

地图可视化实现的工具有多种，我们今天就单挑两个一个是编程，一个是可以画Html5地图的可视化工具，这里拿亿信华辰的ABI为例子。

编程：

看看上海的地铁图。

文本提示

首先，把鼠标移到站点、路段、图标等位置，都会有文本提示弹出。

站点图标变化

当鼠标移到站点上时，站点图标做了放大效果，这个效果很贴心，

实现的方法也很简便，就是在注册站点矢量图形时，加入了动态判断。以下注册普通站点矢量图形的代码：

twaver.Util.registerImage('station',{

 w: linkWidth*1.6,

 h: linkWidth*1.6,

 v: function (data, view) {

     var result = [];

     if(data.getClient('focus')){

         result.push({                shape: 'circle',

             r: linkWidth*0.7,

             lineColor:  data.getClient('lineColor'),

             lineWidth: linkWidth*0.2,

             fill: 'white',

         });            result.push({                shape: 'circle',

             r: linkWidth*0.2,

             fill:  data.getClient('lineColor'),

         });        }else{

         result.push({                shape: 'circle',

             r: linkWidth*0.6,

             lineColor: data.getClient('lineColor'),

             lineWidth: linkWidth*0.2,

             fill: 'white',

         });        }        return result;

 }});

动画效果

从上图还可以看到，在换乘站图标中，除了增加了颜色，还实现了旋转效果。。 来看代码：

1.    twaver.Util.registerImage('rotateArrow', {

2.        w: 124,

3.        h: 124,

4.        v: [{

5.            shape: 'vector',

6.            name: 'doubleArrow',

7.            rotate: 360,

8.            animate: [{

9.                attr: 'rotate',

10.                to: 0,

11.                dur: 2000,

12.                reverse: false,

13.                repeat: Number.POSITIVE_INFINITY

14.            }]

15.        }]

16.    });

亿信ABI

主干线图，世界航线线路一目了然~

△主干线图

标点地图，如对去过的城市进行标点着重突出。

△标点地图

渲染地图，可以看出投放资金的分布情况。

△资金投放分布图

流向图，清晰的看出从各个地区流向北京的情况。

△流向地图

疫情大屏

可能你没想到，使用亿信ABI只需要简单的托拉拽就可以！不需要大串大串的代码就能轻松实现！还等什么呢！你也可以去体验！