（八）ArcGIS API For Javascript调用GP服务

最新推荐文章于 2021-04-12 10:36:35 发布
最新推荐文章于 2021-04-12 10:36:35 发布
阅读量1w 收藏 24
点赞数 12
分类专栏： ArcGIS API For JS基础学习 文章标签： javascript api arcgis web api
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LoveCarpenter/article/details/52673406
版权

文章目录

1.引言

     ArcGIS API中关于GP服务的调用是比较容易出错的，出错的大部分原因便是Web API调用GP服务的时候参数不对应导致的，在以前我们发布了一个自己定义的缓冲区分析的GP服务，如果不会自己发布GP服务，请先看：自己发布GP服务

2.ArcGIS API调用GP服务

首先我们先看一下服务的定义：

这里写图片描述

仔细观察了服务的定义，然后接下来我们将在Web中调用我们的GP服务

2.1代码实现

  • 在页面加入地图（略）
  • 在页面添加两个按钮（第一个按钮用于画点，第二个按钮用于缓冲区分析）
<input id="Btn" type="button" value="画点" />
<input id="buffer" type="button" value="缓冲区分析" />
  • 定义一个点几何对象（与服务定义的类型对应）
//定义点几何对象
var pointSet = new FeatureSet();
  • 定义点符号对象
var psymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CROSS, 12,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([255, 0, 0]), 2),
new dojo.Color([0, 255, 0, 0.25]));
  • 给画点按钮绑定点击事件
on(dom.byId("Btn"),"click",function(e){
					//定义绘图对象
					var toolBar= new Draw(MyMap, { showTooltips: true });
					//激活绘图对象
					toolBar.activate(Draw.POINT);
					on(toolBar, "draw-complete", function(result){
						//获得绘图结束的点对象
						var geometry = result.geometry;
						//根据点对象生成相应的图形
						var graphic = new Graphic(geometry, psymbol);
						//将点对象存储在点几何中
						pointSet.features.push(graphic);
						//将图形存放在地图中，然后得以显示
						MyMap.graphics.add(graphic);

					});	
});
  • 给缓冲区分析按钮添加绑定事件
on(dom.byId("buffer"),"click",function(e){
					//定义GP服务对象
					var buffer = new Geoprocessor("http://localhost:6080/arcgis/rest/services/Test/MyBuffer/GPServer/Mybuffer");
					//构建GP服务参数
					var gpParams={};
					//GP服务的Input参数
					gpParams.Input=pointSet;
					//GP服务的dis参数
					var dis=new LinearUnit({
                        "distance": 100,
                        "units": "esriMeters"
                    });
                    gpParams.dis=dis;
					//执行GP服务
					buffer.execute(gpParams, showResult);
})
  • 处理GP服务返回的结果
function showResult(results, messages){
                    var features = results[0].value.features;
                    for (var i = 0; i < features.length; i++) {
                        var graphic = features[i];
						//定义线符号
						var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 1);
						//定义面符号
                        var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new dojo.Color([255, 255, 0, 0.25]));
						//设置面符号
                        graphic.setSymbol(PolygonSymbol);
                        MyMap.graphics.add(graphic);
                    }
 }

2.2 运行代码发现错误

当我们运行程序发现提示错误：

这里写图片描述

此时我们观察前台传给后台的参数：

Input:{
			"geometryType":"esriGeometryPoint",
			"features":[{"geometry":{"x":21264961.8441914,"y":3997922.462940743,"spatialReference":{"wkid":2334,"latestWkid":2334}}}],
			"sr":{"wkid":2334,"latestWkid":2334}
	}
dis: {"distance":100,"units":"esriMeters"}

传给后台的参数和GP服务的参数对比，发现Input参数，缺少fields字段：

这里写图片描述

2.3修改错误

我们给运行GP服务之前给Input参数添加上Fields字段:

on(dom.byId("buffer"),"click",function(e){
					//定义GP服务对象
					var buffer = new Geoprocessor("http://localhost:6080/arcgis/rest/services/Test/MyBuffer/GPServer/Mybuffer");
					//构建GP服务参数
					var gpParams={};
					//添加fields字段，为了和后台服务字段匹配
					pointSet.fields=[];
					//GP服务的Input参数
					gpParams.Input=pointSet;
					//GP服务的dis参数
					var dis=new LinearUnit({
                        "distance": 100,
                        "units": "esriMeters"
                    });
                    gpParams.dis=dis;
					//执行GP服务
					buffer.execute(gpParams, showResult);
});

2.4 全部代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>GP</title>
    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script  type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <style type="text/css">
        .MapClass{
            width:100%;
            height:600px;
			border:1px solid #000;
        }
    </style>
    <script type="text/javascript" charset="utf-8">

        require(["esri/map",
            "esri/layers/ArcGISDynamicMapServiceLayer",
			"dojo/dom",
            "esri/tasks/Geoprocessor",
            "esri/tasks/FeatureSet",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/toolbars/draw",
            "esri/symbols/SimpleFillSymbol",
            "dojo/on","esri/graphic",
            "esri/tasks/LinearUnit",
            "dojo/domReady!"],
            function (Map,
                ArcGISDynamicMapServiceLayer,
				dom,
                Geoprocessor,
                FeatureSet,
                SimpleMarkerSymbol,
                SimpleLineSymbol,
                Draw,
                SimpleFillSymbol,on,Graphic,LinearUnit) {
                var MyMap = new Map("MyMapDiv");
                
                var layer = new ArcGISDynamicMapServiceLayer
                ("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer");
                MyMap.addLayer(layer);
				//定义点几何对象
				var pointSet = new FeatureSet();
				var psymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CROSS, 12,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                new dojo.Color([255, 0, 0]), 2),
                new dojo.Color([0, 255, 0, 0.25]));
				on(dom.byId("Btn"),"click",function(e){
					//定义绘图对象
					var toolBar= new Draw(MyMap, { showTooltips: true });
					//激活绘图对象
					toolBar.activate(Draw.POINT);
					on(toolBar, "draw-complete", function(result){
						//获得绘图结束的点对象
						var geometry = result.geometry;
						//根据点对象生成相应的图形
						var graphic = new Graphic(geometry,psymbol);
						//将点对象存储在点几何中
						pointSet.features.push(graphic);
						//将图形存放在地图中，然后得以显示
						MyMap.graphics.add(graphic);

					});	
				});
				
				on(dom.byId("buffer"),"click",function(e){
					//定义GP服务对象
					var buffer = new Geoprocessor("http://localhost:6080/arcgis/rest/services/Test/MyBuffer/GPServer/Mybuffer");
					//构建GP服务参数
					var gpParams={};
					//添加fields字段，为了和后台服务字段匹配
					pointSet.fields=[];
					//GP服务的Input参数
					gpParams.Input=pointSet;
					//GP服务的dis参数
					var dis=new LinearUnit({
                        "distance": 100,
                        "units": "esriMeters"
                    });
                    gpParams.dis=dis;
					//执行GP服务
					buffer.execute(gpParams, showResult);
				});
                function showResult(results, messages)
                {
                    var features = results[0].value.features;
                    for (var i = 0; i < features.length; i++) {
                        var graphic = features[i];
						//定义线符号
						var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 1);
						//定义面符号
                        var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new dojo.Color([255, 255, 0, 0.25]));
						//设置面符号
                        graphic.setSymbol(PolygonSymbol);
                        MyMap.graphics.add(graphic);
                    }
                }
                
            });


    </script>
</head>
<body>
    <div id="MyMapDiv" class="MapClass"></div>
    <input id="Btn" type="button" value="画点" />
    <input id="buffer" type="button" value="缓冲区分析" />
</body>
</html>

运行之后的结果为：

这里写图片描述

3.代码下载地址

GISer.Wang
关注
  • 12
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
二、Arcgis api js -- Graphic
wo的博客
03-02 751
1、绘制 Draw 1、绘制点、线、面 1）步骤 新建点线面对象new Point(); 新建点线面symbol; 新建Graphic对象：参数是“点对象”和“symbol”; this.view.graphics.add(pointGraphic); A）新建point对象 法一： var point = { type: “point”, longitude: 120.037, latitude: 35.883 }; 法二： var point = new Point({x: 120.037, y:3.
Arcgis javascript那些事儿（十六）——GP服务的发布与使用
xcymorningsun的专栏
08-10 3059
一、引言        GP服务是为了弥补arcgis api的不足，提供用户自定义接口，有点类似SOE的开发，但是对编程能力要求不是很高，只需要在arcmap中创建模型发布就可以实现。         GP服务主要分为两种：一、返回矢量数据；二、返回栅格数据。 二、GP服务发布 1、模型创建 在arcmap目录中添加工具箱创建模型
ArcGIS API for JavaScript4.8 实例
10-26
包含大量的ArcGIS API for JavaScript4.8的开发实例，可用于WebGIS开发者学习资料，内容全面，并且能正常执行。
ARCGIS API FOR JS 实习调用GP服务
05-06
本案例是通过ARCGIS API FOR JS 调用GP服务，拓展更多的网络功能，本案例较容易上手注释较清楚
ArcGIS API for JavaScript 4.22版 API+SDK
03-10
ArcGIS API for JavaScript用于构建高性能的WebGIS应用程序，同时结合现代网络技术和强大的地理空间功能，利用ArcGIS Online、ArcGIS Server发布的地图服务以及网络上的其他服务内容，使用户在web端能够进行应用程序的创建和智能的数据可视化。 ArcGIS API for JavaScript整个体系构建与Dojo基础之上，而Dojo是一个JavaScript实现的开源工具包，其基本语法、使用方法大家可以参考Dojo官方网站的相关说明和示例代码。
arcgis api for javascript v4.23
06-26
arcgis api for javascript v4.23
JS 之 前台调用后台变量和方法
等一个故事
07-30 2101
在我们平时的网站开发过程中，并不是所有的网页都是后台查询出一个DataTable或者List然后绑定到DataGrid上。我们可能还会遇到前台需要后台的某一个变量，或者前台某个显示的地方需要调用一下后台的某一个查询的方法。下面我就给大家列举一个小例子： Asp.Net前台代码： " />
js与asp 变量相互调用 变量互传的方法（搜集）
06-27 3650
1- js变量与asp变量相互调用方法 js调用asp: id=''//别忘加引号 asp传js值: pp.asp?id='+id.value+' 2- javascript与asp变量互传 javascript --> asp: i="1234567"; document.form1.num.value=i; asp --
Arcgis API for Javascript绘制Graphic问题
Misaka_0的博客
05-13 3436
在调用map.graphics.add(graphic);时，遇到了错误[ Cannot read property 'add' of null ]原因时同时执行了 var map=new Map();和map.graphics.add(graphic);使JS运行到后一句话时，map还没有实例化完成，以致于不能调用add方法。解决方式是实例化map对象，给一个完成创建的反馈之后再调用add方法。...
ArcGIS API for Javascript和GP服务调用
balabalawho的专栏
04-12 2885
第一次使用ArcGIS API，也是第一次使用ArcGIS Server的GPServer的调用，
GP服务的使用详解
孙霸天的专栏
08-08 1万+
最近公司需要开发在线的WebGIS工具实现插值等功能，经过我的一番瞎几把研究，我发现目前只有ArcGIS Server发布GP工具可以实现这点（ps:应该是有其他的在线js可以用，只是我没发现）。于是乎就盯着GP服务去了，我为了完成这个功能，我在网上翻遍了博客和论坛，找到的有用的信息实在是太少太少，只能自己琢磨。上一篇已经把插值的代码贴出来了，这次我想把个人心得和另一个GP工具也分享一下。 废话...
ArcGIS API for Javascript JS 中文版 汉化版
01-25
这些示例展示了如何使用ArcGIS JavaScript API的各种功能。每个示例页包含一个在线的演示，示例里做了什么的描述和源代码。查看视频展示如何拷贝示例代码并在机器上运行。 这些示例使用一颗星，两颗星或三颗星对相关复杂度进行了分类。如果刚刚学习ArcGIS JavaScript API，从一颗星示例开始可以更好的理解示例。在很多情况下，可以扩展或合并示例来为自己的应用创建一个起始点。查看视频来学习如何创建起始点。 示例使用的服务来自ESRI示例服务器(sampleserver1 和 sampleserver2)和 ArcGIS Online。能够在自己的测试应用中使用来自ESRI示例服务器上的服务来学习API。也可以在自己的应用中使用ArgGIS Online图层。使用条款见ArcGIS Online的首页。
ArcGIS API for JavaScript实现地图常用工具条 距离测量，面积测量
idomyway的博客
08-31 8756
距离测量，面积测量等工具条是常用的工具。也是GIS系统的基础功能 效果图 工具条样式： 距离测量： 面积测量： 代码： require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolbars/navigation", "esri/
arcgis java script api 3.2 中 通过route 查询后,无法显示路径的问题
一个烂人的随手笔记
12-13 3069
问题描述:   应用有个底图,是包含多个图层的基础图层(切片图层) root.mainLayerURL = "http://115.238.43.203/arcgis/rest/services/V32/TATP3D/MapServer"  定义了一个路径查询使用的道路图层(动态图层) root.routeMapURL = "http://115.238.43.203/arcgis/res
ArcGIS API 调用GP服务
qq_43314764的博客
08-13 1217
上一章描述了如何发布GP服务，下面来讲一下如何对GP服务进行应用。 数据地址替换一下，可以正常执行，这是采用arcgis api for javascript 3.29版本； <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport...
在Js(JavaScript)和aspx中引用Asp.Net的.cs文件中传过来的变量参数！（实例）
【敦厚的曹操】的专栏
11-30 3955
一、在Cs中加入的代码：   protected void Page_Load(object sender, EventArgs e)     {     }     // ------------------- 下面是传入的参数     public string getdepartmentname()      {         return this.Re
（五）ArcGIS API For Javascript之GraphicsLayer
热门推荐
王培晓Carpenter
09-27 1万+
1.引言 2.需求 2.1.根据具体坐标生成Graphic 2.1.1代码实现 2.1.2全部代码 2.1.3代码解释 2.2.GraphicsLayer的属性查询 2.2.1代码实现 2.2.2全部代码 2.2.3代码解释 2.3.实现用户交互画图（Draw工具） 2.3.1代码实现 2.3.2全部代码 2.3.3代码解释 3.总结 1.引言 &amp;nbsp; &amp;...
asp.net js调用后台带参数的函数
11-02 6560
解决方案：将js需要调用的后台函数，放到一个 前台按钮单击事件中，用js模拟单击事件，达到调用的目的！传值用隐式控件！  function getGoodsList(strTagID) { document.getElementById("Hi
ArcGIS API for JavaScript 中文教程
最新发布
05-17
ArcGIS API for JavaScript 是一个基于Web的GIS API，用于创建交互式地图和应用程序。它提供了许多强大的功能和工具，例如地图、图层、符号、查询、分析、可视化等等，可以帮助开发人员构建高度定制化的GIS应用程序。 以下是一些关于ArcGIS API for JavaScript的中文教程资源： 1. 官方文档中文版：https://developers.arcgis.com/javascript/latest/guide/index.html 2. ArcGIS API for JavaScript 入门教程：https://www.cnblogs.com/axl234/p/11000904.html 3. ArcGIS API for JavaScript 实战教程：https://www.cnblogs.com/axl234/p/11000905.html 4. ArcGIS API for JavaScript常用功能教程：https://www.cnblogs.com/yangbj/p/10432025.html 5. ArcGIS API for JavaScript 开发实例教程：https://blog.csdn.net/weixin_39532995/article/details/104532747 希望这些资源能帮助你学习ArcGIS API for JavaScript，进一步掌握GIS开发技术。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值