GeometryService of Arcgis for Js achieves measurement distance and area

GeometryService of Arcgis for Js achieves measurement distance and area

Common GIS functions for measuring distance and area. In this section, GeometryService is used to measure the area and distance. First, let's look at the effect after implementation:

Distance Area

First, configure:

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

Next, define the GeometryService and the drawing tool:

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

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

Next, after the drawing ends, add the drawn drawing to the map and return the measurement result. Then, add the draw-end event of the measureToolbar:

MeasureToolbar. on ("draw-end", showMeasureResults);/*** display the measurement result * @ param evt */var showPt = null; function showMeasureResults (evt) {measureToolbar. deactivate (); map. setMapCursor ("default"); var geometry = evt. geometry; switch (geometry. type) {case "polyline": {var length = geometry. paths [0]. length; showPt = new Point (geometry. paths [0] [length-1], map. spatialReference); var lengthParams = new LengthsParameters (); lengthParams. lengthUnit = esri. tasks. geometryService. UNIT_KILOMETER; lengthParams. polylines = [geometry]; gsvc. lengths (lengthParams); break;} case "polygon": {showPt = new Point (geometry. rings [0] [0], map. spatialReference); var areasAndLengthParams = new AreasAndLengthsParameters (); areasAndLengthParams. lengthUnit = esri. tasks. geometryService. UNIT_KILOMETER; areasAndLengthParams. areaUnit = esri. tasks. geometryService. UNIT_SQUARE_KILOMETERS; gsvc. simplify ([geometry], function (simplifiedGeometries) {areasAndLengthParams. polygons = simplifiedGeometries; gsvc. areasAndLengths (areasAndLengthParams) ;}); break ;}var graphic = new Graphic (geometry, getGeometrySymbol (geometry. type); map. graphics. add (graphic );}

Add the lengths-complete or areas-and-lengths-complete Event of GeometryService Based on the geometry type:

Gsvc. on ("lengths-complete", outputLength); function outputLength (evtObj) {var result = evtObj. result; showmeasureInfo (showPt, result. lengths [0]. toFixed (3), "km") ;}; gsvc. on ("areas-and-lengths-complete", outputAreaAndLength); function outputAreaAndLength (evtObj) {var result = evtObj. result; showmeasureInfo (showPt, result. areas [0]. toFixed (3), "square kilometer ");};

Finally, display the returned results on the map:

/*** Display Measurement Result ** @ param showPnt * @ param data * @ param unit */function measureInfo (showPnt, data, unit) {var measureDiv = $ ("# measure"); var isShow = false; var screenPnt = map. toScreen (showPnt); measureDiv.css ("left", screenPnt. x + "px"); measureDiv.css ("top", screenPnt. y + "px"); measureDiv.css ("position", "absolute"); measureDiv.css ("height", "20px"); measureDiv.css ("display", "block "); isShow = true; measureDiv.css ("z-index", "999"); if (unit = "km") {measureDiv.css ("width", "90px ");} else {measureDiv.css ("width", "130px") ;}$ ("# result" ).html (data + unit); $ ("# infoclose "). click (function () {map. graphics. clear (); measureDiv.css ("display", "none"); isShow = false ;}); map. on ("pan-start", function () {measureDiv.css ("display", "none") ;}); map. on ("pan-end", function (panend) {if (isShow = true) {screenPnt = map. toScreen (showPnt); measureDiv.css ("left", screenPnt. x + "px"); measureDiv.css ("top", screenPnt. y + "px"); measureDiv.css ("position", "absolute"); measureDiv.css ("height", "20px"); measureDiv.css ("display ", "block") ;}}); map. on ("zoom-start", function () {measureDiv.css ("display", "none") ;}); map. on ("zoom-end", function () {if (isShow = true) {screenPnt = map. toScreen (showPnt); measureDiv.css ("left", screenPnt. x + "px"); measureDiv.css ("top", screenPnt. y + "px"); measureDiv.css ("position", "absolute"); measureDiv.css ("height", "20px"); measureDiv.css ("display ", "block ");}});};

The result is displayed by a div and scaled and moved by map.