官方示例:https://developers.arcgis.com/javascript/3/jssamples/time_sliderwithdynamiclayer.html
官方示例使用的是矢量数据,当我们想将影像做成这种效果应该怎么办呢?
参考文档:http://resources.arcgis.com/zh-cn/help/main/10.1/index.html#//009t000000v1000000
1、新建镶嵌数据集,一个年份的影像放到一个镶嵌数据集中,最后加载到一个空的镶嵌数据集“mo”;
2、将“mo”这个总的镶嵌数据集拖到地图窗口,右击Footprint -> 打开属性表 -> 添加date字段;
3、 右击“mo”镶嵌数据集 -> 属性 -> 设置时间属性;
4、发布影像服务,打开服务rest信息页面,查看其是否有 时间信息;
5、代码调用该服务,代码如下(api版本为3.23):
<!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>时间滑块</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<style>
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
#mapDiv {
position: relative;
}
#bottomPanel {
left: 50%;
margin: 0 auto;
margin-left: -500px;
position: absolute;
bottom: 2.5em;
}
#timeInfo{
border-radius: 4px;
border: solid 2px #ccc;
background-color: #fff;
display: block;
padding: 5px;
position: relative;
text-align: center;
width: 1000px;
z-index: 99;
}
</style>
<script src="https://js.arcgis.com/3.23/"></script>
<script>
var map;
require([
"esri/map",
"esri/layers/ArcGISImageServiceLayer",
"esri/TimeExtent", "esri/dijit/TimeSlider",
"dojo/_base/array", "dojo/dom", "dojo/domReady!"
], function(
Map,
ArcGISImageServiceLayer,
TimeExtent, TimeSlider,
arrayUtils, dom
) {
map = new Map("mapDiv", {
basemap: "streets",
center: [-95.15, 32.604],
zoom: 9
});
var opLayer = new ArcGISImageServiceLayer("https://sms.esrichina.com:6443/arcgis/rest/services/mo/ImageServer");
//add the gas fields layer to the map
map.addLayers([opLayer]);
map.on("layers-add-result", initSlider);
function initSlider() {
var timeSlider = new TimeSlider({
style: "width: 100%;"
}, dom.byId("timeSliderDiv"));
map.setTimeSlider(timeSlider);
var timeExtent = new TimeExtent();
timeExtent.startTime = new Date("1/1/2012 UTC");
timeExtent.endTime = new Date("12/31/2018 UTC");
timeSlider.setThumbCount(2);//设置指针数量
timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsYears");//创建时间滑块的时间刻度,一个刻度是2年
timeSlider.setThumbIndexes([0,1]);//两个指针的间隔
timeSlider.setThumbMovingRate(2000);//指针移动速度
timeSlider.startup();//定性控件
//add labels for every other time stop
var labels = arrayUtils.map(timeSlider.timeStops, function(timeStop, i) {
if ( i % 2 === 0 ) {
return timeStop.getUTCFullYear();
} else {
return "";
}
});
timeSlider.setLabels(labels);
timeSlider.on("time-extent-change", function(evt) {
var startValString = evt.startTime.getUTCFullYear();
var endValString = evt.endTime.getUTCFullYear();
dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString + "<\/i>";
});
}
});
</script>
</head>
<body class="claro">
<div id="mapDiv">
<div id="bottomPanel">
<div id="timeInfo">
<div>Hugoton Gas Field Wells from <span id="daterange">2012 to 2018</span> (Completion date)</div>
<div id="timeSliderDiv"></div>
</div>
</div>
</div>
</body>
</html>