<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:esri="http://www.esri.com/2008/ags"
pageTitle="Edit graphics with the EditTool">
<fx:Script>
<![CDATA[
import com.esri.ags.Graphic;
import com.esri.ags.events.DrawEvent;
import com.esri.ags.events.MapMouseEvent;
import com.esri.ags.geometry.Extent;
import com.esri.ags.geometry.Polygon;
import com.esri.ags.geometry.Polyline;
import com.esri.ags.symbols.SimpleFillSymbol;
import com.esri.ags.symbols.SimpleLineSymbol;
import com.esri.ags.symbols.SimpleMarkerSymbol;
import mx.events.FlexEvent;
import mx.events.ItemClickEvent;
import spark.events.IndexChangeEvent;
private var graphic:Graphic;
private var lastEditGraphic:Graphic;
private var lastActiveEditTypes:String;
protected function tbb_itemClickHandler(event:ItemClickEvent):void
{
if (tbb.selectedIndex < 0)
{
myDrawTool.deactivate();
}
else
{
switch (event.item.label)
{
case "MAPPOINT":
{
myDrawTool.activate(DrawTool.MAPPOINT);
break;
}
case "POLYLINE":
{
myDrawTool.activate(DrawTool.POLYLINE);
break;
}
case "FREEHAND_POLYLINE":
{
myDrawTool.activate(DrawTool.FREEHAND_POLYLINE);
break;
}
case "POLYGON":
{
myDrawTool.activate(DrawTool.POLYGON);
break;
}
case "FREEHAND_POLYGON":
{
myDrawTool.activate(DrawTool.FREEHAND_POLYGON);
break;
}
case "EXTENT":
{
myDrawTool.activate(DrawTool.EXTENT);
break;
}
case "CIRCLE":
{
myDrawTool.activate(DrawTool.CIRCLE);
break;
}
case "ELLIPSE":
{
myDrawTool.activate(DrawTool.ELLIPSE);
break;
}
}
}
}
protected function drawTool_drawEndHandler(event:DrawEvent):void
{
myDrawTool.deactivate();
tbb.selectedIndex = -1;
}
private function myMap_mapMouseDownHandler(event:MapMouseEvent):void
{
event.currentTarget.addEventListener(MouseEvent.MOUSE_MOVE, map_mouseMoveHandler);
event.currentTarget.addEventListener(MouseEvent.MOUSE_UP, map_mouseUpHandler);
}
private function map_mouseMoveHandler(event:MouseEvent):void
{
event.currentTarget.removeEventListener(MouseEvent.MOUSE_MOVE, map_mouseMoveHandler);
event.currentTarget.removeEventListener(MouseEvent.MOUSE_UP, map_mouseUpHandler);
}
private function map_mouseUpHandler(event:MouseEvent):void
{
event.currentTarget.removeEventListener(MouseEvent.MOUSE_MOVE, map_mouseMoveHandler);
event.currentTarget.removeEventListener(MouseEvent.MOUSE_UP, map_mouseUpHandler);
if (event.target is Graphic || event.target.parent is Graphic)
{
if (event.target is Graphic)
{
graphic = Graphic(event.target);
}
else if (event.target.parent is Graphic) {
graphic = Graphic(event.target.parent);
}
if (lastEditGraphic !== graphic)
{
lastEditGraphic = graphic;
lastActiveEditTypes = "moveRotateScale"; }
if (graphic.geometry is Polyline || graphic.geometry is Polygon)
{
if (lastActiveEditTypes == "moveEditVertices")
{
lastActiveEditTypes = "moveRotateScale";
myEditTool.activate(EditTool.MOVE | EditTool.SCALE | EditTool.ROTATE, [ graphic ]);
}
else
{
lastActiveEditTypes = "moveEditVertices";
myEditTool.activate(EditTool.MOVE | EditTool.EDIT_VERTICES, [ graphic ]);
}
}
else if (graphic.geometry is Extent)
{
myEditTool.activate(EditTool.MOVE | EditTool.SCALE, [ graphic ]);
}
else if (graphic.graphicsLayer == myGraphicsLayer)
{
myEditTool.activate(EditTool.MOVE | EditTool.EDIT_VERTICES, [ graphic ]);
}
}
else
{
myEditTool.deactivate();
lastActiveEditTypes = "moveRotateScale"; }
}
]]>
</fx:Script>
<fx:Declarations>
<esri:SimpleMarkerSymbol id="sms"
color="0x00FF00"
size="12"
style="square"/>
<esri:SimpleLineSymbol id="sls"
width="3"
color="0x00FF00"/>
<esri:SimpleFillSymbol id="sfs"
color="0xFFFFFF"
style="diagonalcross">
<esri:outline>
<esri:SimpleLineSymbol width="2" color="0x00FF00"/>
</esri:outline>
</esri:SimpleFillSymbol>
<esri:DrawTool id="myDrawTool"
drawEnd="drawTool_drawEndHandler(event)"
fillSymbol="{sfs}"
graphicsLayer="{myGraphicsLayer}"
lineSymbol="{sls}"
map="{myMap}"
markerSymbol="{sms}"/>
<esri:EditTool id="myEditTool" map="{myMap}"/>
</fx:Declarations>
<s:controlBarLayout>
<s:VerticalLayout gap="10"
paddingBottom="7"
paddingLeft="10"
paddingRight="10"
paddingTop="7"/>
</s:controlBarLayout>
<s:controlBarContent>
<s:RichText width="100%">
The DrawTool and EditTool are both part of an editing experience. The DrawTool allows you to draw new graphics,
while the EditTool allows you to edit geometries of existing graphics.
In this sample, click on the toolbar first, then draw a graphic on the map.
Next, click the graphic that you just created; this will activate the EditTool for that feature.
You can then move the selected feature by click (mouse down) and drag (move) it somewhere else.
To edit individual vertices of a line or polygon, simply move any existing
vertices or add new ones by clicking on a "ghost" vertice and dragging it to anywhere.
Reshaping features (ellipses, circles, extent, and polygons): click once to select the graphic,
click again (to activate scaling and rotate mode) you will be able to re-shape the feature.
Be sure to read to the documentation for full editing behaviors.
</s:RichText>
<mx:ToggleButtonBar id="tbb"
itemClick="tbb_itemClickHandler(event)"
labelField="null"
selectedIndex="-1"
toggleOnClick="true">
<fx:Object icon="@Embed(source='assets/i_draw_point.png')"
label="MAPPOINT"
toolTip="MapPoint"/>
<fx:Object icon="@Embed(source='assets/i_draw_line.png')"
label="POLYLINE"
toolTip="Polyline"/>
<fx:Object icon="@Embed(source='assets/i_draw_freeline.png')"
label="FREEHAND_POLYLINE"
toolTip="Freehand Polyline"/>
<fx:Object icon="@Embed(source='assets/i_draw_poly.png')"
label="POLYGON"
toolTip="Polygon"/>
<fx:Object icon="@Embed(source='assets/i_draw_freepoly.png')"
label="FREEHAND_POLYGON"
toolTip="Freehand Polygon"/>
<fx:Object icon="@Embed(source='assets/i_draw_rect.png')"
label="EXTENT"
toolTip="Extent"/>
<fx:Object icon="@Embed(source='assets/i_draw_circle.png')"
label="CIRCLE"
toolTip="Circle"/>
<fx:Object icon="@Embed(source='assets/i_draw_ellipse.png')"
label="ELLIPSE"
toolTip="Ellipse"/>
</mx:ToggleButtonBar>
</s:controlBarContent>
<esri:Map id="myMap"
level="3"
mapMouseDown="myMap_mapMouseDownHandler(event)"
wrapAround180="true">
<esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"/>
<esri:GraphicsLayer id="myGraphicsLayer"/>
</esri:Map>
</s:Application>
