ECharts北京bus-lines实例数据与代码分析

这是我最近做毕业设计需要用到ECharts与地图结合，正好看到ECharts上面有这样一个实例，通过对这个实例的分析，最后还是做出了一个类似的页面出来，这里分享一下我的思路。

官方Demo地址： http://echarts.baidu.com/demo.html#lines-bmap-effect

如果直接拷贝官网的代码，是看不到效果的，大家都知道这个地址是错的，大家可以去这个网址下载数据： https://raw.githubusercontent.com/ecomfe/echarts/master/test/data/lines-bus.json。其中官网中一旦遇到需要json数据的实例，只需要把前面链接最后的lines-bus.json改成实例的json就可以了。

代码与数据分析

现在我们分析下载下来的json数据。

这是其中的两条线，其实刚开始看到这一堆数字的时候心里想的这都是啥啥啥？这个时候就要看官网的代码了。在ECharts官方文档中，他对ECharts的lines配置是这样说的：

coords里面存放着点的坐标，但是我们得到的json数据一个数组里面有很多数值，根本就不像是坐标，这个时候结合bus-lines的代码分析，我们可以发现一些端倪。

 var busLines = [].concat.apply([], data.map(function (busLine, idx) {
        var prevPt;
        var points = [];
        for (var i = 0; i < busLine.length; i += 2) {
            var pt = [busLine[i], busLine[i + 1]];    //取出第一个数组中的元素
            if (i > 0) {
                pt = [
                    prevPt[0] + pt[0],                //循环，得到每一个点的经度
                    prevPt[1] + pt[1]                //得到点得到纬度
                ];
            }
            prevPt = pt;                            //将得到的新点赋值给prevPt

            points.push([pt[0] / 1e4, pt[1] / 1e4]);    //将得到的经纬度入栈
        }

首先我们看数据，第一二个点的数值都很大，其他的都比较小，然后我们分析代码，它有一个for循环，每次加2，并将取到的第一个和第二个点存放到一个新的pt数组，这个数组中包含的就是该点的经纬度乘以10的4次方；当i>0的时候，就是第一个点的经纬度已经取了，这个时候就要求第二个点的经纬度了，那么怎样求第二个点的经纬度，这个时候将第一个点的经纬度赋值到prevPt数组，并将buslines数组里的2,3号元素赋给pt数组，然后prevPt数组里的0号元素与pt数组的0号元素相加，1号位与1号位相加。得到一个新的坐标，并将这个坐标赋值给prevPt并入栈。

这样我们可以分析出其实我们得到的bus-lines.json数据里面的每个数组就是一条线路，只是它没有给出每个点的坐标，它只给了每条线路的第一个坐标和该坐标对应的经纬度增量，其中偶数位上保留的是第一个点的经度与其对应上一个点增量，奇数位是纬度与其增量。所以这段代码就是将第一个点的经纬度加上其经度，纬度对应的增量，求到下一个点，再一次求出它后面的点。

坐标点的获取

我们知道这段代码是干什么的就可以了，在我们有确定的坐标点的时候只需要把它的if判断里面那段计算下一个点的坐标代码删掉就行了。

那么怎样从百度地图上获取一条路的经纬度呢？笨办法就是去http://api.map.baidu.com/lbsapi/getpoint/index.html拾取坐标，但是这个非常麻烦，而且经度不高，但是好处是可以乱点，自由度高。还有个简单方法就是调用百度地图api：http://lbsyun.baidu.com/jsdemo.htm#c2_5在这里面有个方法：

driving.setSearchCompleteCallback(function(){
	var pts = driving.getResults().getPlan(0).getRoute(0).getPath();		//通过驾车实例，获得一系列点的数组
})

虽然通过这个方法可以取得这条路上从起点到终点的所有坐标，但是这些坐标在函数外部是无法获取到的，只能在这个setSearchCompleteCallback方法里面使用，当然，我是将坐标输出出来然后复制使用的。

以上就是我对ECharts北京bus-lines实例的一些理解，希望可以帮到大家，有不足的地方希望大家指出，各位有更好地想法可以一起讨论啊。