ArcGIS API for JavaScript之时间滑块功能（影像服务）

官方示例：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>

ArcGIS API for JavaScript之时间滑块功能（影像服务）

猜你喜欢