（转）Arcgis for Js之GeometryService实现测量距离和面积

Posted 2020-09-22 疯子加天才

http://blog.csdn.net/gisshixisheng/article/details/40540601

距离和面积的测量时GIS常见的功能，在本节，讲述的是通过GeometryService实现测量面积和距离。先看看实现后的效果：

                                

距离                                                                                         面积

首先，进行配置：

 

[javascript] view plain copy

 

 print?

1. //identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.  
2. //If this null or not available the project and lengths operation will not work.  Otherwise it will do a http post to the proxy.  
3. esriConfig.defaults.io.proxyUrl = "/proxy";  
4. esriConfig.defaults.io.alwaysUseProxy = false;  

 

接着，定义GeometryService和绘图工具：

 

[javascript] view plain copy

 

 print?

1. var gsvc = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");  

[javascript] view plain copy

 

 print?

1. var measureToolbar = new esri.toolbars.Draw(map);  

接下来，绘图结束后将所绘制图形添加到地图上面，并返回测量结果，那么增加measureToolbar的draw-end事件：

 

 

[javascript] view plain copy

 

 print?

1. measureToolbar.on("draw-end",showMeasureResults);  
2. /** 
3.  * 显示测量结果 
4.  * @param evt 
5.  */  
6. var showPt=null;  
7. function showMeasureResults(evt){  
8.     measureToolbar.deactivate();  
9.     map.setMapCursor("default");  
10.     var geometry = evt.geometry;  
11.     switch (geometry.type) {  
12.         case "polyline":{  
13.             var length = geometry.paths[0].length;  
14.             showPt = new Point(geometry.paths[0][length-1],map.spatialReference);  
15.             var lengthParams = new LengthsParameters();  
16.             lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_KILOMETER;  
17.             lengthParams.polylines = [geometry];  
18.             gsvc.lengths(lengthParams);  
19.             break;  
20.         }  
21.         case "polygon":{  
22.             showPt = new Point(geometry.rings[0][0],map.spatialReference);  
23.             var areasAndLengthParams = new AreasAndLengthsParameters();  
24.             areasAndLengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_KILOMETER;  
25.             areasAndLengthParams.areaUnit = esri.tasks.GeometryService.UNIT_SQUARE_KILOMETERS;  
26.             gsvc.simplify([geometry], function(simplifiedGeometries) {  
27.                 areasAndLengthParams.polygons = simplifiedGeometries;  
28.                 gsvc.areasAndLengths(areasAndLengthParams);  
29.             });  
30.             break;  
31.         }  
32.     }  
33.     var graphic = new Graphic(geometry, getGeometrySymbol(geometry.type));  
34.     map.graphics.add(graphic);  
35. }  

根据geometry的类型，增加GeometryService的lengths-complete或者areas-and-lengths-complete事件：

 

 

[javascript] view plain copy

 

 print?

1. gsvc.on("lengths-complete",outputLength);  
2. function outputLength(evtObj){  
3.     var result = evtObj.result;  
4.     showmeasureInfo(showPt, result.lengths[0].toFixed(3), "千米");  
5. };  
6. gsvc.on("areas-and-lengths-complete",outputAreaAndLength);  
7. function outputAreaAndLength(evtObj){  
8.     var result = evtObj.result;  
9.     showmeasureInfo(showPt, result.areas[0].toFixed(3), "平方千米");  
10. };  

最后，将返回的结果显示在地图上：

 

 

[javascript] view plain copy

 

 print?

1. /** 
2.  * 显示测量结果 
3.  * @param showPnt 
4.  * @param data 
5.  * @param unit 
6.  */  
7. function measureInfo(showPnt,data,unit){  
8.     var measureDiv=$("#measure");  
9.     var isShow = false;  
10.     var screenPnt=map.toScreen(showPnt);  
11.     measureDiv.css("left",screenPnt.x+"px");  
12.     measureDiv.css("top",screenPnt.y+"px");  
13.     measureDiv.css("position","absolute");  
14.     measureDiv.css("height","20px");  
15.     measureDiv.css("display","block");  
16.     isShow = true;  
17.     measureDiv.css("z-index","999");  
18.     if(unit==="千米"){  
19.         measureDiv.css("width","90px");  
20.     }  
21.     else{  
22.         measureDiv.css("width","130px");  
23.     }  
24.     $("#result").html(data+unit);  
25.     $("#infoclose").click(function(){  
26.         map.graphics.clear();  
27.         measureDiv.css("display","none");  
28.         isShow = false;  
29.     });  
30.   
31.     map.on("pan-start", function(){  
32.         measureDiv.css("display","none");  
33.     });  
34.   
35.     map.on("pan-end", function(panend){  
36.         if(isShow == true){  
37.             screenPnt=map.toScreen(showPnt);  
38.             measureDiv.css("left",screenPnt.x+"px");  
39.             measureDiv.css("top",screenPnt.y+"px");  
40.             measureDiv.css("position","absolute");  
41.             measureDiv.css("height","20px");  
42.             measureDiv.css("display","block");  
43.         }  
44.     });  
45.     map.on("zoom-start", function(){  
46.         measureDiv.css("display","none");  
47.     });  
48.     map.on("zoom-end", function(){  
49.         if(isShow == true){  
50.             screenPnt=map.toScreen(showPnt);  
51.             measureDiv.css("left",screenPnt.x+"px");  
52.             measureDiv.css("top",screenPnt.y+"px");  
53.             measureDiv.css("position","absolute");  
54.             measureDiv.css("height","20px");  
55.             measureDiv.css("display","block");  
56.         }  
57.     });  
58. };  

结果的显示我是通过一个div来显示的，并且做了缩放和地图移动的处理。