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

广州前端开发 • • ArcGIS API for Js 4.x • 558 阅读

这几天在做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>

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

三、对栅格结果分级渲染

gp服务生成的是地图服务，并不是影像服务，所以在前端无法渲染。在制作地理处理模型时，可以添加对其进行渲染的工具，而不是调用时。
具体做法为：
想在GP服务结果符号系统中生成渲染效果，右键该图层，然后保存成为图层文件（save as layer file）。

利用模型构建器可以对结果使用layer symbology的方法，如下图，在GP工具的结果out_raster属性中导入上一步生成的图层，以便在后续使用其渲染样式。

至此arcgis js 4.x 调用gp栅格计算将结果渲染后叠加到天地图上的功能就完成了，欢迎交流

附上述资料出处

https://ask.csdn.net/questions/175607

https://blog.csdn.net/weixin_44265800/article/details/94877229

http://zhihu.geoscene.cn/question/19096?rf=false&answer_id=20055&single=TRUE

版权声明：
作者：广州前端开发
链接：https://www.develophm.com/index.php/arcgis-js-4-x-%e8%b0%83%e7%94%a8gp%e6%a0%85%e6%a0%bc%e8%ae%a1%e7%ae%97%e5%b0%86%e7%bb%93%e6%9e%9c%e6%b8%b2%e6%9f%93%e5%90%8e%e5%8f%a0%e5%8a%a0%e5%88%b0%e5%a4%a9%e5%9c%b0%e5%9b%be%e4%b8%8a/1481/
来源：开发之家
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>