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 >
10              </ esri:visibleLayers >
11          </ esri:ArcGISDynamicMapServiceLayer >
12          < esri:GraphicsLayer  id ="myGraphicsLayer" />
13      </ esri:Map >
14      </ 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" />
100                      </ mx:Transition >
101                      < mx:Transition  fromState ="TitleState"  toState ="DetailState" >
102                      < mx:Resize  target ="{this}"  duration ="100" />
103                      </ mx:Transition >
104                      < mx:Transition  fromState ="DetailState"  toState ="*" >
105                      < mx:Resize  target ="{this}"  duration ="100" />
106                      </ mx:Transition >
107                      < mx:Transition  fromState ="TitleState"  toState ="*" >
108                      < mx:Resize  target ="{this}"  duration ="100" />
109                      </ mx:Transition >
110                      </ mx:transitions >
111                      < mx:HBox  id ="titleBar"  width ="100%"  height ="100%"   >
112                          < mx:Image  source ="@Embed(source='assets/pie_chart.gif')"  width ="18"  height ="18"   />
113                      </ mx:HBox >
114                  </ mx:VBox >
115              </ mx:Component >
116          </ esri:infoRenderer >
117      </ 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              // 设置返回字段
10             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 " ];
11              // 进行查询
12             queryTask.execute(query,  new  AsyncResponder( onResult, onFault ));
13              // 查询成功后执行方法
14              function  onResult( featureSet : FeatureSet, token : Object  =   null  ) :  void
15              {
16                for each ( var myGraphic : Graphic in featureSet.features )
17                {
18                     //设置显示的symbol
19                     myGraphic.symbol = ifs;
20                     //添加到GraphicsLayer中进行显示
21                     myGraphicsLayer.add( myGraphic );
22                     //属性数组
23                     var object : ArrayCollection = new ArrayCollection
24                     ([
25                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄低于5岁" , VALUE : myGraphic.attributes.AGE_UNDER5},
26                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄5-17岁", VALUE : myGraphic.attributes.AGE_5_17},
27                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄18-21岁",VALUE : myGraphic.attributes.AGE_18_21},
28                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄22-29岁",VALUE : myGraphic.attributes.AGE_22_29},
29                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄30-39岁",VALUE : myGraphic.attributes.AGE_30_39},
30                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄40-49岁",VALUE : myGraphic.attributes.AGE_40_49},
31                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄50-64岁",VALUE : myGraphic.attributes.AGE_50_64},
32                     {AREANAME : myGraphic.attributes.AREANAME,AGE : "年龄65岁以上",VALUE : myGraphic.attributes.AGE_65_UP}
33                     ]);
34                     //设置属性
35                     myGraphic.attributes = object;
36                }
37            }
38              // 查询失败后执行方法
39              function  onFault( info : Object, token : Object  =   null  ) :  void
40              {
41                Alert.show(info.toString());
42            }
43         ]] >
44      < / mx:initialize>

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