if (clickedButton == "0") { var Pic:PictureMarkerSymbol = new PictureMarkerSymbol(); Pic.source = RoadImages.TW0Icon; roadImageTool.activate(DrawTool.MAPPOINT); roadImageTool.graphicsLayer = symbolGraphicsLayer; symbolGraphicsLayer.symbol = Pic; map.addLayer(symbolGraphicsLayer); } if (clickedButton == "1") { var Pic1:PictureMarkerSymbol = new PictureMarkerSymbol(); Pic1.source = RoadImages.TW1Icon; roadImageTool.activate(DrawTool.MAPPOINT); roadImageTool.graphicsLayer = symbolGraphicsLayer; symbolGraphicsLayer.symbol = Pic1; map.addLayer(symbolGraphicsLayer); }
Solved! Go to Solution.
<?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" minWidth="955" minHeight="600"> <fx:Declarations> <esri:DrawTool id="roadImageTool" map="{theMap}" drawEnd="roadImageTool_drawEndHandler(event)" /> </fx:Declarations> <fx:Script> <![CDATA[ import com.esri.ags.Graphic; import com.esri.ags.SpatialReference; import com.esri.ags.events.DrawEvent; import com.esri.ags.events.MapMouseEvent; import com.esri.ags.geometry.MapPoint; import com.esri.ags.symbols.PictureMarkerSymbol; import com.esri.ags.symbols.SimpleMarkerSymbol; import mx.collections.ArrayCollection; import mx.events.FlexEvent; import spark.events.IndexChangeEvent; protected function buttonBar_changeHandler(event:IndexChangeEvent):void { var PicMs:PictureMarkerSymbol = new PictureMarkerSymbol(); PicMs.source = buttonBar.selectedItem.icon; roadImageTool.markerSymbol = PicMs; roadImageTool.activate(DrawTool.MAPPOINT); } protected function roadImageTool_drawEndHandler(event:DrawEvent):void { pointGraphicsLayer.add(event.graphic); } ]]> </fx:Script> <esri:Map id="theMap"> <esri:ArcGISTiledMapServiceLayer id="roads" visible="true" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/> <esri:GraphicsLayer id="pointGraphicsLayer" /> </esri:Map> <s:ButtonBar id="buttonBar" change="buttonBar_changeHandler(event)" requireSelection="true" focusEnabled="false" skinClass="myButtonBarSkin" creationComplete="buttonBar_changeHandler(null);"> <s:dataProvider> <s:ArrayList> <fx:Object label="circle" icon="@Embed('assets/images/i_draw_circle.png')" /> <fx:Object label="line" icon="@Embed('assets/images/i_draw_line.png')" /> <fx:Object label="point" icon="@Embed('assets/images/i_draw_point.png')" /> <fx:Object label="rectangle" icon="@Embed('assets/images/i_draw_rect.png')" /> </s:ArrayList> </s:dataProvider> </s:ButtonBar> </s:Application>
<?xml version="1.0" encoding="utf-8"?> <!-- ADOBE SYSTEMS INCORPORATED Copyright 2008 Adobe Systems Incorporated All Rights Reserved. NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the terms of the license agreement accompanying it. --> <!--- The default skin class for the Spark ButtonBar component. The buttons on the ButtonBar component use the ButtonBarLastButtonSkin, ButtonBarFirstButtonSkin and ButtonBarMiddleButtonSkin classes. @see spark.components.ButtonBar @see spark.components.ButtonBarButton @langversion 3.0 @playerversion Flash 10 @playerversion AIR 1.5 @productversion Flex 4 --> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"> <fx:Metadata> <![CDATA[ /** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [HostComponent("spark.components.ButtonBar")] ]]> </fx:Metadata> <s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states> <fx:Declarations> <!--- @copy spark.components.ButtonBar#firstButton @default spark.skins.spark.ButtonBarFirstButtonSkin @see spark.skins.spark.ButtonBarFirstButtonSkin --> <fx:Component id="firstButton"> <s:ButtonBarButton skinClass="myButtonBarButtonSkin" /> </fx:Component> <!--- @copy spark.components.ButtonBar#middleButton @default spark.skins.spark.ButtonBarMiddleButtonSkin @see spark.skins.spark.ButtonBarMiddleButtonSkin --> <fx:Component id="middleButton" > <s:ButtonBarButton skinClass="myButtonBarButtonSkin" /> </fx:Component> <!--- @copy spark.components.ButtonBar#lastButton @default spark.skins.spark.ButtonBarLastButtonSkin @see spark.skins.spark.ButtonBarLastButtonSkin --> <fx:Component id="lastButton" > <s:ButtonBarButton skinClass="myButtonBarButtonSkin" /> </fx:Component> </fx:Declarations> <!--- @copy spark.components.SkinnableDataContainer#dataGroup --> <s:DataGroup id="dataGroup" width="100%" height="100%"> <s:layout> <s:ButtonBarHorizontalLayout gap="-1"/> </s:layout> </s:DataGroup> </s:Skin>
<?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" minWidth="955" minHeight="600"> <fx:Declarations> <esri:DrawTool id="roadImageTool" map="{theMap}" drawEnd="roadImageTool_drawEndHandler(event)" /> </fx:Declarations> <fx:Script> <![CDATA[ import com.esri.ags.Graphic; import com.esri.ags.SpatialReference; import com.esri.ags.events.DrawEvent; import com.esri.ags.events.MapMouseEvent; import com.esri.ags.geometry.MapPoint; import com.esri.ags.symbols.PictureMarkerSymbol; import com.esri.ags.symbols.SimpleMarkerSymbol; import mx.collections.ArrayCollection; import mx.events.FlexEvent; import spark.events.IndexChangeEvent; protected function buttonBar_changeHandler(event:IndexChangeEvent):void { var PicMs:PictureMarkerSymbol = new PictureMarkerSymbol(); PicMs.source = buttonBar.selectedItem.icon; roadImageTool.markerSymbol = PicMs; roadImageTool.activate(DrawTool.MAPPOINT); } protected function roadImageTool_drawEndHandler(event:DrawEvent):void { pointGraphicsLayer.add(event.graphic); } ]]> </fx:Script> <esri:Map id="theMap"> <esri:ArcGISTiledMapServiceLayer id="roads" visible="true" url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/> <esri:GraphicsLayer id="pointGraphicsLayer" /> </esri:Map> <s:ButtonBar id="buttonBar" change="buttonBar_changeHandler(event)" requireSelection="true" focusEnabled="false" skinClass="myButtonBarSkin" creationComplete="buttonBar_changeHandler(null);"> <s:dataProvider> <s:ArrayList> <fx:Object label="circle" icon="@Embed('assets/images/i_draw_circle.png')" /> <fx:Object label="line" icon="@Embed('assets/images/i_draw_line.png')" /> <fx:Object label="point" icon="@Embed('assets/images/i_draw_point.png')" /> <fx:Object label="rectangle" icon="@Embed('assets/images/i_draw_rect.png')" /> </s:ArrayList> </s:dataProvider> </s:ButtonBar> </s:Application>
<?xml version="1.0" encoding="utf-8"?> <!-- ADOBE SYSTEMS INCORPORATED Copyright 2008 Adobe Systems Incorporated All Rights Reserved. NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the terms of the license agreement accompanying it. --> <!--- The default skin class for the Spark ButtonBar component. The buttons on the ButtonBar component use the ButtonBarLastButtonSkin, ButtonBarFirstButtonSkin and ButtonBarMiddleButtonSkin classes. @see spark.components.ButtonBar @see spark.components.ButtonBarButton @langversion 3.0 @playerversion Flash 10 @playerversion AIR 1.5 @productversion Flex 4 --> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"> <fx:Metadata> <![CDATA[ /** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [HostComponent("spark.components.ButtonBar")] ]]> </fx:Metadata> <s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states> <fx:Declarations> <!--- @copy spark.components.ButtonBar#firstButton @default spark.skins.spark.ButtonBarFirstButtonSkin @see spark.skins.spark.ButtonBarFirstButtonSkin --> <fx:Component id="firstButton"> <s:ButtonBarButton skinClass="myButtonBarButtonSkin" /> </fx:Component> <!--- @copy spark.components.ButtonBar#middleButton @default spark.skins.spark.ButtonBarMiddleButtonSkin @see spark.skins.spark.ButtonBarMiddleButtonSkin --> <fx:Component id="middleButton" > <s:ButtonBarButton skinClass="myButtonBarButtonSkin" /> </fx:Component> <!--- @copy spark.components.ButtonBar#lastButton @default spark.skins.spark.ButtonBarLastButtonSkin @see spark.skins.spark.ButtonBarLastButtonSkin --> <fx:Component id="lastButton" > <s:ButtonBarButton skinClass="myButtonBarButtonSkin" /> </fx:Component> </fx:Declarations> <!--- @copy spark.components.SkinnableDataContainer#dataGroup --> <s:DataGroup id="dataGroup" width="100%" height="100%"> <s:layout> <s:ButtonBarHorizontalLayout gap="-1"/> </s:layout> </s:DataGroup> </s:Skin>
<?xml version="1.0" encoding="utf-8"?> <!-- ADOBE SYSTEMS INCORPORATED Copyright 2008 Adobe Systems Incorporated All Rights Reserved. NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the terms of the license agreement accompanying it. --> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabledStates="0.5" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Metadata>[HostComponent("spark.components.ButtonBarButton")]</fx:Metadata> <!-- host component --> <fx:Script> <![CDATA[ import spark.components.ButtonBar; import mx.events.FlexEvent; import spark.components.ButtonBarButton; protected function gr_creationCompleteHandler(event:FlexEvent):void { var dataObj:Object = hostComponent.data; img.source = dataObj.icon; } static private const exclusions:Array = ["labelDisplay","gr"]; override public function get colorizeExclusions():Array {return exclusions;} override protected function initializationComplete():void { useChromeColor = true; super.initializationComplete(); } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void { var cr:Number = getStyle("cornerRadius"); if (cornerRadius != cr) { cornerRadius = cr; shadow.radiusX = cornerRadius; fill.radiusX = cornerRadius; lowlight.radiusX = cornerRadius; highlight.radiusX = cornerRadius; border.radiusX = cornerRadius; } if (highlightStroke) highlightStroke.radiusX = cornerRadius; if (hldownstroke1) hldownstroke1.radiusX = cornerRadius; if (hldownstroke2) hldownstroke2.radiusX = cornerRadius; super.updateDisplayList(unscaledWidth, unscaledHeight); } private var cornerRadius:Number = 2; ]]> </fx:Script> <!-- states --> <s:states> <s:State name="up" /> <s:State name="over" stateGroups="overStates" /> <s:State name="down" stateGroups="downStates" /> <s:State name="disabled" stateGroups="disabledStates" /> <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" /> <s:State name="overAndSelected" stateGroups="overStates, selectedStates" /> <s:State name="downAndSelected" stateGroups="downStates, selectedStates" /> <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" /> </s:states> <!-- layer 1: shadow --> <!--- @private --> <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0x000000" color.downStates="0xFFFFFF" alpha="0.01" alpha.downStates="0" /> <s:GradientEntry color="0x000000" color.downStates="0xFFFFFF" alpha="0.07" alpha.downStates="0.5" /> </s:LinearGradient> </s:fill> </s:Rect> <!-- layer 2: fill --> <!--- @private --> <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0xFFFFFF" color.selectedUpStates="0xBBBDBD" color.overStates="0xBBBDBD" color.downStates="0xAAAAAA" alpha="0.85" alpha.overAndSelected="1" /> <s:GradientEntry color="0xD8D8D8" color.selectedUpStates="0x9FA0A1" color.over="0x9FA0A1" color.overAndSelected="0x8E8F90" color.downStates="0x929496" alpha="0.85" alpha.overAndSelected="1" /> </s:LinearGradient> </s:fill> </s:Rect> <!-- layer 3: fill lowlight --> <!--- @private --> <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2"> <s:fill> <s:LinearGradient rotation="270"> <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" /> <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" /> <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" /> </s:LinearGradient> </s:fill> </s:Rect> <!-- layer 4: fill highlight --> <!--- @private --> <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0xFFFFFF" ratio="0.0" alpha="0.33" alpha.selectedUpStates="0.22" alpha.overStates="0.22" alpha.downStates="0.12"/> <s:GradientEntry color="0xFFFFFF" ratio="0.48" alpha="0.33" alpha.selectedUpStates="0.22" alpha.overStates="0.22" alpha.downStates="0.12"/> <s:GradientEntry color="0xFFFFFF" ratio="0.48001" alpha="0" /> </s:LinearGradient> </s:fill> </s:Rect> <!-- layer 5: highlight stroke (all states except down) --> <!--- @private --> <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="downStates"> <s:stroke> <s:LinearGradientStroke rotation="90" weight="1"> <s:GradientEntry color="0xFFFFFF" alpha.overStates="0.22" alpha.selectedUpStates="0.33" /> <s:GradientEntry color="0xD8D8D8" alpha.overStates="0.22" alpha.selectedUpStates="0.33" /> </s:LinearGradientStroke> </s:stroke> </s:Rect> <!-- layer 6: highlight stroke (down state only) --> <!--- @private --> <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="downStates, selectedUpStates, overAndSelected"> <s:stroke> <s:LinearGradientStroke rotation="90" weight="1"> <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" /> <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" /> <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" /> <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" /> <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" /> </s:LinearGradientStroke> </s:stroke> </s:Rect> <!--- @private --> <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="downStates, selectedUpStates, overAndSelected"> <s:stroke> <s:LinearGradientStroke rotation="90" weight="1"> <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" /> <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" /> </s:LinearGradientStroke> </s:stroke> </s:Rect> <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 --> <!--- @private --> <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2"> <s:stroke> <s:LinearGradientStroke rotation="90" weight="1"> <s:GradientEntry color="0x000000" alpha="0.5625" alpha.down="0.6375" alpha.selectedStates="0.6375" /> <s:GradientEntry color="0x000000" alpha="0.75" alpha.down="0.85" alpha.selectedStates="0.85" /> </s:LinearGradientStroke> </s:stroke> </s:Rect> <!-- layer 8: text --> <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay --> <s:Label id="labelDisplay" textAlign="center" verticalAlign="middle" maxDisplayedLines="1" visible="false" includeInLayout="false" horizontalCenter="0" verticalCenter="1" left="10" right="10" top="2" bottom="2"> </s:Label> <!-- layer 8: icon --> <s:Graphic id="gr" creationComplete="gr_creationCompleteHandler(event)" horizontalCenter="0" verticalCenter="0"> <s:BitmapImage id="img" /> </s:Graphic> </s:SparkSkin>
protected function roadImageTool_drawEndHandler(event:DrawEvent):void { pointGraphicsLayer.add(event.graphic); }