arcgis api4.11 實現影像圖層播放 自定義時間播放

效果圖：

                                                     可以自定義時間進行播放，也可以手動滑動到某一個具體的位置

 

實現方式：

• 前端滑動塊使用的是第三方插件ion.rangeSlider
• 下載地址：http://ionden.com/a/plugins/ion.rangeSlider/start.html
• 需要引用js和css文件，另外還需要引用Jquery

html代碼：

<div>
	<input id="yxbfSlider" type="text" class="js-range-slider" />
</div>

arcgis api 方面 需要做的也比較簡單。 圖層先全部加入到map中 ，創建mapView的時候  傳入這個map。另外這個地圖切換 ，我用的是 map 的reorder方法，每次改變當前圖層的顯示順序，即可實現！

        self.imgPlayingView = new MapView({
			container : "imgPlaying",
			spatialReference : {
			wkid : 4326
			},
			map : self.imgPlayingMap,
			center : [ 108.73, 34.35 ],
			extent:({
			xmin: 107.24812039344247,
			ymin: 34.19896375897122,
			xmax: 109.17491510355023,
			ymax: 35.54474789819784,
			spatialReference: {wkid: 4326 }
			})
		});

然後初始化 IonRangeSlider即可實現，下面是實現代碼

define(['dojo/_base/declare',
        'dojo/on',
        'dojo/domReady!'
        ],
		function(declare,on) {
		
			return declare(null,{
				
				playingView:null,
				playingMap:null,
				ionSliderInstance:null,
				intervalInstance:null,
				btnPlay:null,
				constructor:function(imgPlayingView){
					
					var self=this;
					self.playingView = imgPlayingView;
					self.playingMap = imgPlayingView.map;
					if(!mobileFlag){						
						self.initIonRangeSlider();
						self.bindDomEvt();
						self.ionSliderInstance = $("#yxbfSlider").data("ionRangeSlider");	
					}
					
					
				},
				
				initIonRangeSlider:function(){
					 var self=this;
					 $("#yxbfSlider").ionRangeSlider({
				            type: "single",
				            values:["地形圖","影像圖","矢量圖"],
				            grid: true,
				            onStart: function (data) {
//					            	console.log("開始");
//					            	console.log(data);
					            data.from_value="地形圖";
				            	self.changeLayer(data);
				                // fired then range slider is ready
				            },
				            onChange: function (data) {
		//			            	console.log("改變");
		//			            	console.log(data);
				            	self.changeLayer(data);
				            	
				            	if(self.btnPlay.hasClass("imgPlayingStop")){
				            		self.btnPlay.attr("value","播放");
				            		self.btnPlay.removeClass("imgPlayingStop").addClass("imgPlayingStart");
				            		
				            		if(self.intervalInstance){
				            			clearInterval(self.intervalInstance);
				            		}
				            	}
				                // fired on every range slider update
				            },
		//			            onFinish: function (data) {
		//			            	console.log("完成");
		//			            	console.log(data);
		//			            	self.changeLayer(data);
		//			                // fired on pointer release
		//			            },
				            onUpdate: function (data) {
		//			            	console.log("更新");
		//			            	console.log(data);
				            	self.changeLayer(data);
				                // fired on changing slider with Update method
				            }
				        });
					
				},
				
				bindDomEvt:function(){
					var self=this;
					var body=$("body");
					self.btnPlay=$("#yxbfStart");
		
					body.on("click",".imgPlayingStop",function(){
						$(this).removeClass("imgPlayingStop").addClass("imgPlayingStart");
						this.value="播放";
						
						clearInterval(self.intervalInstance);
					});
					
					body.on("click",".imgPlayingStart",function(){
						
						$(this).removeClass("imgPlayingStart").addClass("imgPlayingStop");
						this.value="暫停";
						
						var timeInterval=$("#yxbfInterval").val()*1000;
		
						self.intervalInstance=setInterval(function () {
							var options=self.ionSliderInstance.options;
							var max=options.max;
							var currentStep=options.from;
							if(currentStep<max){
								currentStep=currentStep+1;
								self.ionSliderInstance.update({
									from:currentStep
								});
							}else {
								self.ionSliderInstance.update({
									from:options.min
								});
							}
							
						},timeInterval);
					});
					
					var yxbf = $("#yxbf");
					yxbf.bind("text",function(){
						setStop();
					})
					var close=$(".del_layer");
					close.click(function () {
						setStop();
					});
					
					function setStop() {
					    if (self.intervalInstance) {
					    	clearInterval(self.intervalInstance);
					    	self.btnPlay.removeClass();
					    	self.btnPlay.addClass("imgPlayingStart");
					    	self.btnPlay.attr("value","播放");
					    	self.intervalInstance=null;
					    }
					}
				},
				
		
				changeLayer:function(obj){
					var self=this;
					
					var layer=null;
					var currentValue = obj.from_value;
					
					switch (currentValue) {
					case "地形圖":
						layer = self.playingMap.findLayerById("dx");
						break;
					case "影像圖":
						layer = self.playingMap.findLayerById("yx");
						break;
					case "矢量圖":
						layer = self.playingMap.findLayerById("vec");
						break;
					default:
						break;
					}
					if(layer){
						self.playingMap.reorder(layer,5);
					}
				}
			});
		
		}
)