二次封装arcgis的timeslider

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

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

先上JavaScript class的code:

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. _self=this;
46. this.timeExtent=new esri.TimeExtent();
47. //_self._startDate=params.startDate;
48. //_self._endDate=params.endDate;
49. //_self._divName=params.divName;
50. //_self._timeUnit=params.timeUnit;
51. this.sliderId=getUniqueId(this.timesliderType);
52. //params.timeUnit?_self._timeUnit=params.timeUnit:"";
53. //params.width?_self._width=params.width:"";
54. },
55. createSlider:function(){
56. try
57. {
58. // Destroy the div and then create
59. //dojo.query("[id^="+this.timesliderType+"]")[0].destroy();
60. // Create new Div and add to divSlidersContainer
61. var tsDiv = dojo.create("div", null, dojo.byId(this.divId));
62. //alert(this._width);
63. this.timeSlider = new esri.dijit.TimeSlider({
64. //style: "width: "+this.width+"px;",
65. class:this.timeSliderCssClass,
66. id: this.sliderId,
67. options: {
68. excludeDataAtLeadingThumb: true
69. }
70. },tsDiv);
71. this.timeExtent.startTime = this.startDate;
72. this.timeExtent.endTime = this.endDate;
73. if (this.labels.length == 0) {
74. this.labels.push(this.startDate.Format(this.labelFooterDateFormat));
75. var balLabels = this.noOfLabels-1;
76. var diff = this.endDate.getTime() - this.startDate.getTime();
77. var increment = diff/balLabels;
78. var firstTime = this.startDate.getTime();
79. for (var i=1; i<this.noOfLabels-1; i++) {
80. firstTime = firstTime + increment;
81. this.labels.push((new Date(firstTime)).Format(this.labelFooterDateFormat));
82. }
83. this.labels.push(this.endDate.Format(this.labelFooterDateFormat));
84. }
85. this.timeSlider.setLabels(this.labels);
86. this.timeSlider.setThumbCount(1);
87. this.timeSlider.setThumbIndexes([this.defaultIndex]);
88. this.timeSlider.setLoop(false);
89. this.timeSlider.singleThumbAsTimeInstant(true);
90. this.timeSlider.createTimeStopsByTimeInterval(this.timeExtent,1,this.timeUnit);
91. if(!this.showPlayPauseBtn)this.timeSlider.playPauseBtn.destroy();
92. if(!this.showPreviousNextBtn){this.timeSlider.previousBtn.destroy();this.timeSlider.nextBtn.destroy();}
93. this.timeSlider.startup();
94. //alert(this.endDate.Format(this.labelFooterDateFormat));
95. var defaultBegainTime=this.timeSlider.getCurrentTimeExtent().startTime.Format(this.labelTopDateFormat);
96. if (this.showTopLabel == true) {
97. dojo.create("span", {id: this.sliderId+"_sp_topLabel",class:this.topLabelCssClass, innerHTML: defaultBegainTime}, dojo.query(".dijitSliderMoveable")[0]);
98. }
99. dojo.connect(this.timeSlider, "onTimeExtentChange",function(evt){
100. //console.dir(evt);
101. if (_self.showTopLabel == true) {
102. var topLabelDisplay= evt.startTime.Format(_self.labelTopDateFormat);
103. //alert(topLabelDisplay);
104. dojo.byId(_self.sliderId+"_sp_topLabel").innerHTML = topLabelDisplay;
105. }
106. _self.onsliderChange(evt);
107. });
108. return this.timeSlider;
109. }
110. catch(e){console.dir(e);return null;}
111. },
112. _testsub:function(){
113. console.dir(_self);
114. alert(this.topLabelCssClass);
115. }
116. });

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

1. <script src="MyTimeslider.js"></script>

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

下面给出做test的HTML。

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

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

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

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

下面给出dateTimeFormat.js的code::

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

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