此功能翻译成中文叫时态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
如有疑问或者相关的建议都可给我留言进行交流,欢迎你的评论。
分享到:
相关推荐
C++11 头文件提供了一个简单的 TIME_ELAPSED 宏来测量代码块的运行时间。 代码已在 Windows7 上使用 VisualStudio 2013 和 CentOS7 上使用 g++ 4.8.2 进行测试。 1.头文件 TimeElapsed.hpp 2. 宏API 2.1. TIME_...
time的介绍,需要开发time的同学可以研究一下,比较详细,但是与标准kernel可能有所出入
要将这个包作为本地的、每个项目的依赖项添加到您的项目中,只需将pwa/time-elapsed的依赖项添加到您项目的composer.json文件中。 { "require" : { "pwa/time-elapsed" : "dev-master" } } 因为这个类使用命名...
var TimeElapsed = require('time-elapsed'); // Create new Instance of Time Elapsed: var timer = new TimeElapsed(); // Wait a duration of time: setTimeout(function(){ // See how many Milliseconds it ...
allprojects { repositories { maven { url " https://jitpack.io " } }} 添加依赖项: dependencies { implementation ' com.github.DanilKleshchin:android-elapsed-time:{version} '}用法val resources = ...
组织时间表 将议程的图形视图添加到议程缓冲区。... 过去的时隙背景以org-timeline-elapsed face突出显示。 通过将属性TIMELINE_FACE添加到具有颜色名称的字符串或用于指定面部属性的列表或被视为面部名称的符
系统封装图文教程
time elapsed:12336, rate:2494.445880kb/s, words:920071.30/s 循环调用2万次 第一次测试结果: time elapsed:22237, rate:2767.593144kb/s, words:1020821.12/s 第二次测试结果: time elapsed:22435, ...
AB PLC例程_本资料仅供学习参考
var animation = loopy ( function ( deltaTime , timeElapsed ) {//deltaTime: time since last loop//timeElapsed: time since looping startedif ( timeElapsed ) >= 1000 ) {animation . cancel ( ) ;}//your ...
经过时间一个 Polymer 自定义元素,显示自给定日期或从现在到未来日期之间经过的时间。 有关更多信息,请参阅。
设置一个实数并将其转换为N位数字的字符串,例如,对于N = 3,输入1变为001,34变为034,876保持不变。 可用于各种目的。... [num2strN(round(timeElapsed/60),3) ':' num2strN(mod(timeElapsed,60),2)]
经过时间计算器计算经过的时间。 使用标准军用时间进行输入。 这是在作为学生的编程 1 课程期间完成的。
欧拉公式求长期率的matlab代码货柜门 使用go安装: go get -u ...容器名称或ID是唯一必需的参数...{"ts":"2020-05-04T18:01:10Z","timeElapsed":32.24,"cpuTimeElapsed":1.18,"percentCPUSinceStart":3.67,"percentCPUThis
print('Time elapsed: %.2f min' % ((time.time() - start_time) / 60)) print('Total Training Time: %.2f min' % ((time.time() - start_time) / 60)) print('Test Acc: {:3.6f} '.for 这些文件用于实现结构型...
非常丰富的webgis相关的例子,CrimeMapping,TimeElapsed,Cross Browser,Mapping,AddressMapping
CPU time = 0 ms, elapsed time = 0 ms. SQL Server Execution Times: CPU time = 0 ms, elapsed time = 0 ms. SQL Server Execution Times: CPU time = 0 ms, elapsed time = 0 ms. SQL Server Execution ...
2 events ) 1071ms • /api/users/:id/messages ( 2 events ) 1895.5ms • /api/users/:id/pets ( 2 events ) 2329msstate -- time elapsed (average) for each state transition (single page applicati
SpeedMeter Description This is the repo for the speedmeter android app. It can display some useful information...The time elapsed How many meters or kilometers you traveled Your maximum speed Download
Protel Design System Design Rule Check PCB File : LX6_347.PCB Date : 18-Dec-2011 Time : 22:20:44 ...Rule Violations :0 Processing Rule : Short-Circuit Constraint (Allowed=Not Allowed) (On ...Time Elapsed