闲来无事
作为一个城市公共交通爱好者,一直打算要将自己专业的知识与自己的爱好联系起来,正好这学期来了个课设,眼尖一下子选中了一个公交线路相关的课设

首先要做的就是从相关网站平台收集大量相关数据,导入至数据库中
所以用什么平台好呢?
本人一下就想到了平日用的最多的高德地图
这么大的地图app肯定有开发者平台吧
一查果然有
高德开放平台地址
都吐槽缺的地图为您导航,今天咱也成为了高德地图的开发者(啥都不会)
在里边的搜索条搜索了公交,果然不愧是用了多年的高德,正合我意
高德公交线路与站点查询
高德API还正好可以用Javascript语言开发,这正合我意
111.jpg

不同城市,不同线路

首先看到高德提供的两个范例
公交站点查询
公交线路查询

一个是以名字查询城市中的公交站点,比如查询“东直门”,就会产生城市中所有名字为东直门的公交站点
第二个是查询特定城市对应的公交线路,会将结果绘制在地图上
鉴于本人目的是提取公交线路站点信息,自然会选择第二个功能,进入开发界面
3.jpg
将源代码编辑器中的所有代码复制到webStorm中测试,测试通过后开始研究源代码

 <div id="container"></div>
......
......
......
  var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923],//地图中心点
        zoom: 13 //地图显示的缩放级别
    });

地图在id为container的div内绘制
地图参数可以在AMap.Map的对象实例化中定义

随后是lineSearch函数的定义

  /*公交线路查询*/
    function lineSearch() {
        var busLineName = document.getElementById('BusLineName').value;
        if(!busLineName) return;
        //实例化公交线路查询类,只取回一条路线
        if(!linesearch){
            linesearch = new AMap.LineSearch({
                pageIndex: 1,
                city: '北京',
                pageSize: 1,
                extensions: 'all'
            });
        }
        //搜索“536”相关公交线路
        linesearch.search(busLineName, function(status, result) {
            map.clearMap()
            if (status === 'complete' && result.info === 'OK') {
                lineSearch_Callback(result);
            } else {
                alert(result);
            }
        });
    }

很明显高德在这里将所搜索的城市固定为“北京”,因此在该页面键入搜索的线路全部都是北京市的公交线路
那么如何不局限于北京,而可以搜索全国的公交线路呢?
很简单,将实例化中的city参数换为一个变量即可
而该变量与线路变量一样,通过DOM从输入框获取
也就是说在原先的输入框基础上加上城市一栏即可
通过DOM同时获取城市与线路名称,就可以查询不同城市的不同线路
改动代码后效果如下
武汉520路公交查询上海31路公交查询泉州2路查询

突破点

效果很明显
这里可能有人会问,原版带的只有线路,那这个明显带着站点的绘制啊
还记得之前提到的第一个功能不,里边不是有站点的绘制吗
本人很好奇这个线路是如何绘制的,便继续对源代码进行研究
很快看到了以下代码

    var pathArr = lineArr[i].path;
    var stops = lineArr[i].via_stops;
    var startPot = stops[0].location;
    var endPot = stops[stops.length - 1].location;

startPot起点? endPot起点?
stops[n]?
立刻恍然大悟
随即在控制台对stops对象进行了整体输出

6.jpg
看到这里想必大家都明白了stops是什么内容了
既然高德提供了如此完整的数据,岂不美哉?
比从某些网站爬虫好多了(虽然后面客流量分析可定也涉及到爬虫的)

  • lat即latitude,纬度
  • lng即longitude,经度

从这堆数据中可以获取站点

  • 所在线路
  • 所在城市
  • 经度
  • 纬度
  • 序号(位于线路中的第几个站点)

借助经纬度,成功在图上绘制出了所有站点
从起点到终点依次绘制即可,顺便说一下使用AMap.Marker绘制标点图案

 for(var i=1;i<stops.length-1;i++)
            {
                console.log(stops[i].location.P+' '+stops[i].location.Q);
                new AMap.Marker({
                    map: map,
                    position: stops[i].location, //基点位置
                    icon: 'https://a.amap.com/jsapi_demos/static/resource/img/pin.png',
                    zIndex: 10
                });
            }

通过Node.js将数据传送回服务端

现在唯一要做的就是将获取到的数据返回到服务端作进一步处理
鉴于本次使用的测试服务端是Node.js,因此查阅了相关资料,本人采用了express框架,因此以此为中心进行查询
后来在网上某个地方找到了一个问题,问题里面提到了这个玩意

xmlHttpRequest

w3school上是这样描述xmlHttpRequest的

XMLHttpRequest 对象是开发者的梦想,因为您能够:
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

很明显找对了法子
随后熟悉了xmlHttpRequest的工作流程后
开始写代码
建立xmlHttpRequest对象
var xmlHttpRequest = new XMLHttpRequest();
随后将数据打包成JSON格式
本人在前期曾经想要一个站点一个站点的发送
后来发现在发送到第六个站点的时候就进行不下去了,原因不明有待查证
后来开窍只要将所有数据融合成一个数据块就可以了
剩余代码

   if (xmlHttpRequest) {
            var url = '/upd?data=';
            shit[shit.length]=HeadJSON;
            url += JSON.stringify(shit);
            xmlHttpRequest.open("get", url, true);
            xmlHttpRequest.send(null);
}

其中HeadJSON是本人附加上去的数据

var JSONHead = '{"CITY":"'+CITYName+'","LineNum":"'+LineNum+'"}';
var HeadJSON = (JSON.parse(JSONHead));

因为高德stops中并没有提供城市与线路的数据,因此本人在此将其添加到末尾
同时在Node.js服务端代码加以配合

app.get('/upd',function (req,res) {
       var data = req.query.data;
       JSONParse = JSON.parse(data);
       exports.JSONParse = JSONParse;
       SQL.DataInsert(JSONParse);
       DataOutStream.write(JSON.stringify(JSONParse));
       SQL.DataInsert(JSONParse);
       for(var j=0;j<JSONParse.length;j++)
       {
    DataOutStream.write(JSON.stringify(JSONParse[j])+'\n');
       }
       DataOutStream.write('\n\n\n');
       console.log(JSON.parse(data));
   });

在识别到以upd开头的url请求后,执行该代码
首先将之前打包好的数据包进行解析
随后就是见证奇迹的一刻
噔噔咚
7.jpg
成功的在服务端的控制台中获取到了数据
数据传送成功
输出到txt文档中是这样的效果
8.jpg
漂亮的数据
至此公交线路站点数据初步完成了
这只是迈出的一小步
前面还有很长的路要走

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议