二次封装arcgis的timeslider

arcgis的timeslider是对dojo slider二次封装，
项目需要，所有Map用统一样式的slider，所以写了一个common的dojo class，统一调用生成slider，作为对timeslider再次封装，感觉挺好用。


这个slider不一定要在Map里使用，还可以在其他地方调用。只是要包含arcgis的js包,

先上JavaScript class的code:

 

[javascript] view plain copy
 
  1. /** 
  2.  * yilei create for IES  timeslider 
  3.  *  
  4.  */  
  5.  //dojo.provide("mapSlider.MyTimeslider");   
  6. dojo.declare("mapSlider.MyTimeSlider",null,{  
  7.     map: null,  
  8.     startDate:null,  
  9.     endDate:null,  
  10.     divId:"myTimeSlider",  
  11.     timeUnit:"esriTimeUnitsHours",  
  12.     labelImg:"",  
  13.     // Can set the Array of custom Label, if not set will display the labels  
  14.     labels:[],  
  15.     labelFooterDateFormat: "dd MMM yyyy HH:mm",  
  16.     labelTopDateFormat: "dd MMM yyyy HH:mm",  
  17.     timeExtent:null,  
  18.     //width:500,  
  19.     timeSliderCssClass: "timeSlider",  
  20.     topLabelCssClass:"sliderTopLabel",  
  21.     // -1, Unlimited, otherwise specific values  
  22.     noOfLabels: 3,  
  23.     timesliderType:"temp",  
  24.     sliderId:"tempId",  
  25.     showTopLabel: true,  
  26.     showPlayPauseBtn:true,  
  27.     showPreviousNextBtn:true,  
  28.     timeSlider:null,  
  29.     onsliderChange:function(timeExtentObj){},  
  30.     defaultIndex:0,  
  31.     _self:null,  
  32.     _unitTimeArray:{  
  33.     "esriTimeUnitsYears":0,  
  34.     "esriTimeUnitsMonths":0,  
  35.     "esriTimeUnitsWeeks":0,  
  36.     "esriTimeUnitsDays":1000 * 3600 * 24,  
  37.     "esriTimeUnitsHours":1000 * 3600,  
  38.     "esriTimeUnitsMinutes":1000 * 60,  
  39.     "esriTimeUnitsSeconds":1000,  
  40.     "esriTimeUnitsMilliseconds":0  
  41.     },  
  42.     /**********constructor function for init*************/  
  43.     constructor:function(params){  
  44.         dojo.mixin(this, params);  
  45.           
  46.         _self=this;  
  47.         this.timeExtent=new esri.TimeExtent();  
  48.         //_self._startDate=params.startDate;  
  49.         //_self._endDate=params.endDate;  
  50.         //_self._divName=params.divName;  
  51.         //_self._timeUnit=params.timeUnit;  
  52.         this.sliderId=getUniqueId(this.timesliderType);       
  53.         //params.timeUnit?_self._timeUnit=params.timeUnit:"";  
  54.         //params.width?_self._width=params.width:"";  
  55.           
  56.     },  
  57.     createSlider:function(){  
  58.         try  
  59.         {  
  60.             // Destroy the div and then create  
  61.             //dojo.query("[id^="+this.timesliderType+"]")[0].destroy();  
  62.             // Create new Div and add to divSlidersContainer  
  63.             var tsDiv = dojo.create("div", null, dojo.byId(this.divId));  
  64.             //alert(this._width);  
  65.             this.timeSlider = new esri.dijit.TimeSlider({  
  66.               //style: "width: "+this.width+"px;",  
  67.               class:this.timeSliderCssClass,  
  68.               id: this.sliderId,  
  69.               options: {  
  70.                 excludeDataAtLeadingThumb: true  
  71.               }  
  72.             },tsDiv);  
  73.             this.timeExtent.startTime = this.startDate;  
  74.             this.timeExtent.endTime = this.endDate;  
  75.             if (this.labels.length == 0) {  
  76.                 this.labels.push(this.startDate.Format(this.labelFooterDateFormat));  
  77.                 var balLabels = this.noOfLabels-1;  
  78.                 var diff = this.endDate.getTime() - this.startDate.getTime();  
  79.                 var increment = diff/balLabels;  
  80.                 var firstTime = this.startDate.getTime();  
  81.                 for (var i=1; i<this.noOfLabels-1; i++) {  
  82.                     firstTime = firstTime + increment;  
  83.                       
  84.                     this.labels.push((new Date(firstTime)).Format(this.labelFooterDateFormat));  
  85.                 }  
  86.                   
  87.                 this.labels.push(this.endDate.Format(this.labelFooterDateFormat));  
  88.             }  
  89.             this.timeSlider.setLabels(this.labels);  
  90.             this.timeSlider.setThumbCount(1);  
  91.             this.timeSlider.setThumbIndexes([this.defaultIndex]);  
  92.             this.timeSlider.setLoop(false);  
  93.             this.timeSlider.singleThumbAsTimeInstant(true);  
  94.             this.timeSlider.createTimeStopsByTimeInterval(this.timeExtent,1,this.timeUnit);  
  95.             if(!this.showPlayPauseBtn)this.timeSlider.playPauseBtn.destroy();  
  96.             if(!this.showPreviousNextBtn){this.timeSlider.previousBtn.destroy();this.timeSlider.nextBtn.destroy();}  
  97.   
  98.             this.timeSlider.startup();  
  99.             //alert(this.endDate.Format(this.labelFooterDateFormat));             
  100.             var defaultBegainTime=this.timeSlider.getCurrentTimeExtent().startTime.Format(this.labelTopDateFormat);           
  101.             if (this.showTopLabel == true) {  
  102.                 dojo.create("span", {id: this.sliderId+"_sp_topLabel",class:this.topLabelCssClass, innerHTML: defaultBegainTime}, dojo.query(".dijitSliderMoveable")[0]);  
  103.             }  
  104.             dojo.connect(this.timeSlider, "onTimeExtentChange",function(evt){  
  105.                 //console.dir(evt);  
  106.                 if (_self.showTopLabel == true) {  
  107.                     var topLabelDisplay= evt.startTime.Format(_self.labelTopDateFormat);  
  108.                     //alert(topLabelDisplay);  
  109.                     dojo.byId(_self.sliderId+"_sp_topLabel").innerHTML = topLabelDisplay;  
  110.                 }  
  111.                 _self.onsliderChange(evt);  
  112.            });  
  113.            return this.timeSlider;  
  114.         }  
  115.         catch(e){console.dir(e);return null;}  
  116.     },  
  117.     _testsub:function(){  
  118.         console.dir(_self);  
  119.         alert(this.topLabelCssClass);  
  120.     }  
  121. });  

把上面的code存到一个文件名为MyTimeslider.js的文件中
使用slider只需要调用这个class

 

 

[html] view plain copy
 
  1. <script src="MyTimeslider.js"></script>  

divId是网页中要展示slider的位置上的<div> 的ID.

 

下面给出做test的HTML。

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
  6.     <title>Hurricane Explorer</title>  
  7.   
  8.     <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">  
  9.     <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">  
  10.     <style>  
  11.       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }   
  12.       body {  
  13.         background-color:#EFEFDE;   
  14.         overflow:hidden;  
  15.         font-family: "Trebuchet MS";  
  16.       }  
  17.       .pane {  
  18.         border: solid 1px #9CAA9C;  
  19.         margin: 5px;   
  20.         padding: 5px;   
  21.       }  
  22.       #header {   
  23.         background-color:#EFEFDE;  
  24.         color:#9CAA9C;  
  25.         font-size:16pt;  
  26.         text-align:left;  
  27.         font-weight:bold;   
  28.         padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right: 10px;  
  29.         margin-top:0px; margin-bottom:0px;  
  30.       }  
  31.   
  32.       #banner {  
  33.         height:40px; width:100%;  
  34.       }  
  35.         .dijitRuleMark {  
  36.         height: 0px;  
  37.       }  
  38.       .dijitRuleLabelH {  
  39.         background: url('./dropDownArrow_grey.png') 50% 0% no-repeat;  
  40.           height: 50px;  
  41.         padding-top: 15px;  
  42.         white-space: nowrap;  
  43.         }  
  44.           
  45.         .sliderTopLabel2 {  
  46.             position: absolute;  
  47.             top: -22px;  
  48.             color: red;  
  49.             font: 11px Arial bold;  
  50.              white-space: nowrap;  
  51.         }  
  52.         .timeSlider  
  53.         {  
  54.             width:1000px;  
  55.             padding-top:30px;  
  56.         }  
  57.     </style>  
  58.       
  59.     <script>var dojoConfig = { parseOnLoad: true };</script>  
  60.     <script src="http://js.arcgis.com/3.13/"></script>  
  61.     <script src="dateTimeFormat.js"></script>  
  62.       
  63.     <script>  
  64.       dojo.require("esri.dijit.TimeSlider");  
  65.     </script>  
  66. <script src="MyTimeslider.js"></script>  
  67. <script>  
  68.      function getUniqueId (prefix) {  
  69.         var uniqueId = (new Date()).getTime();  
  70.         return (prefix || 'id') + (uniqueId++);  
  71.     }  
  72.       function init() {  
  73.         
  74.       var t=new mapSlider.MyTimeSlider({  
  75.                 startDate:new Date(2013, 0, 1 ,00,00,00),  
  76.                 endDate:new Date(2013, 0, 4,00,00,00),  
  77.                 divId:"timeSliderDiv",  
  78.                 timeUnit:"esriTimeUnitsHours",  
  79.                 topLabelCssClass:"sliderTopLabel2",  
  80.                 timeSliderCssClass:"timeSlider",  
  81.                 //width:1000,  
  82.                 noOfLabels:4,  
  83.                 timesliderType:"yileitest_",  
  84.                 onsliderChange:function(obj){console.dir(obj);},  
  85.                 showPlayPauseBtn:true,  
  86.                 showPreviousNextBtn:true,  
  87.                 labelTopDateFormat:"HH:mm",  
  88.                 defaultIndex:48,  
  89.                 showTopLabel:true  
  90.             });  
  91.             t.createSlider();  
  92.          
  93.       }  
  94.        dojo.ready(init);  
  95.         
  96. </script>  
  97. <body  class="claro">  
  98.   
  99.   <div id="timeSliderDiv"></div>     
  100.   </body>  
  101. </html>  

 

 

css中的一个图片文件dropDownArrow_grey.png是slider中向下箭头的图片，可以换成你喜欢的图片。

[html] view plain copy
 
  1. 其中还有用到一个名为dateTimeFormat.js的文件，该文件是extend一个option给JavaScript的date object，增加了一个Format的option，  

有了它，我们的slider的date format就简单很多了，

下面给出dateTimeFormat.js的code::

 

[javascript] view plain copy
 
  1. /****************date format******************/   
  2. Date.prototype.Format = function(mask) {        
  3.        
  4.     var d = this;        
  5.        
  6.     var zeroize = function (value, length) {        
  7.        
  8.         if (!length) length = 2;        
  9.        
  10.         value = String(value);        
  11.        
  12.         for (var i = 0, zeros = ''; i < (length - value.length); i++) {        
  13.        
  14.             zeros += '0';        
  15.        
  16.         }        
  17.        
  18.         return zeros + value;        
  19.        
  20.     };          
  21.        
  22.     return mask.replace(/"[^"]*"|'[^']*'|\b(?:d{1,4}|M{1,4}|yy(?:yy)?|([hHmstT])\1?|[lLZ])\b/g, function($0) {        
  23.        
  24.         switch($0) {        
  25.        
  26.             case 'd':   return d.getDate();        
  27.        
  28.             case 'dd':  return zeroize(d.getDate());        
  29.        
  30.             case 'ddd': return ['Sun','Mon','Tue','Wed','Thr','Fri','Sat'][d.getDay()];        
  31.        
  32.             case 'dddd':    return ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][d.getDay()];        
  33.        
  34.             case 'M':   return d.getMonth() + 1;        
  35.        
  36.             case 'MM':  return zeroize(d.getMonth() + 1);        
  37.        
  38.             case 'MMM': return ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][d.getMonth()];        
  39.        
  40.             case 'MMMM':    return ['January','February','March','April','May','June','July','August','September','October','November','December'][d.getMonth()];        
  41.        
  42.             case 'yy':  return String(d.getFullYear()).substr(2);        
  43.        
  44.             case 'yyyy':    return d.getFullYear();        
  45.        
  46.             case 'h':   return d.getHours() % 12 || 12;        
  47.        
  48.             case 'hh':  return zeroize(d.getHours() % 12 || 12);        
  49.        
  50.             case 'H':   return d.getHours();        
  51.        
  52.             case 'HH':  return zeroize(d.getHours());        
  53.        
  54.             case 'm':   return d.getMinutes();        
  55.        
  56.             case 'mm':  return zeroize(d.getMinutes());        
  57.        
  58.             case 's':   return d.getSeconds();        
  59.        
  60.             case 'ss':  return zeroize(d.getSeconds());        
  61.        
  62.             case 'l':   return zeroize(d.getMilliseconds(), 3);        
  63.        
  64.             case 'L':   var m = d.getMilliseconds();        
  65.        
  66.                     if (m > 99) m = Math.round(m / 10);        
  67.        
  68.                     return zeroize(m);        
  69.        
  70.             case 'tt':  return d.getHours() < 12 ? 'am' : 'pm';        
  71.        
  72.             case 'TT':  return d.getHours() < 12 ? 'AM' : 'PM';        
  73.        
  74.             case 'Z':   return d.toUTCString().match(/[A-Z]+$/);        
  75.        
  76.             // Return quoted strings with the surrounding quotes removed        
  77.        
  78.             default:    return $0.substr(1, $0.length - 2);        
  79.        
  80.         }        
  81.        
  82.     });        
  83.        
  84. };  

把四个文件准备好，就可以进行测试了

 

posted @ 2017-01-21 09:44  疯子110  阅读(540)  评论(0)  编辑  收藏  举报