• 二次封装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.     //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."";  
    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: " "+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%;  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; 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.             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.                 //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(/"[^"]*"|'[^']*'|(?:d{1,4}|M{1,4}|yy(?:yy)?|([hHmstT])1?|[lLZ])/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. };  

    把四个文件准备好，就可以进行测试了
  • 相关阅读:
    hadoop2.2.0+hive-0.10.0完全分布式安装方法
    linux之vim编辑器
    hive与hbase的区别与联系
    linux系统管理
    Hive 自定义函数（转）
    hive 存储格式
    ActiveMQ 使用spring模板 发布消息过程分析
    ActiveMQ spring （一）
    ActiveMQ 权限（二）
    ActiveMQ 权限（一）
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6336486.html
Copyright © 2020-2023  润新知