ArcGIS.Server.9.3和ArcGIS API for Flex在MapTips显示饼图数据统计（九）

目的：
1.ArcGIS API for Flex实现在MapTips中显示饼图进行数据统计展示，在本例子中可以点击城市的MapTip后显示详细人口年龄段的统计饼图的功能。
准备工作：
1.在ArcGIS.Server.9.3发布一个叫California的Map Service，并且把这个Service启动起来，这次需要一些数据用来进行图表显示了，California的数据比较齐全了所以本例采用这个数据。
2.底图的话采用Esri在线数据http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer
完成后的效果图：

开始：
1.启动Flex Builder3新建工程以及引入1.0正式版的ArcGIS API for Flex library的开发包。
2.新建chartInfowindow.mxml页面，添加Map、ArcGISTiledMapServiceLayer、ArcGISDynamicMapServiceLayer、GraphicsLayer等。具体代码如下：

 1<esri:Extent id="myExtent" xmin="-124.162751982246" ymin="32.5782548652585" xmax="-114.589241057072" ymax="40.9473919319488" />
 2    <mx:Canvas width="669" height="600" borderStyle="solid" borderThickness="3" verticalCenter="0" left="10">
 3    <esri:Map id="myMap" extent="{myExtent}">
 4        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" />
 5        <esri:ArcGISDynamicMapServiceLayer url="http://jh-53a435fbc0e8/ArcGIS/rest/services/California/MapServer">
 6            <esri:visibleLayers>
 7                <mx:ArrayCollection>
 8                <mx:Number>1</mx:Number>
 9                </mx:ArrayCollection>
            </esri:visibleLayers>
        </esri:ArcGISDynamicMapServiceLayer>
        <esri:GraphicsLayer id="myGraphicsLayer"/>
    </esri:Map>
    </mx:Canvas>

3.上面的代码以ESRI_StreetMap_World_2D的ArcGISTiledMapServiceLayer为底图。在底图上只显示California的Cities的点图层，具体看ArcGISDynamicMapServiceLayer部分的设置。添加了一个GraphicsLayer用来显示MapTip了，同时设置了以California的范围为当前底图的Extent。
4.接下来需要用esri:InfoSymbol来实现mapTip,代码如下：

  1<esri:InfoSymbol id="ifs">
  2        <esri:infoRenderer>
  3            <mx:Component>
  4                <mx:VBox width="100%" height="100%" backgroundColor="0xEEEEEE" click="clickHandler()" rollOver="rollOverHandler()" rollOut="rollOutHandler()"  >
  5                    <mx:Style>
  6                        .InfoCloseButton
  7                        {
  8                            disabledSkin: Embed(source="assets/skins.swf",symbol="Callout_closeButtonDisabledSkin");
  9                            downSkin: Embed(source="assets/skins.swf",symbol="Callout_closeButtonDownSkin");
 10                            overSkin: Embed(source="assets/skins.swf",symbol="Callout_closeButtonOverSkin");
 11                            upSkin: Embed(source="assets/skins.swf",symbol="Callout_closeButtonUpSkin");  
 12                        }
 13                        .InfoExpandButton
 14                        {
 15                            disabledSkin: Embed(source="assets/skins.swf",symbol="Callout_expandButtonDisabledSkin");
 16                            downSkin: Embed(source="assets/skins.swf",symbol="Callout_expandButtonDownSkin");
 17                            overSkin: Embed(source="assets/skins.swf",symbol="Callout_expandButtonOverSkin");
 18                            upSkin: Embed(source="assets/skins.swf",symbol="Callout_expandButtonUpSkin");
 19                        }
 20                    </mx:Style>
 21                    <mx:Script>
 22                        <![CDATA[
 23                            import mx.collections.ArrayCollection;
 24                             private function clickHandler():void
 25                             {
 26                                switch(currentState )
 27                                {
 28                                   case "" :
 29                                      currentState = "TitleState";
 30                                      break;
 31                                   case "TitleState":
 32                                      currentState = "DetailState";
 33                                      break;
 34                                   case "DetailState": 
 35                                      currentState = "TitleState";
 36                                      break;
 37                                }
 38                              }
 39                              private function rollOverHandler() : void
 40                              {
 41                                 if(currentState == null || currentState == "" )
 42                                 {
 43                                    currentState = "TitleState";
 44                                 }
 45                              }
 46                              private function rollOutHandler() : void
 47                              {
 48                                 if( currentState == "TitleState" )
 49                                 {
 50                                    currentState = "";
 51                                 }
 52                              }
 53                        ]]>
 54                    </mx:Script>
 55                    <mx:states>
 56                        <mx:State name="TitleState">
 57                            <!-- relativeTo相对于其添加子项的对象、position子项的位置 -->
 58                            <mx:AddChild relativeTo="{titleBar}" position="lastChild">
 59                                <mx:Label id="titleLabel" fontWeight="bold" fontSize="15" text="{data.getItemAt(0).AREANAME}"/>
 60                            </mx:AddChild>
 61                            <mx:AddChild relativeTo="{titleBar}" position="lastChild">
 62                                <mx:Button id="expandButton" styleName="InfoExpandButton" width="18" height="18" /> 
 63                            </mx:AddChild>
 64                        </mx:State>
 65                        <!-- basedOn属性可以设置是基于哪个State -->
 66                        <mx:State name="DetailState" basedOn="TitleState">
 67                            <mx:RemoveChild target="{expandButton}" />
 68                            <mx:AddChild relativeTo="{titleBar}" position="lastChild">
 69                                <mx:Spacer width="100%" />
 70                            </mx:AddChild>
 71                            <mx:AddChild relativeTo="{titleBar}" position="lastChild">
 72                                <mx:Button id="closeButton" styleName="InfoCloseButton" width="18" height="18" />
 73                            </mx:AddChild>
 74                            <mx:AddChild relativeTo="{this}">
 75                                <mx:PieChart id="pieChart" dataProvider="{data}" width="250" height="200" showDataTips="true">
 76                                    <mx:series>
 77                                        <mx:PieSeries field="VALUE" nameField="AGE" labelPosition="callout">
 78                                            <mx:calloutStroke>
 79                                            <mx:Stroke weight="0" color="0x000000" alpha="100"/>
 80                                            </mx:calloutStroke>
 81                                            <mx:radialStroke>
 82                                            <mx:Stroke weight="0" color="#FFFFFF" alpha="20"/>
 83                                            </mx:radialStroke>
 84                                            <mx:stroke>
 85                                            <mx:Stroke color="0" alpha="20" weight="2"/>
 86                                            </mx:stroke>
 87                                        </mx:PieSeries>
 88                                    </mx:series>
 89                                </mx:PieChart>
 90                            </mx:AddChild>
 91                            <mx:AddChild>
 92                                <mx:Legend dataProvider="{pieChart}" direction="horizontal" horizontalGap="10" width="250" />
 93                            </mx:AddChild>
 94                        </mx:State>
 95                    </mx:states>
 96                    <!--状态切换时的动画效果 -->
 97                    <mx:transitions>
 98                    <mx:Transition fromState="*" toState="TitleState">
 99                    <mx:Resize target="{this}" duration="100"/>
                    </mx:Transition>
                    <mx:Transition fromState="TitleState" toState="DetailState">
                    <mx:Resize target="{this}" duration="100"/>
                    </mx:Transition>
                    <mx:Transition fromState="DetailState" toState="*">
                    <mx:Resize target="{this}" duration="100"/>
                    </mx:Transition>
                    <mx:Transition fromState="TitleState" toState="*">
                    <mx:Resize target="{this}" duration="100"/>
                    </mx:Transition>
                    </mx:transitions>
                    <mx:HBox id="titleBar" width="100%" height="100%" >
                        <mx:Image source="@Embed(source='assets/pie_chart.gif')" width="18" height="18" />
                    </mx:HBox>
                </mx:VBox>
            </mx:Component>
        </esri:infoRenderer>
    </esri:InfoSymbol>

5.上面的代码有点多了但是并不复杂了，整个代码就是定义一个id为ifs的esri:InfoSymbol，主要部分为TitleState和DetailState的2种视图状态的设置和鼠标移上去的rollOverHandler方法、鼠标移开的rollOutHandler方法、鼠标点击的clickHandler方法定义。
6.完成上面的工作后，接下来要做的就是在地图上显示MapTip了，这里就去部分的California的Cities的点图层数据了，在<mx:Application 添加mx:initialize用来实现初始化载入MapTip的显示，具体代码和说明如下：

 1<mx:initialize>
 2        <![CDATA[
 3            var queryTask : QueryTask = new QueryTask("http://jh-53a435fbc0e8/ArcGIS/rest/services/California/MapServer/1");
 4            var query : Query = new Query();
 5            //查询条件取OBJECTID大于600的;
 6            query.where="OBJECTID >600";
 7            //返回Geometry
 8            query.returnGeometry = true;
 9            //设置返回字段
            query.outFields = ["AREANAME","AGE_UNDER5","AGE_5_17","AGE_18_21","AGE_22_29","AGE_30_39","AGE_40_49","AGE_50_64","AGE_65_UP"];
            //进行查询
            queryTask.execute(query, new AsyncResponder( onResult, onFault ));
            //查询成功后执行方法
            function onResult( featureSet : FeatureSet, token : Object = null ) : void
            {
                for each ( var myGraphic : Graphic in featureSet.features )
                {
                     //设置显示的symbol
                     myGraphic.symbol = ifs;
                     //添加到GraphicsLayer中进行显示
                     myGraphicsLayer.add( myGraphic );
                     //属性数组
                     var object : ArrayCollection = new ArrayCollection
                     ([
                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄低于5岁" , VALUE : myGraphic.attributes.AGE_UNDER5},
                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄5-17岁", VALUE : myGraphic.attributes.AGE_5_17},
                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄18-21岁",VALUE : myGraphic.attributes.AGE_18_21},
                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄22-29岁",VALUE : myGraphic.attributes.AGE_22_29},
                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄30-39岁",VALUE : myGraphic.attributes.AGE_30_39},
                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄40-49岁",VALUE : myGraphic.attributes.AGE_40_49},
                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄50-64岁",VALUE : myGraphic.attributes.AGE_50_64},
                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄65岁以上",VALUE : myGraphic.attributes.AGE_65_UP}
                     ]);
                     //设置属性
                     myGraphic.attributes = object;
                }
            }
            //查询失败后执行方法
            function onFault( info : Object, token : Object = null ) : void
            {
                Alert.show(info.toString());
            }
        ]]>
    </mx:initialize>

7.这样就完成的功能的开发，这个例子的代码相对简单了主要的是esri:InfoSymbol的定义以及mx:PieChart控件的使用。