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控件的使用。

分类: ArcGis Server9.3,ArcGIS API for Flex