タイム スライダー

タイムスライダー

2016/9/1 (木) 2018/1/12 (金)

<!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>

羽田康祐

伊達と酔狂のGISエンジニア。GIS上級技術者、Esri認定インストラクター、CompTIA CTT+ Classroom Trainer、潜水士、PADIダイブマスター、四アマ。WordPress は 2.1 からのユーザーで歴だけは長い。代表著書『"地図リテラシー入門―地図の正しい読み方・描き方がわかる』 GIS を使った自己紹介はこちら。ESRIジャパン(株)所属、元青山学院大学非常勤講師を兼務。日本地図学会第31期常任委員。発言は個人の見解です。

タイム スライダー

タイムスライダー