二次封装arcgis的timeslider

本文介绍如何利用Dojo库二次封装ArcGIS的时间滑块(timeslider),该滑块不仅限于在地图中应用,可以独立调用。实现过程中需要引入arcgis的JavaScript库,并提供了相应的代码示例,包括JavaScript类代码和用于测试的HTML页面,以及dateTimeFormat.js的实现。
摘要由CSDN通过智能技术生成
arcgis的timeslider是对dojo slider二次封装,
项目需要,所有Map用统一样式的slider,所以写了一个common的dojo class,统一调用生成slider,作为对timeslider再次封装,感觉挺好用。


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


先上JavaScript class的code:

/**
 * 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 ts
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值