<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Image Service - Time</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/soria/soria.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;
}
.shadow {
background-color:#EEE;
padding:6px;
}
.timeWindow {
border: 1px solid #aaa;
position:absolute;
right:35px;
top:5px;
z-index:998;
width:300px;
font-family:Tahoma;
color:#000;
text-align:center;
}
#title {
font-size:14pt;
font-weight:700;
}
#subTitle {
font-size:12pt;
}
#details {
font-size:10pt;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.dijit.TimeSlider");
dojo.require("esri.layers.agsdynamic");
dojo.require("esri.layers.ArcGISImageServiceLayer");
dojo.require("esri.layers.ImageServiceParameters");
dojo.require("esri.map");
var map;
function init() {
var initExtent = new esri.geometry.Extent({
"xmin": 122.00000000000011,
"ymin": 22.000000000000057,
"xmax": 146.0000000000001,
"ymax": 46.00000000000006
// "spatialReference": {
// "wkid": 102100
// }
});
map = new esri.Map("map", {
extent: initExtent
});
//var params = new esri.layers.ImageServiceParameters();
//var imageServiceLayer = new esri.layers.ArcGISImageServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/World/MODIS/ImageServer",{imageServiceParameters: params});
var imageServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://ej000476:6080/arcgis/rest/services/Support/map150611_000030/MapServer");
map.addLayers([imageServiceLayer]);
dojo.connect(map, "onLayersAddResult", initSlider);
}
function initSlider(results) {
var timeSlider = new esri.dijit.TimeSlider({
style: "width:100%;"
}, dojo.byId("timeSliderDiv"));
map.setTimeSlider(timeSlider);
var timeExtent = new esri.TimeExtent();
timeSlider.setThumbCount(1);
timeExtent = results[0].layer.timeInfo.timeExtent;
//timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, 'esriTimeUnitsDays');
timeSlider.createTimeStopsByTimeInterval(results[0].layer.timeInfo.timeExtent,1,'esriTimeUnitsDays');
timeSlider.setThumbMovingRate(1000);
timeSlider.setThumbCount(2);
timeSlider.singleThumbAsTimeInstant(true);
timeSlider.startup();
dojo.connect(timeSlider, "onTimeExtentChange", function(timeExtent) {
dojo.byId("details").innerHTML = dojo.string.substitute("${endTime}", timeExtent, function(val) {
return dojo.date.locale.format(val, {
selector: 'date',
// datePattern: 'MMMM yyyy'
datePattern: 'yyyy年MM月dd日hh時mm分'
});
});
});
}
dojo.ready(init);
</script>
</head>
<body class="soria">
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'"
style="overflow:hidden;position:relative;">
<div class="timeWindow">
<div id="timeSliderWin" class="shadow">
<div id="title">
Surface of the World
</div>
<div id="subTitle">
Month by Month
</div>
<div id="details">
2015年07月01日12時00分
</div>
<div id="timeSliderDiv" style="width:100%;height:100%;">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
記事
