javascript的时间描述图怎么写

 在gis系统中往往需要在一个时间间隔内把图形动态播放出来，比如2000年到现在地震变化啊，海啸的变化，在flex中这种展现方式需要后台rest服务相结合，要建立有时间点的图层，arcgis发布要选timeinfo属性，如果我们不用后台，数据格式是json或者xml形式应该怎么做呢，在flex中还有帧动画这个东东，在javascript应该怎么写呢，因为这个表现形式要以数据做支持，而且要在一个地图底图上叠加不断展现，现有javascript动画库是用不上了，很多都是css动画和canvas（html5）的，但是可以用settime这个函数展示这种变化，比如说某某月到某某月热点图的变化。写了一个热点图时间描述。

  1 /**
  2  * Created by haibalai on 2015/9/29.
  3  */
  4 var HeatLayerAnimate = function()
  5 {
  6 
  7     var heatLayerManager;
  8 
  9     var ajaxTool;
 10 
 11     var queryVo = new QueryVO();
 12 
 13     //设置时间间隔
 14     var timeinterval = 5000;
 15 
 16     var isStopFlag = false;
 17 
 18     this.init = function(heatLayerManager1)
 19     {
 20         heatLayerManager = heatLayerManager1;
 21         ajaxTool = new AjaxTool();
 22 
 23     }
 24 
 25     /**
 26      * 添加某个时间段的分色
 27      * @param queryVO
 28      * @param polygon
 29      */
 30     this.addAnimate = function(queryVO1,polygon)
 31     {
 32         queryVo = queryVO1;
 33         heatLayerManager.addRenderCallBack(queryVO1,polygon,ajaxquery);
 34     }
 35 
 36 
 37 
 38     function ajaxquery(param)
 39     {
 40         param.startDate = queryVo.startDate;
 41         param.endDate = queryVo.endDate;
 42         param.layerName= queryVo.layerName;
 43         param.tjfs = queryVo.tjfs;
 44         var str =   JSON.stringify(param);
 45 
 46         //--------------------------------------测试环境用
 47         ajaxTool.getTimeHeatData1(str,ajaxBack);
 48         //-------------------------------------
 49 
 50 
 51         //--------------------------------------真实环境用
 52         //ajaxTool.getTimeHeatData(str,ajaxBack);
 53         //-------------------------------------
 54     }
 55 
 56     var i = 0;
 57     var len = 0;
 58     var num1 = 0.01;
 59     var obj;
 60 
 61     function ajaxBack(obj1)
 62     {
 63         num1 = 0.01;
 64         len = obj1.dataarr.length;
 65         i = 0;
 66         obj = obj1;
 67 
 68         setRender(i);
 69 
 70     }
 71 
 72     function setRender(i)
 73     {
 74         if(i < len)
 75         {
 76             if(isStopFlag == false)
 77             {
 78                 setTimeout(function()
 79                 {
 80                     var codeobj = obj.dataarr[i];
 81                     renderplay(codeobj,i,setRender);
 82                 },timeinterval);
 83             }
 84 
 85         }
 86 
 87     }
 88 
 89     function renderplay(codeobj,i,callback)
 90     {
 91         if(isStopFlag == false)
 92         {
 93             heatLayerManager.ajaxBackFun(codeobj,num1);
 94             // -----------------------------------num1 这一段是我测试用的
 95             num1 = num1 + 0.05;
 96             //--------------------------------------------------------
 97             i++;
 98             callback(i);
 99         }
100 
101     }
102 
103     /**
104      * 停止动画
105      */
106     this.stopRender = function()
107     {
108         isStopFlag = true;
109     }
110 
111     /**
112      * 动画再生
113      */
114     this.resumeRender = function()
115     {
116         isStopFlag = false;
117         setRender(i);
118     }
119 
120 
121 
122 }

 

posted @ 2015-12-08 20:27  haibalai  阅读(317)  评论(0)  编辑  收藏  举报