arcgis for flex 在地图上显示柱状图

这一小节让我们去看一下如何使用专题图在地图上表现丰富的业务数据。

专题图主要通过InfoSymbol来实现，它可以显示和InfoWindow类似的符号。在InfoSymbol中放置比如饼图、柱状图等组件后，其对应的Graphic就可以被绘制成一个信息非常丰富的符号，同时，符号内的数据和Graphic的attributes是相关联的。

下面首先看一下使用饼图的专题图效果：

图 33        InfoSymbol实现的专题图效果

以下是对应的源代码：

<mx:Script>

<![CDATA[     

        privatefunction init():void

        {     

               var mp:MapPoint = new MapPoint( x, y );

               var g:Graphic = new Graphic(mp);

               g.attributes = new Object();

              

               var thematic:ArrayCollection = new ArrayCollection( [

              { Country: "美国", Gold: goldA },

              { Country: "中国", Gold: goldC },

              { Country: "俄罗斯", Gold: goldR } ]);

 

               g.attributes.thematic = thematic;

               this.thematicLayer.add(g);

        }

]]>

</mx:Script>

 

<esri:InfoSymbol id="infoSymbol" infoPlacement="center">

<esri:infoRenderer>

        <mx:Component>

               <mx:PieChart id="chart"

showDataTips="true" width="150" height="150"

dataProvider="{data.thematic}">

                <mx:series>

                    <mx:PieSeries field="Gold" displayName="资源占有率"

nameField="Country"/>

                </mx:series>

               </mx:PieChart>

        </mx:Component>

</esri:infoRenderer>

</esri:InfoSymbol>

 

<esri:Map>

    <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"/>

    <esri:GraphicsLayer id="thematicLayer" symbol="{infoSymbol}" />

</esri:Map>

在这个例子里，我们在程序初始化的时候生成了一些带有统计信息的Graphic添加到地图上，这些Graphic对象的attributes属性中都带有一个thematic集合来保存各个统计的对象，每个统计的对象包含两个字段：Country表示国家，Gold表示资源占有率，下面我们会在InfoSymbol的定义中再次看到这两个字段。

当定义好这些Graphic对象以后，我们就可以把它们添加到设置了InfoSymbol符号的GraphicLayer上了。在InfoSymbol的定义中，我们可以看到，在这个InfoSymbol中添加了一个饼图组件PieChart，这个饼图的dataProvider属性绑定的是{data.thematic}，它代表的其实就是Graphic对象的attributes属性的thematic对象。你可以简单地这样认为：InfoSymbol中的data代表的就是其对应的Graphic对象的attributes属性。

既然在InfoSymbol中可以获得Graphic的属性信息，那么根据Graphic的属性信息来绘制不同的专题图就是水到渠成的事情了，上面的代码就可以做出图 33的效果来。