（九）ArcGIS API For Javascript调用结果地图服务

最新推荐文章于 2024-07-07 10:08:32 发布
最新推荐文章于 2024-07-07 10:08:32 发布
阅读量8.4k 收藏 13
点赞数 5
分类专栏： ArcGIS API For JS基础学习 文章标签： javascript api arcgis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lovecarpenter/article/details/52673926
版权

文章目录

1.引言

结果地图服务也是GP服务的一种，当GP服务的结果返回栅格数据时，我们往往使用结果地图服务来对生成的栅格数据进行渲染，如何发布结果地图服务请看：如何发布结果地图服务
本实例是：克里金差值

2.ArcGIS API调用结果地图服务

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

这里写图片描述

这里写图片描述

2.1代码实现

  • 在页面添加地图（略）
  • 创建两个按钮（一个是画点，一个是进行插值运算）
<input id="Btn" type="button" value="画点" />
<input id="king" 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);
					//定义一个i，为了给graphic赋予属性，为差值做准备。
					var i=20;
					//给绘图工具绑定绘图完成事件
					on(toolBar, "draw-complete", function(result){
						//保证每一次i的值都不一样，如果所有点的属性都一样，是不可以差值的。
						i=i+40;
						//获得几何形状
						var geometry = result.geometry;
						//给图形一个m属性，我们后面对m进行差值
						var graphicpoint = new Graphic(geometry, psymbol,{"m":i});
						pointSet.features.push(graphicpoint);	
						MyMap.graphics.add(graphicpoint);
					});	
		});
  • 给插值按钮绑定事件
//声明gp对象
var gp;
on(dom.byId("king"),"click",function(e){
					//定义gp服务对象
					gp= new Geoprocessor("http://localhost:6080/arcgis/rest/services/Test/myKing/GPServer/king");
					//定义GP服务参数对象
					var gpParams={};
					//添加点集合的字段信息
					pointSet.fields=[{
					"name":"m",
					"type":"esriFieldTypeSmallInteger",
					"alias":"m"
					}];
					//添加Input参数
                    gpParams.Input=pointSet;
					//添加Z属性：即差值的属性
					gpParams.Z="m";
                    gp.submitJob(gpParams,completeCallback);
})
  • 回掉函数处理结果
function completeCallback(jobInfo)
                {
					gp.on("get-result-image-layer-complete",function(gpLayer){
                        MyMap.addLayer(gpLayer["layer"])
                    })
					gp.getResultImageLayer(jobInfo.jobId,"out");
                    
					
                    
}

2.2 全部代码

<!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/layers/ImageParameters",
            "dojo/domReady!"],
            function (Map,
                ArcGISDynamicMapServiceLayer,
				dom,
                Geoprocessor,
                FeatureSet,
                SimpleMarkerSymbol,
                SimpleLineSymbol,
                Draw,
                SimpleFillSymbol,on,Graphic,ImageParameters) {
                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);
					//定义一个i，为了给graphic赋予属性，为差值做准备。
					var i=20;
					//给绘图工具绑定绘图完成事件
					on(toolBar, "draw-complete", function(result){
						//保证每一次i的值都不一样，如果所有点的属性都一样，是不可以差值的。
						i=i+40;
						//获得几何形状
						var geometry = result.geometry;
						//给图形一个m属性，我们后面对m进行差值
						var graphicpoint = new Graphic(geometry, psymbol,{"m":i});
						pointSet.features.push(graphicpoint);	
						MyMap.graphics.add(graphicpoint);
					});	
				});
				var gp;
                on(dom.byId("king"),"click",function(e){
					//定义gp服务对象
					gp= new Geoprocessor("http://localhost:6080/arcgis/rest/services/Test/myKing/GPServer/king");
					//定义GP服务参数对象
					var gpParams={};
					//添加点集合的字段信息
					pointSet.fields=[{
					"name":"m",
					"type":"esriFieldTypeSmallInteger",
					"alias":"m"
					}];
					//添加Input参数
                    gpParams.Input=pointSet;
					//添加Z属性：即差值的属性
					gpParams.Z="m";
					//执行gp服务，注意这里是执行submitJob，因为是同步的gp服务
                    gp.submitJob(gpParams,completeCallback);
				})			
                function completeCallback(jobInfo)
                {
	                //给gp服务绑定获得图层事件
					gp.on("get-result-image-layer-complete",function(gpLayer){
						//将图层添加到地图中
                        MyMap.addLayer(gpLayer["layer"])
                    })
                    //注意out是服务定义的参数
					gp.getResultImageLayer(jobInfo.jobId,"out");
                    					                   
                }   

            });


    </script>
</head>
<body>
    <div id="MyMapDiv" class="MapClass"></div>
    <input id="Btn" type="button" value="画点" />
    <input id="king" type="button" value="插值分析" />

</body>
</html>

运行代码之前：

这里写图片描述

运行代码之后：

这里写图片描述

3.代码下载地址

GISer.Wang
关注
专栏目录
Arcgis js api调用常用三种地图服务Demo
07-25
花了一天的时间来研究Arcgis js api调用常见的三种地图服务，这里简单的整理了一下，希望可以让学习这方面的人少走点弯路
arcgis api for javascript 学习（一） 调用在线发布的动态地图
weixin_30791095的博客
07-25 1147
1、图中显示为arcgis软件中显示的地图文件 2、调用动态地图主要的是知道动态地图的URL地址 3、通过IDE（webstorm）调用动态地图，如图 4、话不多说，直接上代码 <!DOCTYPE HTML> <html> <head> <title>调用动态地图服务</title> ...
ArcGIS JavaScript 开发示例（一）
最新发布
龙哥盟
07-07 1170
Web 技术正在迅速变化，ArcGIS JavaScript API 也是如此。无论您的开发经验如何，ArcGIS 都提供了一种简单的方式来创建和管理地理空间应用程序。它为您提供了地图和可视化、分析、3D、数据管理以及对实时数据的支持。define方法定义了一个模块。一个模块可以有自己的私有变量和函数，只有被define函数返回的变量和函数才会被导入该模块的其他函数所暴露。define方法的一个示例如下：define方法中的第一个参数是模块名称或 ID。这是可选的。是我们模块的名称。
创建ArcGIS API for JavaScript的第一个示例程序
分享经验，共同进步.
12-11 7552
在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境，如果您还没有搭建好开发环境的话，参考博客：http://blog.csdn.net/zdw_wym/article/details/48678913。        如果开发环境搭建好了的话，那么今天我们继续来搭建我们的第一个ArcGIS API for JavaScript应用程序。    下面首先将代码
ArcGIS API for JavaScript开发环境搭建及第一个实例demo
热门推荐
分享经验，共同进步.
09-25 4万+
ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3.9，它提供了更为丰富而又强大的功能。            一、安装前准备       1、ArcGIS Server for JavaScript API各版本下载地址：http://support.esrichina-bj.cn/2011/0223/960.html，我们选择下载最新的
arcgis api for js 地图查询
weixin_30576859的博客
02-20 142
arcgis api for js入门开发系列四地图查询(含源代码) 上一篇实现了demo的地图工具栏，本篇新增地图查询功能，包括属性查询和空间查询两大块，截图如下： 属性查询效果图： 空间查询效果图： 谈核心代码实现之前，我大概的讲一讲arcgis for js的地图查询方式，一般来说，总共有三种查询方式：FindTask、Identify...
ArcGIS API for JavaScript4.10加载高德地图
01-16
在本文中，我们将深入探讨如何使用ArcGIS API for JavaScript 4.10版本来加载高德地图，并结合高德地图的影像数据，实现自定义的GaodeMapLayer模块。ArcGIS API for JavaScript是一个强大的Web GIS开发工具，它允许...
ArcGIS API for JavaScript v3.3下载（api + sdk开发包）
10-06
ArcGIS API for JavaScript的核心在于其能够与ArcGIS Server和ArcGIS Online无缝集成，使得开发人员可以轻松地在网页上创建动态的地图服务、图层、查询、分析等。API支持多种地图操作，包括缩放、平移、图层控制、...
ArcGIS API for JavaScript4.10加载腾讯地图
01-19
ArcGIS API for JavaScript是一个强大的工具，允许开发人员在Web应用中集成地理信息系统（GIS）功能，而腾讯地图则是中国广受欢迎的地图服务提供商之一。 首先，让我们了解ArcGIS API的基本概念。它是由Esri公司...
基于ArcGIS API for JavaScript加载天地图
04-06
本文将深入探讨如何利用ArcGIS API for JavaScript来加载天地图，一个由中国国家基础地理信息中心提供的在线地图服务。 首先，ArcGIS API for JavaScript是Esri为Web开发人员设计的一套JavaScript库，用于构建交互...
Arcgis js 调用常用三种地图服务Demo
02-07
js调用Arcgis 常用三种地图服务的Demo，包括Google、百度和天地图
基于ArcGIS API for JavaScript加载百度各种类型切片地图
03-24
基于ArcGIS API for JavaScript加载百度各种类型切片地图，资源包括封装的BaiduLayer模块，示例页面。
ArcGIS server js api开发示例
04-20
ArcGIS server js api开发示例
基于ArcgIs api for js 的路径分析例子
08-20
基于ArcgIs api for js 的路径分析例子，使用百度瓦片地图作为底图，将相关服务地址路径进行更换，即可。
arcgis_js例子加api_v3.27.rar.zip
09-29
arcgis_js例子加api_v3.27版本
arcgis api for js入门开发系列四地图查询
weixin_34001430的博客
11-17 273
备注：由于实现本篇功能的需求，修改了地图数据的dlsearch.mxd，然后更新了地图服务，需要的在文章最后有提供最新的mxd以及源代码下载的 上一篇实现了demo的地图工具栏，本篇新增地图查询功能，包括属性查询和空间查询两大块，截图如下： 属性查询效果图： 空间查询效果图：   谈核心代码实现之前，我大概的讲一讲arcgis for js的地图查询方式，一般来说，总共有三种...
ArcGIS JavaScript API调用Google、天地图、百度等第三方在线地图服务
chuanzilong9091的博客
06-02 867
部分文字参考了http://www.cnblogs.com/oceanking/p/3930305.html 一 获取ArcGIS JavaScript API 本次试验所采用的api版本为：3.9。 二 本地部署API 采用IIS部署发布本地API 1、可打开API包中...
ArcGIS API for JavaScript中要素图层查询（地图外搜索点击查询）的方法总结
韦_恩的博客
07-10 6719
1.Arcgis API for JavaScript中常见的三种查询方式 在Arcgis API for JavaScript中常见的属性查询有三种方式：QueryTask，FindTask,IdentifyTask.【具体用法请参考官网示例】 QueryTask:只可在要素服务（featurelayer）或者某个地图服务（MapImageLayer）的某个子图层进行查询(如下图，你发布的地图服务必须要可以支持query才可以，发布服务如果为featurelayer其本身就支持，如果发布为MapI
05-ArcGIS API For JavaScript查询功能
Ocean111best的博客
11-24 767
看到有博客比自己总结得更好，所以就没有再额外重新再写了。 一、前言 在 ArcGIS API 中查询功能是非常常用的，Esri 提供了三个类用于实现矢量数据查询功能：FindTask、QueryTask、IdentifyTask，他们之前的区别为： FindTask 只能进行属性查询，QueryTask，IdentifyTask 两个类既可以进行属性查询，也可以进行空间查询。 对于 Que...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值