永远在身边的专栏

When I see you again~

京沪高铁上火车位置的实时监视模拟网站的开发

因为本人从小就对地理很痴迷,经常看地图,而且对火车有一种很特殊的感觉。以前吧,从影视作品中也经常看到在一个指挥室里面,工作人员可以时刻的监视火车运行的状态和位置,所以呢,我也打算做一个仅仅针对京沪高铁线路的模拟监视系统~(之所以是模拟呢,就是火车不可能实时的给我们返回位置数据吧,我们实时展示的火车的位置其实是基于当前的时间和火车的离开上一个站点的时间以及到达下一站点的时间计算出来的)

当然啦,我主要运用的就是国外的一大神写得一个简单的jquery库transit.js(连接地址:http://onloop.net/transit/ 注:出于一些原因,这个网站或许需要特殊的方法来访问,具体大家都懂的吧!)这个项目呢,我需要两个api,分别是:Google map,openweathermap(http://openweathermap.org/)。

想必大家都知道一个问题吧,就是当我们想调用一些地图的话(无论是google还是百度或者是高德)我们都是无法获取地图中的铁路线路的,毕竟铁路属于一个国家的很关键的基础设置建设嘛!所以呢,第一步我们就是通过google map的my map(https://www.google.com/maps/d/?hl=en_US&app=mp)功能画出京沪高铁的线路然后导出为kml的格式。我们先简单的看一下最终的成果吧:


 这个kml是需要上传到github并且转化为raw的形式(或者任何一个公网可以访问到的地方)这样我们就可以远程访问这个文件了(google map api 需要一个远程的kml文件覆盖在当前地图也就是在当前的额地图上画出铁路):

注:kml文件其实就是自定义的地图文件



然后第二步呢就是从12306上获得我们需要的火车的信息,让我们打开12306的网站,chrome的话按f12进入到开发者的模式下进入network面板,选择输入上海到北京选择高铁:


其实那个response里面就是返回的信息,headers里面有具体的请求方式。京沪高铁一共有68辆高铁,21个站点。


这里的每个火车都是有编号的,我们可以自己输入所有的编号,或者获取12306网站有个js文件就是获得所有火车的id号的,大家也可以试着找找。由于这个请求是https的不涉及验证码,所以我们可以自己写一个程序获取这68趟火车的全部信息然后转化成为我们需要的形式:


然后呢,所有的配置信息填写完毕,我们需要改下transit源码,把我们的天气的信息添加进去:


上图是主要的更改位置,还有一些其他的东西需要修改,大家可以下载github上的代码(我对一部分的源码做了注释,并且转化了可读的格式)看一下~

最后呢,就是在网页部分展示啦~

其实,这个html很简单就是调用google map和transit-min.js而已啦~这里哪个transit的初始化函数的几个参数是:

html对应的div名字,本地kml(用于获得地图上的站点),远程kml文件(用于调用google api画出铁路,火车信息的json文件,是否显示log窗口)


哦对,那个天气信息的获取主要是基于火车当前的经纬度来确定的,为了避免服务器的负担我并没有实时的获取天气,而是检测到当前的火车位置的经度与上次比大于0.5或者纬度大于1度才请求一次的。服务器就是一个简单的额struts的j2ee的结构。


恩,大概就是这个样子吧~不是很难的一个小项目,但是特别的有意思,当别人还在苦苦等待火车为什么没到的时候,你都可以知道这辆火车大概在什么位置啦!

这里有项目的源码,需要的朋友可以参考研究一下哈!

https://github.com/Happyfine/ITrainRoute


阅读更多
个人分类: js web map
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

京沪高铁上火车位置的实时监视模拟网站的开发

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭