<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Measure Distances</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css"> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1" type="text/javascript"></script> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("esri.tasks.geometry"); dojo.require("esri.toolbars.draw"); dojo.require("dojo.number"); var geometryService; function init() { //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 = "/arcgisserver/apis/javascript/proxy/proxy.ashx"; esriConfig.defaults.io.alwaysUseProxy = false; var startExtent = new esri.geometry.Extent(-80.0571,41.3697,-74.4321,44.0822, new esri.SpatialReference({wkid:4326}) ); var map = new esri.Map("map", {extent:startExtent}); dojo.connect(map, "onLoad", initGeometrie); map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer")); geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); dojo.connect(geometryService, "onLengthsComplete", outputDistance); dojo.connect(geometryService, "onProjectComplete", function(graphics) { //call GeometryService.lengths() with projected geometry geometryService.lengths(graphics); }); } function outputDistance(result) { dojo.byId("distance").innerHTML = dojo.number.format(result.lengths[0] / 1000) + " kilometers"; } function initGeometrie(map) { tb = new esri.toolbars.Draw(map); var lengthParams = new esri.tasks.LengthsParameters(); dojo.connect(tb, "onDrawEnd", function(geometry) { map.graphics.clear(); lengthParams.polylines = [geometry]; lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER; lengthParams.geodesic = true; geometryService.lengths(lengthParams); var graphic = map.graphics.add(new esri.Graphic(geometry, new esri.symbol.SimpleLineSymbol())); }); tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE); } function disconGeometrie(){ // stop measure of geometry tb.deactivate(); } dojo.addOnLoad(init); </script> </head> <body> <input type="button" value="measure" onclick="initGeometrie(map)"/><input type="button" value="no measure" onclick="disconGeometrie()"/> Click and hold down on the map to draw a line that will be added to the map. The application will then use the geometry service to project and compute the length of the line. <div id="map" class="claro" style="width:1024px; height:512px; border:1px solid #000;"></div> Distance: <span id="distance"></span> </body> </html>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.