二次封装arcgis的timeslider

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

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

先上JavaScript class的code:

[javascript] view plaincopy

/**
* yilei create for IES timeslider
*
*/
//dojo.provide("mapSlider.MyTimeslider");
dojo.declare("mapSlider.MyTimeSlider",null,{
map: null,
startDate:null,
endDate:null,
divId:"myTimeSlider",
timeUnit:"esriTimeUnitsHours",
labelImg:"",
// Can set the Array of custom Label, if not set will display the labels
labels:[],
labelFooterDateFormat: "dd MMM yyyy HH:mm",
labelTopDateFormat: "dd MMM yyyy HH:mm",
timeExtent:null,
//width:500,
timeSliderCssClass: "timeSlider",
topLabelCssClass:"sliderTopLabel",
// -1, Unlimited, otherwise specific values
noOfLabels: 3,
timesliderType:"temp",
sliderId:"tempId",
showTopLabel: true,
showPlayPauseBtn:true,
showPreviousNextBtn:true,
timeSlider:null,
onsliderChange:function(timeExtentObj){},
defaultIndex:0,
_self:null,
_unitTimeArray:{
"esriTimeUnitsYears":0,
"esriTimeUnitsMonths":0,
"esriTimeUnitsWeeks":0,
"esriTimeUnitsDays":1000 * 3600 * 24,
"esriTimeUnitsHours":1000 * 3600,
"esriTimeUnitsMinutes":1000 * 60,
"esriTimeUnitsSeconds":1000,
"esriTimeUnitsMilliseconds":0
},
/**********constructor function for init*************/
constructor:function(params){
dojo.mixin(this, params);
_self=this;
this.timeExtent=new esri.TimeExtent();
//_self._startDate=params.startDate;
//_self._endDate=params.endDate;
//_self._divName=params.divName;
//_self._timeUnit=params.timeUnit;
this.sliderId=getUniqueId(this.timesliderType);
//params.timeUnit?_self._timeUnit=params.timeUnit:"";
//params.width?_self._width=params.width:"";
},
createSlider:function(){
try
{
// Destroy the div and then create
//dojo.query("[id^="+this.timesliderType+"]")[0].destroy();
// Create new Div and add to divSlidersContainer
var tsDiv = dojo.create("div", null, dojo.byId(this.divId));
//alert(this._width);
this.timeSlider = new esri.dijit.TimeSlider({
//style: "width: "+this.width+"px;",
class:this.timeSliderCssClass,
id: this.sliderId,
options: {
excludeDataAtLeadingThumb: true
}
},tsDiv);
this.timeExtent.startTime = this.startDate;
this.timeExtent.endTime = this.endDate;
if (this.labels.length == 0) {
this.labels.push(this.startDate.Format(this.labelFooterDateFormat));
var balLabels = this.noOfLabels-1;
var diff = this.endDate.getTime() - this.startDate.getTime();
var increment = diff/balLabels;
var firstTime = this.startDate.getTime();
for (var i=1; i<this.noOfLabels-1; i++) {
firstTime = firstTime + increment;
this.labels.push((new Date(firstTime)).Format(this.labelFooterDateFormat));
}
this.labels.push(this.endDate.Format(this.labelFooterDateFormat));
}
this.timeSlider.setLabels(this.labels);
this.timeSlider.setThumbCount(1);
this.timeSlider.setThumbIndexes([this.defaultIndex]);
this.timeSlider.setLoop(false);
this.timeSlider.singleThumbAsTimeInstant(true);
this.timeSlider.createTimeStopsByTimeInterval(this.timeExtent,1,this.timeUnit);
if(!this.showPlayPauseBtn)this.timeSlider.playPauseBtn.destroy();
if(!this.showPreviousNextBtn){this.timeSlider.previousBtn.destroy();this.timeSlider.nextBtn.destroy();}
this.timeSlider.startup();
//alert(this.endDate.Format(this.labelFooterDateFormat));
var defaultBegainTime=this.timeSlider.getCurrentTimeExtent().startTime.Format(this.labelTopDateFormat);
if (this.showTopLabel == true) {
dojo.create("span", {id: this.sliderId+"_sp_topLabel",class:this.topLabelCssClass, innerHTML: defaultBegainTime}, dojo.query(".dijitSliderMoveable")[0]);
}
dojo.connect(this.timeSlider, "onTimeExtentChange",function(evt){
//console.dir(evt);
if (_self.showTopLabel == true) {
var topLabelDisplay= evt.startTime.Format(_self.labelTopDateFormat);
//alert(topLabelDisplay);
dojo.byId(_self.sliderId+"_sp_topLabel").innerHTML = topLabelDisplay;
}
_self.onsliderChange(evt);
});
return this.timeSlider;
}
catch(e){console.dir(e);return null;}
},
_testsub:function(){
console.dir(_self);
alert(this.topLabelCssClass);
}
});

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

[html] view plaincopy

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

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

下面给出做test的HTML。

[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Hurricane Explorer</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
body {
background-color:#EFEFDE;
overflow:hidden;
font-family: "Trebuchet MS";
}
.pane {
border: solid 1px #9CAA9C;
margin: 5px;
padding: 5px;
}
#header {
background-color:#EFEFDE;
color:#9CAA9C;
font-size:16pt;
text-align:left;
font-weight:bold;
padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right: 10px;
margin-top:0px; margin-bottom:0px;
}
#banner {
height:40px; width:100%;
}
.dijitRuleMark {
height: 0px;
}
.dijitRuleLabelH {
background: url('./dropDownArrow_grey.png') 50% 0% no-repeat;
height: 50px;
padding-top: 15px;
white-space: nowrap;
}
.sliderTopLabel2 {
position: absolute;
top: -22px;
color: red;
font: 11px Arial bold;
white-space: nowrap;
}
.timeSlider
{
width:1000px;
padding-top:30px;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://js.arcgis.com/3.13/"></script>
<script src="dateTimeFormat.js"></script>
<script>
dojo.require("esri.dijit.TimeSlider");
</script>
<script src="MyTimeslider.js"></script>
<script>
function getUniqueId (prefix) {
var uniqueId = (new Date()).getTime();
return (prefix || 'id') + (uniqueId++);
}
function init() {
var t=new mapSlider.MyTimeSlider({
startDate:new Date(2013, 0, 1 ,00,00,00),
endDate:new Date(2013, 0, 4,00,00,00),
divId:"timeSliderDiv",
timeUnit:"esriTimeUnitsHours",
topLabelCssClass:"sliderTopLabel2",
timeSliderCssClass:"timeSlider",
//width:1000,
noOfLabels:4,
timesliderType:"yileitest_",
onsliderChange:function(obj){console.dir(obj);},
showPlayPauseBtn:true,
showPreviousNextBtn:true,
labelTopDateFormat:"HH:mm",
defaultIndex:48,
showTopLabel:true
});
t.createSlider();
}
dojo.ready(init);
</script>
<body class="claro">
<div id="timeSliderDiv"></div>
</body>
</html>

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

[html] view plaincopy

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

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

下面给出dateTimeFormat.js的code::

[javascript] view plaincopy

/****************date format******************/
Date.prototype.Format = function(mask) {
var d = this;
var zeroize = function (value, length) {
if (!length) length = 2;
value = String(value);
for (var i = 0, zeros = ''; i < (length - value.length); i++) {
zeros += '0';
}
return zeros + value;
};
return mask.replace(/"[^"]*"|'[^']*'|\b(?:d{1,4}|M{1,4}|yy(?:yy)?|([hHmstT])\1?|[lLZ])\b/g, function($0) {
switch($0) {
case 'd': return d.getDate();
case 'dd': return zeroize(d.getDate());
case 'ddd': return ['Sun','Mon','Tue','Wed','Thr','Fri','Sat'][d.getDay()];
case 'dddd': return ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][d.getDay()];
case 'M': return d.getMonth() + 1;
case 'MM': return zeroize(d.getMonth() + 1);
case 'MMM': return ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][d.getMonth()];
case 'MMMM': return ['January','February','March','April','May','June','July','August','September','October','November','December'][d.getMonth()];
case 'yy': return String(d.getFullYear()).substr(2);
case 'yyyy': return d.getFullYear();
case 'h': return d.getHours() % 12 || 12;
case 'hh': return zeroize(d.getHours() % 12 || 12);
case 'H': return d.getHours();
case 'HH': return zeroize(d.getHours());
case 'm': return d.getMinutes();
case 'mm': return zeroize(d.getMinutes());
case 's': return d.getSeconds();
case 'ss': return zeroize(d.getSeconds());
case 'l': return zeroize(d.getMilliseconds(), 3);
case 'L': var m = d.getMilliseconds();
if (m > 99) m = Math.round(m / 10);
return zeroize(m);
case 'tt': return d.getHours() < 12 ? 'am' : 'pm';
case 'TT': return d.getHours() < 12 ? 'AM' : 'PM';
case 'Z': return d.toUTCString().match(/[A-Z]+$/);
// Return quoted strings with the surrounding quotes removed
default: return $0.substr(1, $0.length - 2);
}
});
};

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

转载于:https://www.cnblogs.com/telwanggs/p/6336486.html

二次封装arcgis的timeslider相关推荐

二次封装dojo slider
上次的二次封装timeslider,挺有意思,又来封装一个dojo的,样式还是用arcgis的. 实现更多功能,包括HorizontalSlider和VerticalSlider, 刻度的显示隐藏,标 ...
Glide二次封装库的使用
更多代码可以查询本人GitHub:欢迎阅读,star点起来. Glide二次封装库源码前言为什么选择Glide? Glide 轻量级速度快可以根据所需加载图片的大小自动适配所需分辨率的图支 ...
高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档组件设计目的分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
Android 应用程序集成Google 登录及二次封装
谷歌登录API: https://developers.google.com/identity/sign-in/android/ 1.注册并且登录google网站 https://accounts. ...
vue全家桶 ---axios的使用和二次封装
1.前提基础本文在vue项目搭建的基础上,vue-router路由配置的基础上,对vue项目中axios的使用进行介绍. 2.axios的使用以及拦截器的设置. 安装axios cnpm i axi ...
iOS安全之二次封装AFN并设置请求头/执行HTTPS加强安全
以前都是直接复制粘贴二次封装好的代码 , 现在都忘了怎么写 . 恰好当前项目要用到请求头 , 在网上学习了一下 , 统一敲了一遍 .自从到了现在公司 , 才发现要学的东西太多了 , 当然 , 有个好的 ...
java二次封装_基于OKhttp+Rxjava2+Retrofit进行二次封装
概述基于Retrofit进行二次封装,优雅的初始化设置.基于Okhttp拦截器和基础缓存,封装了无网络和其他所有场景的缓存策略支持,以及频繁调用请求的丢弃策略. 特性 1.基于Retrofit的二次 ...
Android 应用程序集成FaceBook 登录及二次封装
1.首先在Facebook 开发者平台注册一个账号 https://developers.facebook.com/ 开发者后台 https://developers.facebook.com/ap ...
selenium + python自动化测试unittest框架学习（五）webdriver的二次封装
因为webdriver的api方法很长,再加上大多数的定位方式是以xpath方式定位,更加让代码看起来超级长,为了使整体的代码看起来整洁,对webdriver进行封装,学习资料来源于虫师的<se ...

二次封装arcgis的timeslider

二次封装arcgis的timeslider相关推荐

最新文章

热门文章