二次封装arcgis的timeslider

Posted 2020-08-28 疯子加天才

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. };  

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