最近在做gp服务，想在前端做ndvi的分析，但是发现网上借鉴的资料是少之又少，所以就自己探索。
1、首先发布自己的gp服务，关于这个方面我就不多讲了，跟普通的发布差不多。
提一下几个要点:
1)发布gp服务前要再运行一次，添加参数的时候记得将其设置为模型参数。
2）设置参数的类型，一定要记得设置模型参数的类型，不然发布后模型的输入参数就是GPString，这个参数是不对的，右键-属性-数据类型-设置为栅格图层。
2.前端调用
先说一下要注意的事项：
1）gp服务的地址，不是功能里面的rest 的url，很多人直接就复制这个url，发现调用后执行根本没有反应，这个url是没用的，要在下一级加入你的model的名字。
http://localhost:6080/arcgis/rest/services/GP_Service/ndvi9/GPServer/ndvi 2）输入参数的类型，发布后发现inputs里面的默认参数是null，它标注的类型为GPRasterDataLayer，在arcgis api中对应的类型是RasterData()
https://developers.arcgis.com/javascript/3/jsapi/rasterdata-amd.html
，自己看一下定义，等下也会说。
参数对应类型参照表（这个表在arcmap帮助里面可以查看，在任务参数属性 (REST)
目录下）：
这里我们看到GPRasterDataLayer对应的json是{“url”:"地址 ",“format”:“tif”}，这个url地址可以将其放在你的本地站点里，这样它就可以指向你的tif文件了，例如我设置的是{"ur"l:“http://localhost/b6.tif” ，“format”:“tif”}我将文件放置在本地站点中，物理地址应该也可以。
3）前端调用，直接看代码吧，写得比较详细。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Geoprocessing - Export result as map service</title>
<link rel="stylesheet" href="http://localhost/arcgis_js_v328_api/arcgis_js_api/library/3.28/3.28/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://localhost/arcgis_js_v328_api/arcgis_js_api/library/3.28/3.28/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" href="http://localhost/arcgis_js_v328_api/arcgis_js_api/library/3.28/3.28/esri/css/esri.css" />
<script src="http://localhost/arcgis_js_v328_api/arcgis_js_api/library/3.28/3.28/init.js"></script>
<!-- <link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
<script src="https://js.arcgis.com/3.28/"></script>-->
<!-- <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.7/3.7/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.7/3.7/js/esri/css/esri.css" />
<script src="http://localhost/arcgis_js_api/library/3.7/3.7/init.js"></script>-->
<script src="Scripts/jquery-1.7.1.min.js"></script>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
h3 {
margin: 0 0 5px 0;
border-bottom: 1px solid #444;
}
.shadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
#map {
margin: 0;
padding: 0;
}
#leftPanel {
margin: 5px;
background: #fff;
color: #444;
font-family: arial;
width: 250px;
border-right: solid 1px #888;
}
#footer {
border-top: solid 1px #888;
height: 55px;
}
#status {
background-color: #E0E0E0;
color: #707070;
font-weight: bold;
padding: 3px;
border: solid 1px #707070;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position: absolute;
top: 50%;
right: 50%;
z-index: 100;
display: none;
height: 20px;
}
</style>
<script>
var app;
require([
"dojo/on",
"dojo/dom",
"dojo/_base/array",
"dojo/date/locale",
"dojo/parser",
"dijit/registry",
"esri/domUtils",
"esri/map",
"esri/graphic",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"esri/layers/FeatureLayer",
"esri/tasks/Geoprocessor",
"esri/dijit/Legend",
"esri/tasks/RasterData",
"dijit/form/DateTextBox",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"],
function (on, dom, array, locale, parser, registry,
domUtils, Map, Graphic, ArcGISDynamicMapServiceLayer, ImageParameters, FeatureLayer, Geoprocessor, Legend, RasterData) {
var gpServiceUrl = "http://localhost:6080/arcgis/rest/services/GP_Service/ndvi9/GPServer/ndvi"
var gp = new Geoprocessor(gpServiceUrl);
parser.parse();
var rasterData = new RasterData();
var map = new Map("map", {
basemap: "streets",
center: [114,25],
zoom: 13
});
on(dom.byId("execute"), "click", function () {
var params = {
"b5": new RasterData({ url: "http://localhost/b5.tif", format: "tif" }),//定义输入参数RasterData(指向栅格文件的地址,文件格式)
//我的文件是放在电脑的C:\inetpub\wwwroot里面的,是个url，物理地址应该也行
"b6": new RasterData({ url: "http://localhost/b6.tif", format: "tif" })//将地址换成你自己的地址
};
gp.submitJob(params, gpJobComplete, gpJobStatus, gpJobFailed);//异步提交
})
function gpJobComplete(jobinfo) {
//将结果图层添加到地图中
gp.getResultImageLayer(jobinfo.jobId, null, null, function (gpLayer) {//里面的几个参数可以不用设置，后面的版本都弃用了
gpLayer.setOpacity(0.5);
map.addLayer(gpLayer);
});
}
function gpJobStatus(jobinfo) {
//获取状态信息
domUtils.show(dom.byId('status'));
var jobstatus = '';
switch (jobinfo.jobStatus) {
case 'esriJobSubmitted':
jobstatus = 'Submitted...';
break;
case 'esriJobExecuting':
jobstatus = 'Executing...';
break;
case 'esriJobSucceeded':
domUtils.hide(dom.byId('status'));
break;
case 'esriJobFailed':
jobstatus='失败';
break;
}
dom.byId('status').innerHTML = jobstatus;
}
function gpJobFailed(error) {
//输出错误信息
dom.byId('status').innerHTML = error;
domUtils.hide(dom.byId('status'));
}
});
</script>
</head>
<body class="tundra">
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<span id="status" style='position: absolute; bottom: 5px;'></span>
</div>
<div id="leftPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'">
<div id="info">
<div align="center">
<button id="execute">
执行
</button>
</div>
</div>
<div id='legendDiv' style='display: none; margin-top: 15px;'></div>
</div>
</div>
</body>
</html>结果：
有什么不懂的可以问我。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
