码迷，mamicode.com
首页 > 其他好文 > 详细

二次封装arcgis的timeslider

时间：2017-01-21 09:54:49      阅读：733      评论：0      收藏：0      [点我收藏+]

标签：二次   cal   lis   weight   com   ext   previous   css   ted   

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

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

 

技术分享

二次封装arcgis的timeslider

标签：二次   cal   lis   weight   com   ext   previous   css   ted   

原文地址：http://www.cnblogs.com/love540376/p/6336486.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！