分享一下TimeElapsed(TimeLine)【jQuery版】的优美界面

       此功能翻译成中文叫时态GIS，查阅的相关的资料，主要都是基于理论性质的东西，就是在二维或者三维空间中加入时间的概念，但是未见有真正的实践。

       完成开发TimeElapsed的工作已经有半年多的时间了，一直没有时间拿出来与博友分享，今天突然想起来，与大家分享一下：

       最早想起来要做这个功能的是因为一个国外的TimeElapsed的网站：

http://vfdemo.idvsolutions.com/collisions/

       但是这个网站是用silverlight做的，因为HTML5的兴起于silverlight的没落，所以我们选择用js(jQuery)来实现，但是碰到的问题多的是数不胜数，不过幸运的是这些问题在我的不懈努力与坚持之下，都一一解决了，废话少叙，先发张图片来看看吧。

       这个就是TimeElapse的主界面，先介绍一下主要功能：

1、根据时间为主线显示一些随着时间变化的特定信息的分布情况

2、每个黑点代表的是一个案件或者一个实体，可以点击黑点显示详细信息

3、可以拖动底部中心的滚动条拖动刻度尺显示其他时间的案件分布情况

3、此界面是的d10模式，可以拉动底部中心的Scale对Content内容进行缩放，当达到一定宽度时就会changMode（切换模式），d10可以切换至d2或者M1

4、可以点击圆点定位到地图之上，显示实体的位置信息：

5、Scale的拖动和拖拽过程会有一些动态的效果

 

       基本的功能大概就是这么多，此TimeElapsed可以兼容day（天)到Month（月）的模式，还不兼容hour（小时），大概总结了一下其中的难点：

1. Html页面元素的控制不能用小数赋值，而TimeElapsed的关于时间与实际长度的换算却总是出现小数，所以这个误差问题却如同鬼魅一般总是存在。

2. 关于时间刻度的计算，由于时间的划分不是等分的，一个月有30天的，有28天的，有31天的，有的年份还存在闰年，所以对于时间的计算就需要全盘考虑，索性最后写了个时间计算的js，将所有的时间计算都囊括进来。

3. 关于时间与刻度的对应关系及变化中如何对应，切换模式时如何计算，如何能让标尺永远拖不到尽头，前后能够平滑的接续，这些种种的逻辑问题都是在不断的试验和不断的思考中得以解决。

4. 功能实现了，美化界面也是很重要的一步，尝试了一些CSS的样式配置之后，最后选择了此种搭配，此搭配，清新、淡雅，没有过多颜色的渲染，但是不失美感。

 

关于此功能，其实想说的还挺多，但暂时就说这些了，下面给几个与此有关的链接吧：

http://vfdemo.idvsolutions.com/collisions/

http://www.simile-widgets.org/timeline/

http://help.arcgis.com/en/webapi/silverlight/samples/start.htm#TemporalRendererTracks

 

如有疑问或者相关的建议都可给我留言进行交流，欢迎你的评论。