Hide Table of Contents
View Reshape polygons sample in sandbox
Reshape polygons

Description

This sample demonstrates how to reshape features using an ArcGIS Server geometry service.

The Draw Toolbar is used to draw a reshaping line, after the line is drawn a spatial query is performed to select the polygon that the reshaping line intersects

dojo.connect(drawToolbar, "onDrawEnd", function(geometry) {
  drawToolbar.deactivate();
  selectQuery.geometry = geometry;
  firePerimeterFL.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);
});

After the feature is selected the reshape method is called:

gs.reshape(targetGeometry,selectQuery.geometry);

Notice that reshape takes two geometries, the first is the geometry to modify, the second is the polyline used to reshape the geometry.

To use the sample zoom in to a fire perimeter then click the 'Reshape fire perimeter button'. Next draw a line through the polygon feature to reshape the polygon boundary.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Update Fire Perimeter with GeometryService Reshape</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.41/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.41/esri/css/esri.css">

    <style>
      html, body, #mapDiv {
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
      }
      #info {
        bottom: 20px;
        color: #444;
        height: auto;
        font-family: arial;
        left: 20px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        text-align: left;
        width: 200px;
        z-index: 40;
      }
      .label {
        display: inline-block;
        width: 4em;
      }
    </style>

    <script>var dojoConfig = { parseOnLoad:true };</script>
    <script src="https://js.arcgis.com/3.41/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.toolbars.draw");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.tasks.geometry");

      var map, drawToolbar;

      function init() {
        map = new esri.Map("mapDiv",{
          basemap: "topo-vector",
          center: [-116.95, 34.05],
          zoom: 11
        });

        dojo.connect(map, "onLayersAddResult", initEditing);

        //add the fire perimeter layer to the map
        var firePerimeterFL = new esri.layers.FeatureLayer("https://services.arcgis.com/jIL9msH9OI208GCb/arcgis/rest/services/California_Fire_Perimeters_2020/FeatureServer/1", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"],
          id: "firePerimeterFL"
        });
        map.addLayers([firePerimeterFL]);
      }

      function initEditing(layers) {
        var gs = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
        var myMap = this;
        var firePerimeterFL = myMap.getLayer("firePerimeterFL");

        drawToolbar = new esri.toolbars.Draw(myMap);
        var selectQuery = new esri.tasks.Query();

        dojo.connect(dijit.byId("reshape"), "onClick", function() {
          drawToolbar.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);
        });

        dojo.connect(drawToolbar, "onDrawEnd", function(geometry) {
          drawToolbar.deactivate();
          selectQuery.geometry = geometry;
          firePerimeterFL.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);
        });

        dojo.connect(firePerimeterFL,"onSelectionComplete", function(features) {
          if (features.length === 1) {
            var targetGeometry = features[0].geometry;
            gs.reshape(targetGeometry,selectQuery.geometry);
          }
        });

        dojo.connect(gs, "onReshapeComplete", function(reshapedGeometry) {
          var targetGraphic = firePerimeterFL.getSelectedFeatures()[0].setGeometry(reshapedGeometry);
          // to save change to service
          //firePerimeterFL.applyEdits(null, [targetGraphic], null);
        });
      }

      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <div id="mapDiv"></div>
    <div id="info" class="esriSimpleSlider">
      <button id="reshape" data-dojo-type="dijit.form.Button">Reshape Fire Perimeter</button>
      Zoom in to a fire perimeter then click the 'reshape' button and draw a polyline to reshape the features.
    </div>
  </body>
</html>
 
          
Show Modal