可视化例子(6)——geo3D-北京公交线路图(2.5D地图流动)

一、数据格式

说明：数据中第一二个数是第一个点的经纬度的10000倍，后面数是后面点与第一个点的插值，如第一个点经纬度的10000倍为1164383、401471，第三四个数-11、-13分别是第二个点经纬度与第一个点经纬度的差值，后面类比；

若想用此代码，则可用 python 脚本将数据处理成上面类似样式。

通过下面代码处理成正常的经纬度坐标

 $.getJSON('data/lines-bus.json', function (data) {
                var hStep = 300 / (data.length - 1);
                var busLines = 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],   //数据中第一二个数是第一个点的经纬度的10000倍，后面数是后面点与第一个点的插值
                                prevPt[1] + pt[1]
                            ];
                        }
                        prevPt = pt;
                        points.push([pt[0] / 1e4, pt[1] / 1e4]);  //除以10000得到实际经纬度坐标
                    }
                    return {
                        coords: points,
                        lineStyle: {
                             color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))   //给每条线赋予颜色
                        }
                    };
                });
});

二、完整代码

结果图：

若将第 39、40、41 行代码注释掉：

return {
   coords: points,
 //lineStyle: {
 //  color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))   //给每条线赋予颜色
 //}
};

则得到的结果图为：