arcgis api for js调用GP服务发布栅格计算器进行NDVI的计算

最新推荐文章于 2024-08-23 20:49:03 发布

gis_rc

最新推荐文章于 2024-08-23 20:49:03 发布

阅读量1.6k

点赞数

分类专栏：想到什么写什么类文章标签： gp服务 arcgis api NDVI 栅格计算器

本文链接：https://blog.csdn.net/weixin_44265800/article/details/94877229

版权

想到什么写什么类专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在做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>

结果：

在这里插入图片描述
有什么不懂的可以问我。