Arcgis for JS Geometryservice to measure distances and areas

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

Distance and area measurements are common features of GIS, in this section, the measurement area and distance are described by Geometryservice. Let's look at the results after the implementation:

Distance area

First, make the configuration:

[JavaScript]View PlainCopyprint?

1. Identify proxy page to use if the ToJson payload to the geometry service is greater than.
2. If This is null or not available the project and lengths operation won't work. Otherwise it would do a HTTP post to the proxy.
3. ESRICONFIG.DEFAULTS.IO.PROXYURL = "/proxy";
4. EsriConfig.defaults.io.alwaysUseProxy = false;

Next, define the Geometryservice and drawing tools:

[JavaScript]View PlainCopyprint?

1. var gsvc = New Geometryservice ("Http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");

[JavaScript]View PlainCopyprint?

1. var measuretoolbar = new Esri.toolbars.Draw (map);

Next, after the drawing finishes adding the drawing to the map and returning the measurement results, increase the Measuretoolbar Draw-end event:

[JavaScript]View PlainCopyprint?

2. Measuretoolbar.on ("Draw-end", showmeasureresults);
4. /**
6. * Show Measurement results
8. * @param evt
10. */
12. var showpt=null;
14. function Showmeasureresults (evt) {
16. Measuretoolbar.deactivate ();
18. Map.setmapcursor ("Default");
20. var geometry = evt.geometry;
22. switch (geometry.type) {
24. case "polyline": {
26. var length = geometry.paths[0].length;
28. SHOWPT = new Point (geometry.paths[0][length-1],map.spatialreference);
30. var lengthparams = new Lengthsparameters ();
32. Lengthparams.lengthunit = Esri.tasks.GeometryService.UNIT_KILOMETER;
34. Lengthparams.polylines = [geometry];
36. Gsvc.lengths (Lengthparams);
38. Break ;
40. }
42. case "polygon": {
44. SHOWPT = new Point (geometry.rings[0][0],map.spatialreference);
46. var areasandlengthparams = new Areasandlengthsparameters ();
48. Areasandlengthparams.lengthunit = Esri.tasks.GeometryService.UNIT_KILOMETER;
50. Areasandlengthparams.areaunit = Esri.tasks.GeometryService.UNIT_SQUARE_KILOMETERS;
52. Gsvc.simplify ([geometry], function (simplifiedgeometries) {
54. Areasandlengthparams.polygons = simplifiedgeometries;
56. Gsvc.areasandlengths (Areasandlengthparams);
58. });
60. Break ;
62. }
64. }
66. var graphic = new graphic (geometry, Getgeometrysymbol (Geometry.type));
68. Map.graphics.add (graphic);
70. }

Depending on the type of geometry, increase the geometryservice Lengths-complete or Areas-and-lengths-complete event:

[JavaScript]View PlainCopyprint?

2. Gsvc.on ("Lengths-complete", outputlength);
4. function Outputlength (evtobj) {
6. var result = Evtobj.result;
8. Showmeasureinfo (SHOWPT, result.lengths[0].tofixed (3), "km");
10. };
12. Gsvc.on ("Areas-and-lengths-complete", outputareaandlength);
14. function Outputareaandlength (evtobj) {
16. var result = Evtobj.result;
18. Showmeasureinfo (SHOWPT, result.areas[0].tofixed (3), "square kilometer");
20. };

Finally, the returned results are displayed on the map:

[JavaScript]View PlainCopyprint?

2. /**
4. * Show Measurement results
6. * @param showpnt
8. * @param data
10. * @param unit
12. */
14. function Measureinfo (showpnt,data,unit) {
16. var measurediv=$ ("#measure");
18. var isshow = false;
20. var screenpnt=map.toscreen (SHOWPNT);
22. Measurediv.css ("left", screenpnt.x+"px");
24. Measurediv.css ("Top", screenpnt.y+"px");
26. Measurediv.css ("position","absolute");
28. Measurediv.css ("height","20px");
30. Measurediv.css ("display","block");
32. Isshow = true;
34. Measurediv.css ("Z-index","999");
36. if (unit==="km") {
38. Measurediv.css ("width","90px");
40. }
42. else{
44. Measurediv.css ("width","130px");
46. }
48. $ ("#result"). HTML (data+unit);
50. $ ("#infoclose"). Click (function () {
52. Map.graphics.clear ();
54. Measurediv.css ("display","none");
56. Isshow = false;
58. });
62. Map.on ("Pan-start", function () {
64. Measurediv.css ("display","none");
66. });
70. Map.on ("pan-end", function (panend) {
72. if (isshow = = true) {
74. Screenpnt=map.toscreen (SHOWPNT);
76. Measurediv.css ("left", screenpnt.x+"px");
78. Measurediv.css ("Top", screenpnt.y+"px");
80. Measurediv.css ("position","absolute");
82. Measurediv.css ("height","20px");
84. Measurediv.css ("display","block");
86. }
88. });
90. Map.on ("Zoom-start", function () {
92. Measurediv.css ("display","none");
94. });
96. Map.on ("zoom-end", function () {
98. if (isshow = = true) {
100. Screenpnt=map.toscreen (SHOWPNT);
102. Measurediv.css ("left", screenpnt.x+"px");
104. Measurediv.css ("Top", screenpnt.y+"px");
106. Measurediv.css ("position","absolute");
108. Measurediv.css ("height","20px");
110. Measurediv.css ("display","block");
112. }
114. });
116. };

The display of the results is shown by a Div, and the process of zooming and moving the map is done.

(GO) Arcgis for JS Geometryservice to measure distances and areas