可视化篇：mapbox + echarts-gl 展示血脉交通

preface
好久没跟新，怕是这个爱好都要被繁忙的工作给消磨掉了。。
17年也快结束了，此篇应该是作为今年的结尾了，望来年分享更多有趣的东西。

---

其中：
1.echarts 用的是3.8.0, echarts-gl 用的1.0.0-beta.
2.需要mapbox的accstoken, https://www.mapbox.com/maps/ 这里注册个号，然后配置一些地图样式，进入账号有一个Access tokens，渲染地图需要这个东西。

---

话不多说，先上图，大概的效果是这样，建议参考http://gallery.echartsjs.com/editor.html?c=xBkyhntOEW ：

---

数据部分

参考echarts官网例子，数据部分的格式大概是这样：

data: [  {ROAD_LINE: '168.386,-44.8495;168.386,-44.8464;168.386,-44.8464'},  {ROAD_LINE: '...'},  ...]

当然，这并不是渲染线路时传入的格式，看官网echarts文档GL: series[i]-lines3D.data[i], （这里我做一下搬运工）：

三维飞线图的数据数组，通常数据的每一项可以是一个包含起点和终点的坐标集。在 polyline 设置为 true 时支持多于两个的坐标。 如下：

data: [    [        [120, 66, 1], // 起点的经纬度和海拔坐标        [122, 67, 2]  // 终点的经纬度和海拔坐标    ]]

有些时候需要配置数据项的名字或者单独的样式。需要把经纬度坐标写到 coords 属性下。如下：

data: [    {        coords: [ [120, 66], [122, 67] ],        // 数据值        value: 10,        // 数据名        name: 'foo',        // 线条样式        lineStyle: {}    }]

实际上在传入的时候，参考官网用的是第二种，其实就是data数组里面包含多个对象，每个对象都对应有自己的coords(轨迹经纬度数组)，value/name/lineStytle。只不过需要注意的是，当coords里的经纬度点个数大于2时，需要在series下指定polyline: true.

渲染部分

mapbox

mapbox部分有几个注意点：
1. 在index页引入mapbox的sdk：

<script src='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script><link href='https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />

1. 在效果实现的js文件引入mapbox asses token, 例如：

mapboxgl.accessToken = 'pk.eyJ1IjoieWM5MDc2MTYwMDQiLCJhIjoiY2o5d2E2YmNpN2dncTJ4cGFtemoyaXltYSJ9.zNHPyCI5PV6xGnvajvlTNg';var chart = echarts.init(document.getElementById('main'));chart.setOption({    mapbox: {        center: [174.7838400879,-36.8551296749],        zoom: 5.2,        // pitch: 50,        // bearing: -50,        altitudeScale: 10000000,        style: 'mapbox://styles/mapbox/dark-v9',        postEffect: {            enable: true,            FXAA: {                enable: true            }        },        light: {            main: {                intensity: 1,                shadow: true,                shadowQuality: 'high'            },            ambient: {                intensity: 0.            }        }    },    series: [{        ...    }]})

上面option里mapbox需要注意几点，style: 'mapbox://styles/mapbox/dark-v9'可以在mapbox官网看，或者自己定义一些地图样式，altitudeScale官网解释是海拔高度，实际在设置时可以指定大一点，避免地图放大时被覆盖或者显示不出，另外 mapbox的access token请自己申请一下，有额度限制好像，echarts官网的就是因为那个access token额度满了显示不出效果的。

echarts-gl

相比于echarts3.x，此次echarts-gl更加是一场视觉盛宴，完全可以直接用于大屏大数据展示了（心态有点浮夸了，莫怪），关于这个交通血脉图，其实直接看series.lines3D就可以，没什么难点。

series: [{        type: 'lines3D',        coordinateSystem: 'mapbox',        effect: {            show: true,            constantSpeed: 5,            trailWidth: 1,            trailLength: 10,            trailOpacity: 1,            spotIntensity: 2        },        blendMode: 'lighter',        polyline: true,        lineStyle: {            width: 0.1,            color: 'rgb(200, 40, 0)',            opacity: 0.        },        data: {            count: function() {                return taxiRoutes.length;            },            getItem: function(idx) {                return taxiRoutes[idx]            }        }    }]

几点需要注意的是，coordinateSystem可以直接指定mapbox，polyline需设置为true（官网已经说得很清楚了）,blendMode设置为lighter时当多条线路叠加可以高亮。
大概就这些。

一些tips

本来想写一些小技巧，发现都说过了，那就这样吧，祝来年分享更多精彩的事物。