Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Reshape polygons
Explore in the sandbox
Open in CodePen
View live sample
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.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/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.46/"></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>