效果图:
可以自定义时间进行播放,也可以手动滑动到某一个具体的位置
实现方式:
- 前端滑动块使用的是第三方插件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);
}
}
});
}
)
扫描二维码关注公众号,回复:
8816819 查看本文章