八，graphics

GraphicsLayer是由一个个的Graphic构成，而Graphic又包括了geometry，symbol和attributes。

         symbol有一下几种：SimpleMarkerSymbol，SimpleLineSymbol，SimpleFillSymbol，pictureMarker，TextSymbol，InfoSymbol等

         五个基础符号，一个高级符号(自定义符号) InfoSymbol

demo1：

<?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:esri="http://www.esri.com/2008/ags"
               pageTitle="Adding graphics using MXML and/or ActionScript">

    <s:layout>
        <s:VerticalLayout horizontalAlign="center" paddingTop="3"/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            import com.esri.ags.SpatialReference;
            import com.esri.ags.symbols.PictureMarkerSymbol;

            private function addSomeMarkers():void
            {
                // This is just to show how to add markers
                // using ActionScript code as opposed to MXML tags.
                var myGraphicMarker:Graphic = new Graphic(new MapPoint(1447100, 7477200, new SpatialReference(102100)),
                                                          new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 22, 0x009933));
                myGraphicMarker.toolTip = "Marker added with ActionScript";
                myGraphicsLayer.add(myGraphicMarker);

                // PictureMarker - embedded image
                [Embed('assets/globe_icon.png')]
                var picEmbeddedClass:Class;
                var pictureMarker:PictureMarkerSymbol = new PictureMarkerSymbol(picEmbeddedClass);

                var myGraphicPic:Graphic = new Graphic(new MapPoint(-411000, 4924000, new SpatialReference(102100)));
                myGraphicPic.symbol = pictureMarker;
                myGraphicsLayer.add(myGraphicPic);

                var myPolyline:Polyline = new Polyline(
                    [[
                     new MapPoint(-1726185, 9543036),
                     new MapPoint(34923, 6920940),
                     new MapPoint(1874303, 6255632),
                     new MapPoint(1835168, 6255632),
                     new MapPoint(1913439, 6138225)
                     ]], new SpatialReference(102100));
                var myGraphicLine:Graphic = new Graphic(myPolyline);
                myGraphicLine.symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, 0xDD2222, 1.0, 4)
                myGraphicsLayer.add(myGraphicLine);

                var myPolygon:Polygon = new Polygon(
                    [[
                     new MapPoint(2352491, -1992338),
                     new MapPoint(2332923, -2461967),
                     new MapPoint(2646009, -2266288),
                     new MapPoint(3076503, -2324992),
                     new MapPoint(3272181, -2520670),
                     new MapPoint(3506996, -2559806),
                     new MapPoint(3702675, -3049003),
                     new MapPoint(3370021, -3675175),
                     new MapPoint(2763416, -4046965),
                     new MapPoint(2117676, -4144804),
                     new MapPoint(1961133, -3890422),
                     new MapPoint(2000269, -3655607),
                     new MapPoint(1667615, -3185978),
                     new MapPoint(1550208, -2422831),
                     new MapPoint(1334961, -1953202),
                     new MapPoint(2352491, -1992338)
                     ]], new SpatialReference(102100));
                var myGraphicPolygon:Graphic = new Graphic();
                myGraphicPolygon.geometry = myPolygon;
                myGraphicPolygon.symbol = new SimpleFillSymbol(
                    SimpleFillSymbol.STYLE_SOLID, // fill style
                    0xFF0000, // fill color
                    0.7 // fill alpha
                    );
                myGraphicPolygon.toolTip = "Polygon added with ActionScript";
                myGraphicsLayer.add(myGraphicPolygon);
                btn.enabled = false;
            }
        ]]>
    </fx:Script>

    <s:Label width="100%" text="This sample demonstrates adding graphics to the map using either MXML or ActionScript.  Simple marker symbols, picture marker symbols, simple line symbols, simple fill symbols, and picture fill symbols are shown."/>
    <s:Button id="btn"
              click="addSomeMarkers()"
              label="Add some more markers using ActionScript"/>
    <esri:Map id="myMap"
              level="2"
              wrapAround180="true">
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        <esri:GraphicsLayer id="myGraphicsLayer">
            <esri:Graphic toolTip="California MapPoint with a SimpleMarkerSymbol">
                <esri:geometry>
                    <esri:MapPoint x="-13163000" y="4035000"
                                   spatialReference="{new SpatialReference(102100)}"/>
                </esri:geometry>
                <esri:symbol>
                    <esri:SimpleMarkerSymbol color="0x0033DD" size="18"/>
                </esri:symbol>
            </esri:Graphic>
            <esri:Graphic toolTip="Hurricane polyline with a SimpleLineSymbol">
                <esri:geometry>
                    <esri:Polyline spatialReference="{new SpatialReference(102100)}">
                        <fx:Array>
                            <fx:Array>
                                <esri:MapPoint x="-4700503" y="1128848"/>
                                <esri:MapPoint x="-7909635" y="2819513"/>
                                <esri:MapPoint x="-8144450" y="4199048"/>
                                <esri:MapPoint x="-7244327" y="5261584"/>
                            </fx:Array>
                        </fx:Array>
                    </esri:Polyline>
                </esri:geometry>
                <esri:symbol>
                    <esri:SimpleLineSymbol width="6" color="0xFF0000"/>
                </esri:symbol>
            </esri:Graphic>
            <esri:Graphic toolTip="Brazilian polygon with a SimpleFillSymbol">
                <esri:geometry>
                    <esri:Polygon spatialReference="{new SpatialReference(102100)}">
                        <fx:Array>
                            <fx:Array>
                                <esri:MapPoint x="-3867905" y="-671044"/>
                                <esri:MapPoint x="-4533702" y="-2578326"/>
                                <esri:MapPoint x="-5316417" y="-2832708"/>
                                <esri:MapPoint x="-5844750" y="-3869806"/>
                                <esri:MapPoint x="-6333947" y="-3498016"/>
                                <esri:MapPoint x="-6412218" y="-1942370"/>
                                <esri:MapPoint x="-8211974" y="-954779"/>
                                <esri:MapPoint x="-7703209" y="229077"/>
                                <esri:MapPoint x="-5736637" y="454597"/>
                                <esri:MapPoint x="-3867905" y="-671044"/>
                            </fx:Array>
                        </fx:Array>
                    </esri:Polygon>
                </esri:geometry>
                <esri:symbol>
                    <esri:SimpleFillSymbol alpha="0.7" color="0x009933"/>
                </esri:symbol>
            </esri:Graphic>
        </esri:GraphicsLayer>
    </esri:Map>
</s:Application>

GraphicsLayer利用InfoSymbol绑定Graphic的attributes，Graphic的attributes做数据源，InfoSymbol展现。

         InfoSymbol可以在infoRenderer中根据需要设置一些元素控件来展现，就是自定义符号，例如图片，文本，按钮等

         InfoSymbol是每个Graphic一个，且实时显示

         InfoSymbol只能算是一种符号，四种基本符号

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:esri="http://www.esri.com/2008/ags"
               xmlns:s="library://ns.adobe.com/flex/spark"
               pageTitle="Basic InfoSymbol example">
    <!--
    Basic example of an infosymbol containing a vbox with an image and a label.
    The image url is read from the attributes of the graphic.
    -->
    <fx:Declarations>
        <esri:InfoSymbol id="infoSymbol1">
            <esri:infoRenderer>
                <fx:Component>
                    <s:DataRenderer>
                        <s:layout>
                            <s:VerticalLayout/>
                        </s:layout>
                        <mx:Image source="{data.myImageURL}"/>
                        <s:Label text="{data.myTitle}"/>
                    </s:DataRenderer>
                </fx:Component>
            </esri:infoRenderer>
        </esri:InfoSymbol>
    </fx:Declarations>
    
    <esri:Map openHandCursorVisible="false">
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        <esri:GraphicsLayer symbol="{infoSymbol1}">
            <esri:Graphic>
                <esri:geometry>
                    <esri:MapPoint x="11945000" y="6074000"/>
                </esri:geometry>
                <esri:attributes>
                    <fx:Object>
                        <fx:myImageURL>assets/mongolia.jpg</fx:myImageURL>
                        <fx:myTitle>Mongolia</fx:myTitle>
                    </fx:Object>
                </esri:attributes>
            </esri:Graphic>
            <esri:Graphic>
                <esri:geometry>
                    <esri:MapPoint x="-7359000" y="2092000"/>
                </esri:geometry>
                <esri:attributes>
                    <fx:Object>
                        <fx:myImageURL>assets/sanjuan_pr.jpg</fx:myImageURL>
                        <fx:myTitle>Puerto Rico</fx:myTitle>
                    </fx:Object>
                </esri:attributes>
            </esri:Graphic>
        </esri:GraphicsLayer>
    </esri:Map>
</s:Application>

可以对InfoSymbol的containerStyleName指定相应的样式，

InfoSymbol还有几种状态效果， 

         可以添加toolTip或者infowindow，在同一时刻只能有一个实例。(辅助符号2个)

         用infoWindowRenderer也可以在点击每个Graphic是展示相应的infowindow