JavaScript 时间滑块功能（影像服务）

来源：互联网发布：mac系统盘制作软件编辑：程序博客网时间：2024/06/05 06:27

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

阅读全文

0 0