AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图（迁徙图）

首先肯定是给出demo啦：
演示demo

直接到左侧选择框中选择View taxi flow里面随便选个日期

总体介绍

最近由于工作室项目需要做一个数据可视化平台，这个平台最终是交由国外人使用的。而国内的高德地图在国外是访问很慢，所以只能使用Google map进行实现（尝试过用AMap去实现，后面改回来）
回归主题：今天要讲的是迁徙图分别用两个平台进行实现

• AMap + eCharts.js 实现迁徙图
• Google map + D3.js 实现迁徙图

首先先来谈一下为什么都是在map上面进行数据可视化，但是实现迁徙图的技术不同（一个用eCharts、一个用d3）？！先来讲一下高德地图（AMap）和谷歌地图实现的技术区别吧（Google map）。

上面是高德地图，高德地图的实现是基于canvas进行实现的，显示效果都在这个画板上显示。接下来我们看一下谷歌地图是怎么实现的？

可以发现谷歌地图是由一张张图片拼接而成的，两者之间谁优谁劣不说，但是实现方式不同。正由于二者实现方式不同，所以飞线图实现方式也会有不同。

在github上面仅有开发echarts-amap中间插件（当然还有百度地图的echarts-bmap），并没有一个项目作为echarts和google map的中间件。这个项目给我的时间仅仅只有5天，所以不可能也没有能力去写这个插件。所以只能另外找资料实现google map + d3.js 飞线。

---

一、用echarts + amap 实现飞线，首先看一下效果图

这里有1000+条飞线数据，这是我随机找广州景区互相生成的假数据。因为既然今天讲到了两种技术实现飞线，那么顺带展示一下两个技术的性能区别，以1000条为例子。这个是怎么实现的呢？！我大概分成以下几步来进行分析：

• 引入echarts-amap插件，如果是非vue框架的，去找一下echarts-amap插件（我没有用，所以无法提供）。如果是vue框架的话，npm i echarts-amap --save-dev进行安装，然后在项目中require(‘eharts-amap’)就行了。
• 找到飞线所需的echarts配置
• 初始化echarts，然后进行设置series，就和普通的echarts图标的流程一样，以下我给出例子。

下面是整个流程需要的代码，拿走就可以了。

let mychart = this.$echarts.init($('#' + id)[0]), // 初始化echarts到目标块中
	mychart.serOption({
     amap: {
        zoom: 10,
        zooms: [3, 20],
        mapStyle: 'amap://styles/darkblue', //地图主题
        center: [113.25, 23.1], //中心点
        lang: 'en',
        resizeEnable: true
      },
      animation: false,
      series: []
	});

// 以下对象的一个例子
FlyLineOption: {
	name: 'name',
	lineColor: '#fff',
	fromName: 'fromName',
	toName: 'toName',
	fromLngLat: [123, 23],
	toLngLat: [123, 23],
	value: 1,
	symbolColor: '#000'
}

// 以下是echartsoption配置对象
{
      name: FlyLineOption.name,
      coordinateSystem: "amap",
      type: "lines",
      zlevel: 1,
      effect: {
        show: true,
        period: 6,
        trailLength: 0.7,
        color: "#fff",
        symbolSize: 3
      },
      lineStyle: {
        normal: {
          color: FlyLineOption.lineColor,
          width: 0,
          curveness: 0.2
        }
      },
      data: [
        {
          fromName: FlyLineOption.fromName,
          toName: FlyLineOption.toName,
          coords: [FlyLineOption.fromLngLat, FlyLineOption.toLngLat],
          value: FlyLineOption.value
        }
      ]
    },
    {
      name: FlyLineOption.name,
      coordinateSystem: "amap",
      type: "lines",
      zlevel: 2,
      symbol: ["none", "arrow"],
      symbolSize: 10,
      lineStyle: {
        normal: {
          color: FlyLineOption.lineColor,
          width: 1,
          opacity: 0.6,
          curveness: 0.2