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

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

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

                                

距离                                                                                         面积

首先，进行配置：

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和绘图工具：

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

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

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

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事件：

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. };

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

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. map.on("pan-start", function(){
31. measureDiv.css("display","none");
32. });
33. map.on("pan-end", function(panend){
34. if(isShow == true){
35. screenPnt=map.toScreen(showPnt);
36. measureDiv.css("left",screenPnt.x+"px");
37. measureDiv.css("top",screenPnt.y+"px");
38. measureDiv.css("position","absolute");
39. measureDiv.css("height","20px");
40. measureDiv.css("display","block");
41. }
42. });
43. map.on("zoom-start", function(){
44. measureDiv.css("display","none");
45. });
46. map.on("zoom-end", function(){
47. if(isShow == true){
48. screenPnt=map.toScreen(showPnt);
49. measureDiv.css("left",screenPnt.x+"px");
50. measureDiv.css("top",screenPnt.y+"px");
51. measureDiv.css("position","absolute");
52. measureDiv.css("height","20px");
53. measureDiv.css("display","block");
54. }
55. });
56. };

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