1.引言
什么是几何服务(GeometryService
)?从字面意义上来说是和几何(Geometry
)相关的服务,具体一点讲我们可以用这个类实现一些简单的图形操作。例如:
- 测量直线的距离
- 形状的缓冲区分析
- 判断两个形状之间的关系(相交,相离等等)
- 两个形状求交
- 对形状的裁剪等等
当然不仅仅是上述列举的一些,如果想要具体的了解几何服务的功能,可以直接去官方网站查看此类提供给我们的方法:几何服务在线帮助
在此篇博客中以缓冲区分析和图形求交来介绍几何服务的使用
2.启用几何服务
当我们安装好ArcGIS Server的时候,几何服务就已经存在了,因此几何服务不需要我们发布,但是在默认情况下几何服务是关闭的,因此我们首先启动几何服务,步骤如下:
- 登录我们的ArcGIS Server Manager
3.利用几何服务进行缓冲区分析
几何服务的使用一般分为四个步骤:
- 创建几何服务对象
- 创建参数
- 构建参数对象
- 执行相应的方法,并处理返回的结果
3.1代码实现
- 加载地图(省略)
- 创建两个按钮–一个按钮用于画点,另外一个按钮用于缓冲区分析
<input id="point" type="button" value="点"/><input id="Btn" type="button" />
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; var graphicpoint = new Graphic(geometry, pointSymbol); map.graphics.add(graphicpoint); toolBar.deactivate(); params.geometries = [ geometry ]; })
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
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) { var graphic=new Graphic(result[idx],polygonSymbol) map.graphics.add(graphic) } }); })
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
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(); 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; 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) { var graphic=new Graphic(result[idx],polygonSymbol) 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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
4.利用几何服务进行多边形求交
首先我们先看看求交这一个方法
GeometryService.intersect(geometries, geometry, callback?, errback?)
解释: 此方法有四个参数,第一个参数是 形状的集合(多个形状)第二个参数是 一个形状第三个参数是 运行成功之后的结果第四个参数是 运行失败之后的结果
方法的使用:用第二个参数的形状与第一个参数的多个形状进行求交,从而返回运行的结果
4.1 代码实现
<button class="pbtn" >第一个参数</button> <button class="pbtn" >第二个参数</button> <input id="Btn" type="button" value="求交分析" />
var flag; var geometries=[]; var paramGeometry; 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]));
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
var geometryServices = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
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; var graphicpoint; if(flag==1) { graphicpoint = new Graphic(geometry, polygonSymbol1); geometries.push(geometry) } else if(flag==2) { graphicpoint = new Graphic(geometry, polygonSymbol2); paramGeometry=geometry; } map.graphics.add(graphicpoint); toolBar.deactivate(); })
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
on(dom.byId("Btn"),"click",function(){ geometryServices.intersect(geometries,paramGeometry,function(result){ for(var idx in result) { var graphic=new Graphic(result[idx],polygonSymbol3) 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"); var flag; var geometries=[]; var paramGeometry; 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])); 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; var graphicpoint; if(flag==1) { graphicpoint = new Graphic(geometry, polygonSymbol1); geometries.push(geometry) } else if(flag==2) { 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) { var graphic=new Graphic(result[idx],polygonSymbol3) 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>
1 0