|
目的：
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?
="myMap"
?extent
="{myExtent}"
?4
????????
esri:ArcGISTiledMapServiceLayer?
url
="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"
?5
esri:ArcGISDynamicMapServiceLayer?
="http://jh-53a435fbc0e8/ArcGIS/rest/services/California/MapServer"
?6
????????????
esri:visibleLayers
?7
????????????????
mx:ArrayCollection
?8
mx:Number
1
</
?9
10
11
esri:ArcGISDynamicMapServiceLayer
12
esri:GraphicsLayer?
="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?
="ifs"
??2
esri:infoRenderer
??3
mx:Component
??4
mx:VBox?
="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
?16
?17
?18
?19
?20
?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
?34
???????????????????????????????????case?"DetailState":?
?35
?36
?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
?55
mx:states
?56
mx:State?
name
="TitleState"
?57
????????????????????????????
<!--
?relativeTo相对于其添加子项的对象、position子项的位置?
-->
?58
mx:AddChild?
relativeTo
="{titleBar}"
?position
="lastChild"
?59
????????????????????????????????
mx:Label?
="titleLabel"
?fontWeight
="bold"
?fontSize
="15"
?text
="{data.getItemAt(0).AREANAME}"
?60
mx:AddChild
?61
?62
mx:Button?
="expandButton"
?styleName
="InfoExpandButton"
?width
="18"
?
?63
?64
mx:State
?65
?basedOn属性可以设置是基于哪个State?
?66
="DetailState"
?basedOn
?67
mx:RemoveChild?
target
="{expandButton}"
?68
?69
mx:Spacer?
?70
?71
?72
="closeButton"
="InfoCloseButton"
?73
?74
="{this}"
?75
mx:PieChart?
="pieChart"
?dataProvider
="{data}"
="250"
="200"
?showDataTips
="true"
?76
????????????????????????????????????
mx:series
?77
????????????????????????????????????????
mx:PieSeries?
field
="VALUE"
?nameField
="AGE"
?labelPosition
="callout"
?78
????????????????????????????????????????????
mx:calloutStroke
?79
mx:Stroke?
weight
?color
="0x000000"
?alpha
="100"
?80
?81
mx:radialStroke
?82
="#FFFFFF"
="20"
?83
?84
mx:stroke
?85
color
="20"
?weight
="2"
?86
?87
mx:PieSeries
?88
?89
mx:PieChart
?90
?91
?92
mx:Legend?
dataProvider
="{pieChart}"
?direction
="horizontal"
?horizontalGap
="10"
?93
?94
?95
?96
状态切换时的动画效果?
?97
mx:transitions
?98
mx:Transition?
fromState
="*"
?toState
?99
mx:Resize?
="{this}"
?duration
100
mx:Transition
101
="TitleState"
="DetailState"
102
103
104
="*"
105
106
107
108
109
110
111
mx:HBox?
="titleBar"
112
mx:Image?
source
="@Embed(source='assets/pie_chart.gif')"
113
mx:HBox
114
mx:VBox
115
116
117
esri:InfoSymbol
5.上面的代码有点多了但是并不复杂了，整个代码就是定义一个id为ifs的esri:InfoSymbol，主要部分为TitleState和DetailState的2种视图状态的设置和鼠标移上去的rollOverHandler方法、鼠标移开的rollOutHandler方法、鼠标点击的clickHandler方法定义。
6.完成上面的工作后，接下来要做的就是在地图上显示MapTip了，这里就去部分的
California的
Cities的点图层数据了，在<mx:Application 添加mx:initialize用来实现初始化载入MapTip的显示，具体代码和说明如下：
<
mx:initialize
>
<!
[CDATA[
var
?queryTask?:?QueryTask?
=
new
?QueryTask(
"
http://jh-53a435fbc0e8/ArcGIS/rest/services/California/MapServer/1
);
?query?:?Query?
?Query();
//
查询条件取OBJECTID大于600的;
????????????query.where
OBJECTID?>600
;
返回Geometry
????????????query.returnGeometry?
true
设置返回字段
????????????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,?
?AsyncResponder(?onResult,?onFault?));
查询成功后执行方法
????????????
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??????????????????????object?:?ArrayCollection??new?ArrayCollection
24
?????????????????????([
25
?????????????????????{AREANAME?:?myGraphic.attributes.AREANAME,AGE?:?"年龄低于5岁?,?VALUE?:?myGraphic.attributes.AGE_UNDER5}26
?????????????????????年龄5-17岁27
?????????????????????年龄18-21岁28
?????????????????????年龄22-29岁29
?????????????????????年龄30-39岁30
?????????????????????年龄40-49岁31
?????????????????????年龄50-64岁32
?????????????????????年龄65岁以上33
?????????????????????]);
34设置属性35?????????????????????myGraphic.attributes??object;
36
????????????????}37
????????????}
38
查询失败后执行方法
39
?onFault(?info?:?Object,128); line-height:1.5; font-family:'Courier New'; font-size:12px">40
????????????
41
????????????????Alert.show(info.toString());
4243
????????]]
44
/
mx:initialize>
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
