js arcgis地图编程
问题描述 投票：-1回答：1
`我能够创建自己的底图，该底图已经使用范围图，maptoggle和底图图库以及其他一些小部件构建（请参见图1）。
但是，无论如何尝试，我仍然难以将时轮滑件的小部件与底图（给定的源代码）集成在一起。
我还附加了我想与我粘贴在此处的代码集成的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 = "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>
1个回答
0
投票
投票
我已经知道了。这是我将gis js timeslidder与我的api数据集成在一起的代码。希望这对像我这样的gis程序员工作的其他应届毕业生有所帮助。愿上帝保佑`
<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>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="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>
</body>
</html>`
最新问题
- 将自定义字段添加到 WooCommerce 重置密码表单并保存数据
- 无法将 html 的输入绑定到 ASP.NET Core 模型
- 如何使用React Router解决重路由的页面切换速度慢的问题？
- 约束矩阵
- AEM 吊带模型可重复使用性
- react-router中的useloaderdata()是否解析promise？
- Android 12+ 上显示的默认启动画面
- Python3 YoutubeDL 即使使用安静选项也会显示输出
- 如何动态创建枚举？
- 检查鼠标按钮的物理状态？
- 访问说明符和访问修饰符之间的区别
- 如何使用 ItemsSource 在嵌套 TreeView 中进行搜索？
- 错误：参数后缺少换行符，│参数定义必须以换行符结尾
- Javascript 模式识别
- Visual Studio 调试器有时会进入 System.Object.Object()
- 自动决策表生成器
- postgres 是否可以在单个事务中由另一个操作访问由一个操作锁定的行或表
- 为什么读取套接字的内容需要很长时间才能完成
- 三个分裂的圆环显示黑色虚线
- 如何使用 gembox 演示代码创建饼图
© www.soinside.com 2019 - 2024. All rights reserved.