（十四）ArcGIS API For Javascript之几何服务

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

文章目录

1.引言

      什么是几何服务（GeometryService）？从字面意义上来说是和几何（Geometry）相关的服务，具体一点讲我们可以用这个类实现一些简单的图形操作。例如：

  • 测量直线的距离
  • 形状的缓冲区分析
  • 判断两个形状之间的关系（相交，相离等等）
  • 两个形状求交
  • 对形状的裁剪等等

当然不仅仅是上述列举的一些，如果想要具体的了解几何服务的功能，可以直接去官方网站查看此类提供给我们的方法：几何服务在线帮助

在此篇博客中以缓冲区分析和图形求交来介绍几何服务的使用

2.启用几何服务

      当我们安装好ArcGIS Server的时候，几何服务就已经存在了，因此几何服务不需要我们发布，但是在默认情况下几何服务是关闭的，因此我们首先启动几何服务，步骤如下：

  • 登录我们的ArcGIS Server Manager

这里写图片描述

  • 启动成功

这里写图片描述

  • 几何服务的URL

这里写图片描述

3.利用几何服务进行缓冲区分析

几何服务的使用一般分为四个步骤：

  • 创建几何服务对象
  • 创建参数
  • 构建参数对象
  • 执行相应的方法，并处理返回的结果

3.1代码实现

  • 加载地图（省略）
  • 创建两个按钮–一个按钮用于画点，另外一个按钮用于缓冲区分析
<input id="point" type="button" value="点"/>
<input id="Btn" type="button" />
  • 创建相关对象（例如符号对象，Draw对象等等）
				//使用toolbar上的绘图工具
                var toolBar = new Draw(map);
				//创建点符号
                var pointSymbol = new SimpleMarkerSymbol();
                pointSymbol.style = SimpleMarkerSymbol.STYLE_CIRCLE;
                pointSymbol.setSize(12);
                pointSymbol.setColor(new Color("#FFFFCC"));
                //线符号
                lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
                //面符号
                polygonSymbol= new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 255, 0, 0.25]));
  • 创建几何服务对象，创建相应的缓冲区参数对象
var geometryServices = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
var params = new BufferParameters();
  • 给画点按钮绑定事件

				//给画点按钮绑定事件
				on(dom.byId("point"),"click",function(){
					//激活画点工具
					toolBar.activate(Draw.POINT, {
                        showTooltips:true
                    })
					
				})

				//绘图结束绑定事件
				on(toolBar,"draw-end",function(result){
					//获得点形状
					var geometry=result.geometry;
					//创建Graphic
					var graphicpoint = new Graphic(geometry, pointSymbol);
                    map.graphics.add(graphicpoint); 
					//关闭绘图工具
                    toolBar.deactivate();
					//很重要！！！在这里构建缓冲区分析的形状属性
					//注意这里可以放一个数组，此处为了方便我们只对一个形状进行缓冲区分析
					params.geometries  = [ geometry ];

					
				})
  • 给缓冲区分析按钮绑定事件
				//给缓冲区分析按钮绑定事件
                on(dom.byId("Btn"),"click",function(){
					//缓冲距离
					params.distances = [ "80" ];
					//空间参考
					params.bufferSpatialReference = map.spatialReference;
					params.outSpatialReference = map.spatialReference;
					//执行分析处理结果
					geometryServices.buffer(params,function(result){
						//处理缓冲区分析得到的结果
						for(var idx in result)
						{	
							//创建Graphic
							var graphic=new Graphic(result[idx],polygonSymbol)
							//将每一个结果都放在map中
							map.graphics.add(graphic)
						}
					});


				})

3.2运行结果

这里写图片描述

3.3 全部代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>缓冲区分析</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:500px;
            border:1px solid #000;
        }
    </style>
    <script type="text/javascript">

        require(["esri/map",
			"dojo/dom","dojo/on",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/toolbars/draw",
            "esri/graphic",
            "esri/tasks/GeometryService",
            "esri/tasks/BufferParameters",
			"dojo/colors",
            "dojo/domReady!"],
            function (Map,dom,on,
                ArcGISDynamicMapServiceLayer,
                SimpleMarkerSymbol,
                SimpleLineSymbol,
                SimpleFillSymbol,
                Draw,
                Graphic,
                GeometryService,
                BufferParameters,Color) {
                var map = new esri.Map("mapDiv");
                var layer = new esri.layers.ArcGISDynamicMapServiceLayer
                ("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer");
                map.addLayer(layer);
				//创建几何服务对象
                var geometryServices = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
				//创建缓存参数对象
				var params = new BufferParameters();
				
                //使用toolbar上的绘图工具
                var toolBar = new Draw(map);
				//创建点符号
                var pointSymbol = new SimpleMarkerSymbol();
                pointSymbol.style = SimpleMarkerSymbol.STYLE_CIRCLE;
                pointSymbol.setSize(12);
                pointSymbol.setColor(new Color("#FFFFCC"));
                //线符号
                lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
                //面符号
                polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 255, 0, 0.25]));
				//给画点按钮绑定事件
				on(dom.byId("point"),"click",function(){
					//激活画点工具
					toolBar.activate(Draw.POINT, {
                        showTooltips:true
                    })
					
				})
				//绘图结束绑定事件
				on(toolBar,"draw-end",function(result){
					//获得点形状
					var geometry=result.geometry;
					//创建Graphic
					var graphicpoint = new Graphic(geometry, pointSymbol);
                    map.graphics.add(graphicpoint); 
					//关闭绘图工具
                    toolBar.deactivate();
					//很重要！！！在这里构建缓冲区分析的形状属性
					//注意这里可以放一个数组，此处为了方便我们只对一个形状进行缓冲区分析
					params.geometries  = [ geometry ];

					
				})
				//给缓冲区分析按钮绑定事件
                on(dom.byId("Btn"),"click",function(){
					//缓冲距离
					params.distances = [ "80" ];
					//空间参考
					params.bufferSpatialReference = map.spatialReference;
					params.outSpatialReference = map.spatialReference;
					//执行分析处理结果
					geometryServices.buffer(params,function(result){
						//处理缓冲区分析得到的结果
						for(var idx in result)
						{	
							//创建Graphic
							var graphic=new Graphic(result[idx],polygonSymbol)
							//将每一个结果都放在map中
							map.graphics.add(graphic)
						}
					});


				})
               
            });
    </script>
</head>
<body>
    <div id="mapDiv" class="MapClass"></div>
    <input id="point" type="button" value="点"/>
    <input id="Btn" type="button" value="缓冲区分析" />
</body>
</html>

4.利用几何服务进行多边形求交

首先我们先看看求交这一个方法

GeometryService.intersect(geometries, geometry, callback?, errback?)

解释：	
此方法有四个参数，
第一个参数是   形状的集合(多个形状)
第二个参数是   一个形状
第三个参数是   运行成功之后的结果
第四个参数是   运行失败之后的结果

方法的使用：用第二个参数的形状与第一个参数的多个形状进行求交，从而返回运行的结果

4.1 代码实现

  • 加载地图（略）
  • 创建三个按钮
	<button class="pbtn" >第一个参数</button>
    <button class="pbtn" >第二个参数</button>
    <input id="Btn" type="button" value="求交分析" />
  • 创建相关对象（符号对象，绘图对象）
				//一个标志位，用于记录是绘制第几个参数
				//1代表第一个参数
				//2代表第二个参数
				var flag;
				//第一个参数  注意第一个参数是多个形状
				var geometries=[];
				//第二个参数  注意第二个参数是一个形状
				var paramGeometry;
				//使用toolbar上的绘图工具
                var toolBar = new Draw(map);
				
                //线符号
                lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
                //第一个参数的面符号
                polygonSymbol1 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 0, 0, 0.25]));
				//第二个参数的面符号
                polygonSymbol2 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([0, 255, 0, 0.25]));
				//求交之后的面符号
                polygonSymbol3 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([0, 0, 255, 0.25]));
  • 创建几何服务对象
var geometryServices = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
  • 给画图形的按钮绑定事件
				//给绘制polygon的按钮绑定事件
				query(".pbtn").on("click",function(event){
					var value=this.innerHTML;
					switch(value){
						case "第一个参数":{
							flag=1;
							break;
							
						}
						case "第二个参数":{
							flag=2;
							break;
						}	
					}
					//激活绘制多边形
					toolBar.activate(Draw.POLYGON, {
                        showTooltips:true
                    })
					
				})
				//绘图结束绑定事件
				on(toolBar,"draw-end",function(result){
					//获得面形状
					var geometry=result.geometry;
					//创建Graphic
					var graphicpoint;

					//很重要！！！在这里构建参数对象
					if(flag==1)
					{
						//创建Graphic
						graphicpoint = new Graphic(geometry, polygonSymbol1);
						geometries.push(geometry)
					}
					else if(flag==2)
					{
						//创建Graphic
						graphicpoint = new Graphic(geometry, polygonSymbol2);
						paramGeometry=geometry;
					}	
                    map.graphics.add(graphicpoint); 
					//关闭绘图工具
                    toolBar.deactivate();					
				})
  • 给求交按钮绑定事件
				//给求交按钮绑定事件
                on(dom.byId("Btn"),"click",function(){
					//在这里在说一边，第一个参数是图形集合，第二个参数是一个图形
					geometryServices.intersect(geometries,paramGeometry,function(result){
						for(var idx in result)
						{
							//创建Graphic
							var graphic=new Graphic(result[idx],polygonSymbol3)
							//将每一个结果都放在map中
							map.graphics.add(graphic)
						}
					})
				})

4.2运行结果

这里写图片描述

4.3全部代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>多边形求交</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:500px;
            border:1px solid #000;
        }
    </style>
    <script type="text/javascript">

        require(["esri/map",
			"dojo/dom","dojo/on","dojo/query",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/toolbars/draw",
            "esri/graphic",
            "esri/tasks/GeometryService",
			"dojo/colors",
            "dojo/domReady!"],
            function (Map,dom,on,query,
                ArcGISDynamicMapServiceLayer,
                SimpleMarkerSymbol,
                SimpleLineSymbol,
                SimpleFillSymbol,
                Draw,
                Graphic,
                GeometryService,
                Color) {
                var map = new esri.Map("mapDiv");
                var layer = new esri.layers.ArcGISDynamicMapServiceLayer
                ("http://localhost:6080/arcgis/rest/services/Test/ft/MapServer");
                map.addLayer(layer);
				//创建几何服务对象
                var geometryServices = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
				//一个标志位，用于记录是绘制第几个参数
				//1代表第一个参数
				//2代表第二个参数
				var flag;
				//第一个参数  注意第一个参数是多个形状
				var geometries=[];
				//第二个参数  注意第二个参数是一个形状
				var paramGeometry;
                //使用toolbar上的绘图工具
                var toolBar = new Draw(map);
				
                //线符号
                lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
                //第一个参数的面符号
                polygonSymbol1 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 0, 0, 0.25]));
				//第二个参数的面符号
                polygonSymbol2 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([0, 255, 0, 0.25]));
				//求交之后的面符号
                polygonSymbol3 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([0, 0, 255, 0.25]));
				//给绘制polygon的按钮绑定事件
				query(".pbtn").on("click",function(event){
					var value=this.innerHTML;
					switch(value){
						case "第一个参数":{
							flag=1;
							break;
							
						}
						case "第二个参数":{
							flag=2;
							break;
						}	
					}
					//激活绘制多边形
					toolBar.activate(Draw.POLYGON, {
                        showTooltips:true
                    })
					
				})
				//绘图结束绑定事件
				on(toolBar,"draw-end",function(result){
					//获得面形状
					var geometry=result.geometry;
					//创建Graphic
					var graphicpoint;

					//很重要！！！在这里构建参数对象
					if(flag==1)
					{
						//创建Graphic
						graphicpoint = new Graphic(geometry, polygonSymbol1);
						geometries.push(geometry)
					}
					else if(flag==2)
					{
						//创建Graphic
						graphicpoint = new Graphic(geometry, polygonSymbol2);
						paramGeometry=geometry;
					}	
                    map.graphics.add(graphicpoint); 
					//关闭绘图工具
                    toolBar.deactivate();					
				})
				//给求交按钮绑定事件
                on(dom.byId("Btn"),"click",function(){
					//在这里在说一边，第一个参数是图形集合，第二个参数是一个图形
					geometryServices.intersect(geometries,paramGeometry,function(result){
						for(var idx in result)
						{
							//创建Graphic
							var graphic=new Graphic(result[idx],polygonSymbol3)
							//将每一个结果都放在map中
							map.graphics.add(graphic)
						}
					})
				})
               
            });
    </script>
</head>
<body>
    <div id="mapDiv" class="MapClass"></div>
	<button class="pbtn" >第一个参数</button>
    <button class="pbtn" >第二个参数</button>
    <input id="Btn" type="button" value="求交分析" />
</body>
</html>

5.代码下载地址

GISer.Wang
关注
专栏目录
arcgis api for javascript v4.23
06-26
《ArcGIS API for JavaScript v4.23：深入解析与应用》 ArcGIS API for JavaScript是Esri公司推出的一款强大的地图开发工具，主要用于构建交互式的Web GIS应用。v4.23版本作为其一个重要更新，引入了众多新特性和...
前端调用ArcGIS Server GeometryService服务
u010395721的博客
09-08 1287
前端调用Arcgis Server几何计算，空间分析服务，以缓冲区分析为例
ArcgisForJS如何使用ArcGIS Server的缓冲区几何服务？
最新发布
【cacrle】的博客
02-25 1319
ArcGIS For JS是一款强大的JavaScript库，它提供了许多功能，包括使用ArcGIS Server的缓冲区几何服务。缓冲区几何服务是一种服务，它允许你在地理空间数据上创建一个缓冲区，这个缓冲区是一个多边形区域，它围绕在特定距离内的所有点。这种服务在许多应用中都非常有用，例如在地理信息系统（GIS）中，它可以用于分析某个区域内的所有点。
ArcGIS 重新创建几何服务（GeometryService）
weixin_30871701的博客
02-01 232
#参考官方网址：http://enterprise.arcgis.com/zh-cn/server/10.4/administer/windows/re-creating-the-geometry-service.htm 通常在10.2版本以后Geometry服务不用像之前特意发布，在安装ArcgisServer的时候默认会安装好。 不小心删除的话，创建方式与以往版本不同，我这10.4版本创建...
GeometryService方法研究之intersect
hamov的专栏
09-02 1228
此方发可以判断一组geometry与某个geometry是否相交 myGeometryService.intersect(geoArr,testgeo,new AsyncResponder(ResultHandle2,FaultHandle2)); function ResultHandle2(arrGraphic:Array, token:Object = null):void{
GeometryServer
weixin_30352645的博客
01-02 187
http://blog.csdn.net/limina/article/details/8364515 转载于:https://www.cnblogs.com/changbaishan/p/5094400.html
ArcGIS api for js GeometryService 对任意坐标系统的坐标转换
比海更深
07-30 5995
如果用的是官方的几何服务，则需要配置代理 如果本地配置了server,将几何服务开启然后域名换为自己的server的域名就可以了 esriConfig.defaults.io.proxyUrl = "/proxy/"; esriConfig.defaults.io.alwaysUseProxy = false; 加载几何服务 var geometryService = new Geom...
arcgis api for javascript v4.18 v3.35
12-22
《ArcGIS API for JavaScript v4.18与v3.35详解》 ArcGIS API for JavaScript是Esri公司提供的一款强大的地图开发工具，用于在Web应用中构建交互式地图和地理信息系统。此API支持两种主要版本：v3.x系列和v4.x系列...
arcgis api for javascript v4.16 v3.33.zip
07-11
《ArcGIS API for JavaScript：v4.16与v3.33的深度解析》 ArcGIS API for JavaScript是Esri公司提供的一款强大的Web GIS开发工具，它允许开发者利用JavaScript语言构建交互式的地图应用。本篇文章将深入探讨v4.16和...
ArcGIS API for Javascript4.9最新API和开发文档
09-30
《ArcGIS API for JavaScript 4.9：深度解析与应用指南》 ArcGIS API for JavaScript 4.9是Esri公司推出的一款强大的地理信息系统（GIS）开发工具，它专为Web应用程序设计，允许开发者利用JavaScript语言创建交互式...
GeometryService实现距离长度测量
04-23
可以利用ARCGIS API FOR JS 实现距离和面积的测量，对新手 很有帮助
ArcGIS API for JavaScript 4.14 进阶之空间分析（附源码）
04-24
ArcGIS API for JavaScript 4.14 空间分析（本示例展示了空间分析的包含关系，控制缓冲区内点位的显隐）
arcgis api for javascript 聚合（3.20）直接运行
06-12
《ArcGIS API for JavaScript聚合（3.20）直接运行详解》 ArcGIS API for JavaScript是Esri公司推出的一款强大的地图开发工具，它允许开发者在Web应用中集成地图功能，提供丰富的地理信息处理和可视化能力。3.20...
（转）Arcgis for Js之GeometryService实现测量距离和面积
06-09 185
http://blog.csdn.net/gisshixisheng/article/details/40540601 距离和面积的测量时GIS常见的功能，在本节，讲述的是通过GeometryService实现测量面积和距离。先看看实现后的效果： 距离 ...
ArcGIS JS API 4.x 长度和面积量算
MZ_的博客
08-15 1926
1、主要用到的两个类 "esri/tasks/GeometryService" //用于计算面积和长度 "esri/widgets/Sketch/SketchViewModel" //地图上鼠标绘制graphic 2、核心代码 注意下面代码第一行，如果未配置本地字体，请把第一行注释了。 GeometryService换成自己可用的Geom...
ArcGIS Runtime SDK for iOS开发系列教程（7）——GeometryService与GeometryEngine使用
gisxy的专栏
03-11 2529
本讲主要通过GeometryServiceTask和GeometryEngine的使用来向大家展示在ArcGIS for iOS中如何实现几何相关的操作，其他具体操作，如长度计算、面积量测等大家可以参考帮助文档。下一讲将向大家介绍Geoprocessor相关的操作，欢迎大家继续关注！
arcgis api for js之坐标系统转换
wangchaohpu的博客
05-15 4978
require([ "esri/SpatialReference", "esri/tasks/GeometryService", "esri/geometry/Point", "esri/tasks/ProjectParameters" ], function (Spa...
Arcgis for Js之GeometryService实现测量距离和面积
热门推荐
LZUGIS
10-28 1万+
Arcgis for Js之GeometryService实现测量距离和面积
ArcGIS for JavaScript
06-11
全面介绍ArcGIS for JavaScript 开发
ArcGIS API for JavaScript：几何操作与地理计算
"ArcGIS几何操作、几何服务、面积和长度计算、缓冲区、坐标系统、ArcGIS JavaScript API 开发教程" 在ArcGIS系统中，几何操作是通过几何服务（GeometryService）来实现的，该服务提供了对几何对象的一系列操作。...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值