Js遍历map:jsarcgismap编程

关于Js遍历map的问题,在arcgis time slider中经常遇到, '我可以创建自己的底图,该底图已经使用范围图,mappoggle & amp;底图库和其他一些小部件(请参阅图 1)。

'我可以创建自己的底图,该底图已经使用范围图,mappoggle & amp;底图库和其他一些小部件(请参阅图 1)。

但是,我仍然是一个问题,无论我如何尝试,都将 timeslidder 的小部件与底图(给定的源代码)集成在一起。

我还附上 timeslidder 小部件的源代码的链接(供您参考),我想与我粘贴在这里的代码整合。

[

<html>
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Well completion dates for the Hugoton Gas Field Over Time</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.30/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.30/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;
  }
    #bottomPanel2 {
    left: 50%;
    margin: 0 auto;
    margin-left: -500px;
    position: absolute; 
    bottom: 8.5em;
    }
   #timeInfo2{
    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.30/"></script>
<script>
  var map;
  require([
    "esri/map", 
    "esri/layers/ArcGISDynamicMapServiceLayer", 
    "esri/geometry/Extent", 
    "esri/SpatialReference", 
    "esri/TimeExtent", 
    "esri/dijit/TimeSlider",
    "dojo/_base/array", 
    "dojo/dom", 
    "dojo/domReady!",
    "dojo/on",
    "esri/tasks/query", "esri/tasks/QueryTask"
  ], function(
    Map, 
    ArcGISDynamicMapServiceLayer, 
    Extent, 
    SpatialReference,
    TimeExtent, 
    TimeSlider,
    arrayUtils, 
    dom,on, Query, QueryTask
  ) 
  {
    var myextent = new Extent(92.14339937585252, -4.921857675800532,  125.89339937584356,11.56021935381215,  new SpatialReference({ wkid:4326 }));
        map = new Map("mapDiv", 
        {
            basemap: "topo",
            extent: myextent, // funct:variable
            //center; [103.8999, 1.7381] // longitude, latitude Mas
            zoom: 6
        });
    var opLayer = new ArcGISDynamicMapServiceLayer("http://175.136.253.77/arcgis/rest/services/CAQM/CAQM_Current_Reading/MapServer");
        opLayer.setVisibleLayers([0]);
    //apply a definition expression so only some features are shown 
    var layerDefinitions = [];
        layerDefinitions[0] = "FIELD_KID=1000148164";
        opLayer.setLayerDefinitions(layerDefinitions);
        //add the gas fields layer to the map 
        map.addLayers([opLayer]);
    map.on("layers-add-result", initSlider);
    map.on("layers-add-result", initSlider2);
    function initSlider() 
    { 
        var timeSlider = new TimeSlider({
            style: "width: 100%;"
        }, dom.byId("timeSliderDiv"));
          map.setTimeSlider(timeSlider);
        var timeExtent = new TimeExtent();
          timeExtent.startTime = new Date("01/01/1927 UTC");
          timeExtent.endTime = new Date("12/01/1927 UTC");
          timeSlider.setThumbCount(1);// Assuming slider has only one thumb:
          timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsMonths");
          timeSlider.setThumbIndexes([0,1]);
          timeSlider.setThumbMovingRate(1000);//for 2 sec
          timeSlider.startup();
        //add labels for every other time stop
        var labels = arrayUtils.map(timeSlider.timeStops, function(timeStop,i) 
        { 
            if ( i % 1 === 0 ) {
              return timeStop.getUTCMonth()+1; //to get the sliding timeline bcz getUTCMonth start from zero array
            } else {
              return "";
            }
        }); 
        timeSlider.setLabels(labels);
        timeSlider.on("time-extent-change", function(evt) {
          console.log(startTime.getUTCMonth());
            var startValString = evt.startTime.getUTCMonth();
            var endValString = evt.endTime.getUTCMonth();
            dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString + "<\/i>";
            console.log(startValString);
          });
    }
    function initSlider2() 
    {   var timeSlider = new TimeSlider({
            style: "width: 100%;"
            }, dom.byId("timeSliderDiv2"));
            map.setTimeSlider(timeSlider);
        var timeExtent = new TimeExtent();
            timeExtent.startTime = new Date("1/1/1927 UTC");
            timeExtent.endTime = new Date("1/31/1927 UTC");
            timeSlider.setThumbCount(1);// Assuming slider has only one thumb:
            timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsDays");
            timeSlider.setThumbIndexes([0,1]);
            timeSlider.setThumbMovingRate(2000);//for 2 sec
            timeSlider.startup();
        //add labels for every other time stop
        var labels2 = arrayUtils.map(timeSlider.timeStops, function(timeStop, i) 
        { let ii = i+1;
            //console.log(timeStop);console.log(ii);
            if ( i % 1 === 0 ) {
                //return timeStop.getUTCDay(); 
                return ii; 
            }   else {
              return "";
                }
        }); 
        timeSlider.setLabels(labels2);
            timeSlider.on("time-extent-change", function(evt) {
            var startValString = evt.startTime.getUTCDay();
            var endValString = evt.endTime.getUTCDay();
            dom.byId("daterange2").innerHTML //= "<i>" + startValString + " and " + endValString  + "<\/i>";
          });
    }
    var queryTask = new QueryTask
        ("http://175.136.253.77/arcgis/rest/services/CAQM/CAQM_CO/MapServer/0");
      var query = new Query();
      query.where = '1=1';
      query.where = dom.byId("state").value;
      query.returnGeometry = false;
      query.outFields = //["*"];
      [ //from the choosen data
        "ID", "STATION_ID", "STATION_LOCATION", "PLACE", 
        "LONGITUDE", "LATITUDE"
      ];
    //on(dom.byId("execute"), "click", execute);
    document.getElementById("execute_bttn").onclick = function() {execute_result()};
      function execute_result () 
      { 
        <!-- query.text = dom.byId("state").value; -->
        query.text = document.getElementById("state").value;
        queryTask.execute(query, showResults);
        function showResults (results) 
          { 
            var resultItems = [];
            var resultCount = results.features.length;
            for (var i = 0; i < resultCount; i++) 
            {
              var featureAttributes = results.features[i].attributes;
              for (var attr in featureAttributes) 
              {
                resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
              }
              resultItems.push("<br>");
            }
            //dom.byId("info").innerHTML = resultItems.join("");
            document.getElementById("info").innerHTML = resultItems.join("");
          }
       }    
  });
</script>
<!-- <div> <input type = "on" id = "MonthButton" value= "MONTH"></div> -->
<div id="mapDiv">
    <div id = "slist">STATION LIST :
        <input type="text" id="state" placeholder="State"> 
        <input id="execute_bttn" type="on" value="FIND"> 
        <br />
        <br />
        <div id="info" style="padding:5px; margin:5px; background-color:#eee;">
        <br />
        <br /></div> 
    </div>
  <div id="bottomPanel">
    <div id="timeInfo">
      <div>Month in 1927 <span id="daterange">From Jan - Dec</span> (Completion date)</div>
      <div id="timeSliderDiv"></div>
    </div>  
  </div>
  <div id="bottomPanel2">
    <div id="timeInfo2">
      <div>Dates For <span id="daterange2">January 1927</span> (Completion date)</div>
      <div id="timeSliderDiv2"></div>
    </div>
  </div>
</div>
0

我已经拿到了.

这是我将 gis js timeslidder 与我的 api 数据集成时的代码。希望这将有助于像我这样的其他应届毕业生,他们是 gis 程序员。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; cht=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Well completion dates for the Hugoton Gas Field Over Time</title>
    
    <link rel="stylesheet" href="https://js.arcgis.com/3.30/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.30/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;
      }
  
  
#bottomPanel2 {
        left: 50%;
        margin: 0 auto;
        margin-left: -500px;
        position: absolute; 
        bottom: 8.5em;
}
  
   #timeInfo2{
        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.30/"></script>
    <script>
      var map;
      require([
        "esri/map", 
        "esri/layers/ArcGISDynamicMapServiceLayer", 
        "esri/geometry/Extent", 
        "esri/SpatialReference", 
        "esri/TimeExtent", 
        "esri/dijit/TimeSlider",
        "dojo/_base/array", 
        "esri/tasks/query", "esri/tasks/QueryTask"
      ], function(
        Map, 
        ArcGISDynamicMapServiceLayer, 
Extent, 
        SpatialReference,
        TimeExtent, 
        TimeSlider,
        arrayUtils, Query, QueryTask
      ) 
      
      {
        var myextent = new Extent(92.14339937585252, -4.921857675800532,  125.89339937584356,11.56021935381215,  new SpatialReference({ wkid:4326 }));
map = new Map("mapDiv", 
{
basemap: "topo",
extent: myextent, // funct:variable
//center; [103.8999, 1.7381] // longitude, latitude Mas
zoom: 6
});
var opLayer = new ArcGISDynamicMapServiceLayer("http://175.136.253.77/arcgis/rest/services/CAQM/CAQM_Current_Reading/MapServer");
opLayer.setVisibleLayers([0]);
//apply a definition expression so only some features are shown 
var layerDefinitions = [];
layerDefinitions[0] = "FIELD_KID=1000148164";
opLayer.setLayerDefinitions(layerDefinitions);
//add the gas fields layer to the map 
map.addLayers([opLayer]);
map.on("layers-add-result", initSlider);
map.on("layers-add-result", initSlider2);
function initSlider() 
{ 
var timeSlider = new TimeSlider({
style: "width: 100%;"
}, document.getElementById("timeSliderDiv"));
  map.setTimeSlider(timeSlider);
  
var timeExtent = new TimeExtent();
  timeExtent.startTime = new Date("01/01/1927 UTC");
  timeExtent.endTime = new Date("12/01/1927 UTC");
  timeSlider.setThumbCount(1);// Assuming slider has only one thumb:
  timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsMonths");
  timeSlider.setThumbIndexes([0,1]);
  timeSlider.setThumbMovingRate(1000);//for 2 sec
  timeSlider.startup();
  
//add labels for every other time stop
var labels = arrayUtils.map(timeSlider.timeStops, function(timeStop,i) 
{ 
if ( i % 1 === 0 ) {
  return timeStop.getUTCMonth()+1; //to get the sliding timeline bcz getUTCMonth start from zero array
} else {
  return "";
}
}); 
  
timeSlider.setLabels(labels);
  
timeSlider.on("time-extent-change", function(evt) {
  console.log(startTime.getUTCMonth());
var startValString = evt.startTime.getUTCMonth();
var endValString = evt.endTime.getUTCMonth();
dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString + "<\/i>";
console.log(startValString);
  });
}
function initSlider2() 
{
var timeSlider = new TimeSlider({
style: "width: 100%;"
}, document.getElementById("timeSliderDiv2"));
map.setTimeSlider(timeSlider);
  
var timeExtent = new TimeExtent();
timeExtent.startTime = new Date("1/1/1927 UTC");
timeExtent.endTime = new Date("1/31/1927 UTC");
timeSlider.setThumbCount(1);// Assuming slider has only one thumb:
timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsDays");
timeSlider.setThumbIndexes([0,1]);
timeSlider.setThumbMovingRate(2000);//for 2 sec
timeSlider.startup();
  
//add labels for every other time stop
var labels2 = arrayUtils.map(timeSlider.timeStops, function(timeStop, i) 
{ let ii = i+1;
//console.log(timeStop);console.log(ii);
if ( i % 1 === 0 ) {
//return timeStop.getUTCDay(); 
return ii; 
} 
else {
  return "";
}
}); 
  
timeSlider.setLabels(labels2);
  
timeSlider.on("time-extent-change", function(evt) {
var startValString = evt.startTime.getUTCDay();
var endValString = evt.endTime.getUTCDay();
dom.byId("daterange2").innerHTML //= "<i>" + startValString + " and " + endValString  + "<\/i>";
  });
}
          var queryTask = new QueryTask
            ("http://175.136.253.77/arcgis/rest/services/CAQM/CAQM_CO/MapServer/0");
var query = new Query();
          //query.where = '1=1'; //get all data
  query.where = document.getElementById("STATE_NAME")//get from the api data
          query.returnGeometry = false;
          query.outFields = //["*"]; //to get all data column
          [ //choosen the data itself tht want to be display
            "ID", "STATION_ID", "STATION_LOCATION", "PLACE", 
            "LONGITUDE", "LATITUDE"
          ];
  //conflict during implementation so need to change n dont used dojo on
          //on(dom.byId("execute"), "click", execute); 
  document.getElementById("execute_bttn").onclick = function() {execute_result()};
          function execute_result () 
          { 
            <!-- query.text = dom.byId("state").value; -->
            query.text = document.getElementById("state").value; //get value
queryTask.execute(query, showResults);
function showResults (results) 
  { 
var resultItems = [];
var resultCount = results.features.length;
for (var i = 0; i < resultCount; i++) 
{
  var featureAttributes = results.features[i].attributes;
  for (var attr in featureAttributes) 
  {
resultItems.push("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");
  }
  resultItems.push("<br>");
}
//dom.byId("info").innerHTML = resultItems.join("");
document.getElementById("info").innerHTML = resultItems.join("");
  }
           }
      });
    </script>
  </head>
  <body class="claro">
    <div id="mapDiv">
<div id = "slist"><br />STATION LIST :
<input type="text" id="state" placeholder="State"> 
<input id="execute_bttn" type="on" value="FIND"> 
<br />
<br />
<div id="info" style="padding:5px; margin:5px; background-color:#eee;">
<br />
<br /></div> 
</div>
      <div id="bottomPanel">
        <div id="timeInfo">
  <div>Month in 1927 <span id="daterange">From Jan - Dec</span> (Completion date)</div>
          <div id="timeSliderDiv"></div>
        </div>
      </div>
  
  <div id="bottomPanel2">
        <div id="timeInfo2">
          <div>Dates For <span id="daterange2">January 1927</span> (Completion date)</div>
          <div id="timeSliderDiv2"></div>
        </div>
      </div>
    </div>
  </body>
</html>

`

image : I attach the output on how it supposed to look like

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(921)
怎么查看电脑显卡配置:如何配置我的电脑以在SAP登录中查看pdf文档
上一篇
18岁以下禁止进入:验证年龄是否超过 18岁(18 year old date of birth)
下一篇

相关推荐

  • css参考手册:标题

    CSS参考手册是一本关于CSS语言的参考书,由W3C组织出版,包含了CSS语言的完整语法、属性、值和案例等。它提供了一个完整的CSS语言参考,可以帮助开发者快速学习和使用CSS语言,从而更好地创建网页。…

    2023-06-29 01:40:51
    0 42 45
  • css登录界面模板代码:登录你的账号,开启新的旅程

    CSS登录界面模板代码是一种使用CSS来制作登录界面的代码,它可以帮助开发者快速制作出美观且易于使用的登录界面,以下是一个简单的CSS登录界面模板代码:…

    2023-05-06 06:17:54
    0 99 19
  • css鼠标移入移出:标题

    CSS鼠标移入移出,可以使用CSS中的:hover伪类来实现,代码如下:上面的代码表示,当鼠标移入.example元素时,将其文字颜色改为白色。…

    2023-04-28 12:13:20
    0 87 22
  • css自动换行:标题

    CSS自动换行可以使用CSS的word-wrap属性来实现,代码如下:该属性有两个可选值:…

    2023-11-21 11:03:53
    0 32 20
  • css布局技巧:和3个段落 标题 段落1 段落2 段落3

    CSS布局技巧是指使用CSS来实现页面布局的方法。这些技巧可以帮助开发人员快速实现页面布局,并且可以更好地控制页面的外观和行为。…

    2023-04-17 01:31:53
    0 99 99
  • css 超出自动换行:这是一个标题

    css 超出自动换行,可以使用 css 的 word-wrap 属性来实现,该属性允许长单词或 URL 地址换行到下一行。代码如下:…

    2023-04-08 01:41:59
    0 84 67
  • javascript 匿名函数:利用JavaScript匿名函数实现功能

    javascript 匿名函数是没有函数名称的函数,它可以被存储在变量中,或者作为参数传递给其他函数。它使用一对圆括号来定义,并可以包含参数列表和函数体。…

    2023-07-27 11:59:11
    0 96 40
  • css出现滚动条控制页面内容的浏览

    当页面内容超出浏览器窗口的大小,会出现滚动条,可以通过CSS来控制。例如:…

    2023-06-05 08:29:43
    0 15 88

发表评论

登录 后才能评论

评论列表(63条)