arcgis js 4.x 调用gp栅格计算将结果渲染后叠加到天地图

本文链接：https://blog.csdn.net/qq_37121832/article/details/121269991

这几天在做arcgis js 4.x 调用gp栅格计算服务，将返回的栅格结果渲染后叠加到天地图上的功能，期间查询了很多相关资料，特此整理，方便大家学习。

一、栅格计算器GP服务发布

1.首先使用arcmap建立gp分析模型，运行成功后发布成arcgis server服务

2.前端查看服务

发布成功后可以在前端测试gp服务是否能够运行

这里抛出一个常见的坑，如果想在前端直接加载结果图层的话，需要勾选这里

能够返回正确结果的话说明gp服务已经发布成功了

二、GP服务前端调用以及叠加代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>Create a 2D map</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .content {
      border-radius: 10px;
      border: 1px solid #ced4da;
      position: absolute;
      top: 15px;
      left: 80px;
      width: 200px;
      background-color: #fff;
      text-align: center;
    }

    .input-warp {
      width: 150px;
      margin: 10px 25px;
    }

    .input-warp>input {
      margin: 5px 0px 0px 0px;
      width: 50px;
      display: inline-block;
      height: 20px;
    }

    #execute {
      margin-bottom: 15px;
    }

    .legend {
      display: none;
      position: absolute;
      bottom: 25px;
      left: 100px;
      background: #fff;
      height: 160px;
      width: 120px;
      border-radius: 10px;
      border: 1px solid #ced4da;
    }

    .level {
      width: 25px;
      height: 15px;
      display: inline-block;
      margin: 5px 20px 0px 20px;
    }

    span {
      font-size: 14px;
    }
  </style>
  <!-- 新 Bootstrap4 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

  <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

  <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
  <script type="text/javascript" src="https://js.arcgis.com/4.18/init.js"></script>
  <script>
    require([
      "dojo/on",
      "dojo/dom",
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/WebTileLayer",
      "esri/tasks/support/RasterData",
      "esri/tasks/Geoprocessor",],
      function (on, dom, Map, MapView, WebTileLayer, RasterData, Geoprocessor) {
        let layerDT = new WebTileLayer({
          name: "天地图底图",
          urlTemplate: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=42dca576db031641be0524ee977ddd04'
        })
        let layerZJ = new WebTileLayer({
          name: "天地图注记",
          urlTemplate: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=42dca576db031641be0524ee977ddd04'
        })

        let map = new Map({
          layers: [layerDT, layerZJ]
        });

        var view = new MapView({
          container: 'viewDiv',
          map: map,
          zoom: 10,
          center: [118.703581, 40.003963]
        });
        var gpServiceUrl = "http://localhost:6080/arcgis/rest/services/ttttt/123456/GPServer/2018%E5%87%8F2000"
        var gp = new Geoprocessor(gpServiceUrl);
        on(dom.byId("execute"), "click", function () {
          var params = {
            "rastercalc": "FVC2000.dat",
            "2000resi": "Wet2000.dat"
          }
          gp.submitJob(params).then(function (jobInfo) {
            var jobid = jobInfo.jobId;
            var options = {
              interval: 1500,
              statusCallback: function (j) {
                console.log("Job Status: ", j.jobStatus);
              }
            };

            gp.waitForJobCompletion(jobid, options).then(function () {
              gp.getResultMapImageLayer(jobid).then(e => {
                $(".legend").show()
                map.add(e);
              })
            })
          });
        })
      });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div class="content">
    <button id="execute" type="button" class="btn btn-outline-primary btn-sm">执行</button>
  </div>
</body>

</html>

代码稍微修改一下就可以看到效果