Measure while drawing

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

A measurement widget is not part of the ArcGIS 4.5 API for JavaScript. It will be added in a future release. In the current version of the API, you can implement your own measuring tools using draw class and geometryEngine.

This sample demonstrates how to draw a Polygon, using DrawPolygonAction, and measure its area in the process of drawing. To start drawing and measuring, click the button located just below the zoom controls.

To draw a polygon using the Draw class, call draw.create("polygon"). This method will return a reference to an instance of the PolygonDrawAction. Listen to the events on this object to implement custom measuring logic for the polygon as it is being drawn.

function enableCreatePolygon(draw, view) {
  // create() will return a reference to an instance of PolygonDrawAction
  var action = draw.create("polygon");
  
  // focus the view to activate keyboard shortcuts for drawing polygons
  view.focus();

  // listen to the following events on PolygonDrawAction object.
  // call drawPolygon() function in response to these events.
  action.on("vertex-add", drawPolygon);
  action.on("cursor-update", drawPolygon);
  action.on("vertex-remove", drawPolygon);
  action.on("draw-complete", drawPolygon);
}

// this function is called from the polygon draw action events
// to provide a visual feedback to users as they are drawing a polygon
function drawPolygon(evt) {
  var vertices = evt.vertices;

  //remove existing graphic
  view.graphics.removeAll();

  // create a new polygon
  var polygon = createPolygon(vertices);

  // create a new graphic representing the polygon, add it to the view
  var graphic = createGraphic(polygon);
  view.graphics.add(graphic);

  // calculate the area of the polygon
  var area = geometryEngine.geodesicArea(polygon, "acres");
  if (area < 0) {
    // simplify the polygon if needed and calculate the area again
    var simplifiedPolygon = geometryEngine.simplify(polygon);
    var area = geometryEngine.geodesicArea(simplifiedPolygon, "acres");
  }
  // start displaying the area of the polygon
  labelAreas(polygon, area);
}

Sample search results

TitleSample

There were no match results from your search criteria.