<?xml version="1.0" encoding="utf-8"?>
<esri:InfoSymbol
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:esri="http://www.esri.com/2008/ags"
>
<mx:Script>
<![CDATA[
import com.esri.ags.SpatialReference;
]]>
</mx:Script>
<!--定义渲染-->
<esri:infoRenderer>
<mx:Component>
<mx:VBox click="clickHandler()"
rollOver="rollOverHandler()"
>
<mx:Style>
.InfoCloseButton {
disabledSkin: Embed(source="assets/skins.swf", symbol="Callout_closeButtonDisabledSkin");
downSkin: Embed(source="assets/skins.swf", symbol="Callout_closeButtonDownSkin");
overSkin: Embed(source="assets/skins.swf", symbol="Callout_closeButtonOverSkin");
upSkin: Embed(source="assets/skins.swf", symbol="Callout_closeButtonUpSkin");
}
.InfoExpandButton {
disabledSkin: Embed(source="assets/skins.swf", symbol="Callout_expandButtonDisabledSkin");
downSkin: Embed(source="assets/skins.swf", symbol="Callout_expandButtonDownSkin");
overSkin: Embed(source="assets/skins.swf", symbol="Callout_expandButtonOverSkin");
upSkin: Embed(source="assets/skins.swf", symbol="Callout_expandButtonUpSkin");
}
</mx:Style>
<mx:Script>
<![CDATA[
private function clickHandler():void {
switch(currentState) {
case "":
currentState="titleState";
break;
case "titleState":
currentState="detailState";
break;
case "detailState":
currentState="titleState"
break;
}
}
//处理鼠标从此标志上悬浮事件
private function rollOverHandler():void {
if(currentState==null||currentState=="") {
currentState="titleState";
}
}
//处理鼠标从此标志上移走事件
private function rollOutHandler(event:Event):void {
if(currentState=="titleState") {
currentState="";
}
}
//处理当效果开始时事件
private function effectStartHandler():void {
removeEventListener(MouseEvent.ROLL_OUT,rollOutHandler);
}
//处理当效果结束时的事件
private function effectEndHander():void {
addEventListener(MouseEvent.ROLL_OUT,rollOutHandler);
}
]]>
</mx:Script>
<!--标志的最初状态-->
<mx:HBox id="titleBar">
<mx:SWFLoader source="@Embed(source='assets/skins.swf',symbol='Icon_airport')" height="18" width="18"/>
</mx:HBox>
<mx:states>
<!--只显示标题的标志状态-->
<mx:State name="titleState">
<mx:AddChild relativeTo="{titleBar}" position="lastChild">
<mx:Label
id="titleLabel"
text="{data.theName}"
rollOver="{Label(event.currentTarget).setStyle('textDecoration','underline')}"
rollOut="{Label(event.currentTarget).setStyle('textDecoration','none')}"
fontWeight="bold"
/>
</mx:AddChild>
<mx:AddChild relativeTo="{titleBar}" position="lastChild">
<mx:Button id="expandButton" styleName="InfoExpandButton" height="18" width="18"/>
</mx:AddChild>
</mx:State>
<!--显示详细信息的标志状态-->
<mx:State name="detailState" basedOn="titleState">
<mx:RemoveChild target="{expandButton}"/>
<mx:AddChild relativeTo="{titleBar}" position="lastChild">
<mx:Button id="closeButton" styleName="InfoCloseButton" height="18" width="18"/>
</mx:AddChild>
<mx:AddChild relativeTo="{this}">
<mx:Label id="lineLabel" text="{data.thePlaceName}"/>
</mx:AddChild>
</mx:State>
</mx:states>
<!--状态之间的过渡处理-->
<mx:transitions>
<!--从任意状态到标题状态的过渡-->
<mx:Transition fromState="*" toState="titleState">
<mx:Sequence targets="{[titleLabel,expandButton]}"
effectStart="effectStartHandler()"
effectEnd="effectEndHander()"
>
<mx:Resize target="{this}" duration="500"/>
<mx:AddChildAction/>
</mx:Sequence>
</mx:Transition>
<!--从标题状态到详细状态之间的过渡-->
<mx:Transition fromState="titleState" toState="detailState">
<mx:Sequence targets="{[lineLabel,closeButton]}">
<mx:Resize target="{this}" duration="500"/>
<mx:AddChildAction/>
</mx:Sequence>
</mx:Transition>
<!--从详细状态到任意状态-->
<mx:Transition fromState="detailState" toState="*">
<mx:Resize target="{this}" duration="500"/>
</mx:Transition>
<!--从标题状态到任意状态-->
<mx:Transition fromState="titleState" toState="*">
<mx:Resize target="{this}" duration="500"/>
</mx:Transition>
</mx:transitions>
</mx:VBox>
</mx:Component>
</esri:infoRenderer>
</esri:InfoSymbol>
使用自定义的标志:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:esri="http://www.esri.com/2008/ags"
>
<mx:Script>
<![CDATA[
import com.esri.ags.samples.myInfoSymbol;
[Bindable]
private var mySymbol:myInfoSymbol = new myInfoSymbol();
]]>
</mx:Script>
<esri:Map id="myMap">
<esri:ArcGISTiledMapServiceLayer
url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
<esri:GraphicsLayer>
<esri:Graphic symbol="{mySymbol}">
<esri:geometry>
<esri:MapPoint x="36.9275" y="-1.3192" spatialReference="{new SpatialReference(4326)}"/>
</esri:geometry>
<esri:attributes>
<mx:Object>
<mx:theName>china</mx:theName>
<mx:thePlaceName>beijing</mx:thePlaceName>
</mx:Object>
</esri:attributes>
</esri:Graphic>
</esri:GraphicsLayer>
</esri:Map>
</mx:Application>