Javascript js-arcgis地图的程序设计
`我能够创建自己的基本地图，该地图已经使用扩展地图、maptoggle&basemap gallery和一些其他小部件构建（参见图1） 然而，无论我如何尝试，我仍然无法将TimeSlider的小部件与basemap（给定的源代码）集成 我还附加了TimeSlider小部件源的链接（供您参考），我想将其与粘贴在此处的代码集成 [Javascript js-arcgis地图的程序设计,javascript,html,gis,arcgis-js-api,Javascript,Html,Gis,Arcgis Js Api,`我能够创建自己的基本地图，该地图已经使用扩展地图、maptoggle&basemap gallery和一些其他小部件构建（参见图1） 然而，无论我如何尝试，我仍然无法将TimeSlider的小部件与basemap（给定的源代码）集成 我还附加了TimeSlider小部件源的链接（供您参考），我想将其与粘贴在此处的代码集成 [ Hugoton气田随时间的完井日期 html,body,， #mapDiv{ 填充：0； 保证金：0； 身高：100%； } #mapDiv{ 位置：相对位置；
Hugoton气田随时间的完井日期
html,body,，
#mapDiv{
填充：0；
保证金：0；
身高：100%；
}
#mapDiv{
位置：相对位置；
}
#底板{
左：50%；
保证金：0自动；
左边距：-500px；
位置：绝对位置；
底部：2.5em；
}
#时间信息{
边界半径：4px；
边框：实心2px#ccc；
背景色：#fff；
显示：块；
填充物：5px；
位置：相对位置；
文本对齐：居中；
宽度：1000px；
z指数：99；
}
#底板2{
左：50%；
保证金：0自动；
左边距：-500px；
位置：绝对位置；
底部：8.5em；
}
#时间信息2{
边界半径：4px；
边框：实心2px#ccc；
背景色：#fff；
显示：块；
填充物：5px；
位置：相对位置；
文本对齐：居中；
宽度：1000px；
z指数：99；
}
var映射；
要求([
“esri/map”，
“esri/layers/ArcGisDynamicMapsServiceLayer”，
“esri/几何体/范围”，
“esri/空间参考”，
“esri/TimeExtent”，
“esri/dijit/TimeSlider”，
“dojo/_基/阵列”，
“dojo/dom”，
“dojo/domReady！”，
“dojo/on”，
“esri/tasks/query”、“esri/tasks/QueryTask”
]，功能(
地图
ArcGisDynamicMapsServiceLayer，
程度
空间参考，
时间范围，
时间滑块，
arrayUtils，
dom、on、查询、查询任务
)
{
var myextent=新范围（92.1433973585252，-4.921857675800532，125.89339937584356，11.56021935381215，新空间参考（{wkid:4326}））；
map=新映射（“mapDiv”，
{
底图：“地形”，
范围：myextent，//函数：变量
//中心；[103.8999，1.7381]//经度，纬度
缩放：6
});
var opLayer=新的ArcGISDynamicMapServiceLayer（“http://175.136.253.77/arcgis/rest/services/CAQM/CAQM_Current_Reading/MapServer");
opLayer.setVisibleLayers（[0]）；
//应用定义表达式，以便仅显示某些要素
var layerDefinitions=[]；
layerDefinitions[0]=“FIELD\u KID=1000148164”；
opLayer.setLayerDefinitions（layerDefinitions）；
//将“气田”图层添加到地图中
map.addLayers（[opLayer]）；
打开（“图层添加结果”，初始化滑块）；
打开（“图层添加结果”，initSlider2）；
函数initSlider（）
{
var timeSlider=新的timeSlider({
样式：“宽度：100%；”
}，dom.byId（“timeSliderDiv”）；
map.setTimeSlider（timeSlider）；
var timeExtent=新的timeExtent（）；
timeExtent.startTime=新日期（“1/01/1927 UTC”）；
timeExtent.endTime=新日期（“12/01/1927 UTC”）；
timeSlider.setThumbCount（1）；//假设滑块只有一个拇指：
timeSlider.createTimeStopsByTimeInterval（timeExtent，1，“esriTimeUnitsMonths”）；
timeSlider.setThumbIndexes（[0,1]）；
timeSlider.setThumbMovingRate（1000）；//持续2秒
timeSlider.startup（）；
//每隔一个时间站添加标签
var labels=arrayUtils.map（timeSlider.timeStops，函数（timeStop，i）
{
如果（i%1==0）{
返回timeStop.getUTCMonth（）+1；//从零数组获取滑动时间线bcz getUTCMonth start
}否则{
返回“”；
}
});
时间滑块。设置标签（标签）；
时间滑块打开（“时间范围更改”，功能（evt）{
log（startTime.getUTCMonth（））；
var startValString=evt.startTime.getUTCMonth（）；
var endValString=evt.endTime.getUTCMonth（）；
dom.byId（“daterange”）.innerHTML=“+startValString+”和“+endValString+”；
console.log（startValString）；
});
}
函数initSlider2（）
{var timeSlider=新的timeSlider({
样式：“宽度：100%；”
}，dom.byId（“timeSliderDiv2”）；
map.setTimeSlider（timeSlider）；
var timeExtent=新的timeExtent（）；
timeExtent.startTime=新日期（“1/1/1927 UTC”）；
timeExtent.endTime=新日期（“1/31/1927 UTC”）；
timeSlider.setThumbCount（1）；//假设滑块只有一个拇指：
timeSlider.createTimeStopsByTimeInterval（timeExtent，1，“esriTimeUnitsDays”）；
timeSlider.setThumbIndexes（[0,1]）；
timeSlider.setThumbMovingRate（2000）；//持续2秒
timeSlider.startup（）；
//每隔一个时间站添加标签
var labels2=arrayUtils.map（timeSlider.timeStops，函数（timeStop，i）
{设ii=i+1；
//console.log（timeStop）；console.log（ii）；
如果（i%1==0）{
//返回timeStop.getUTCDay（）；
回报二；
}否则{
返回“”；
}
});
时间滑块设置标签（标签2）；
时间滑块打开（“时间范围更改”，功能（evt）{
var startValString=evt.startTime.getUTCDay（）；
var endValString=evt.endTime.getUTCDay（）；
dom.byId（“daterange2”）.innerHTML/=“+startValString+”和“+endValString+”；
});
}
var queryTask=新queryTask
("http://175.136.253.77/arcgis/rest/services/CAQM/CAQM_CO/MapServer/0");
var query=新查询（）；
query.where='1=1'；
query.where=dom.byId（“state”）.value；
query.returnGeometry=false；
query.outFields=/[“*”]；
[//从choosen数据
“ID”，“车站ID”，
<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 = "button" 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="button" 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>