既可以爲圖層設置InfoWindow或InfoSymbol,也可以單獨的設置每個要素Feature或Graphic。當設置爲整個圖層時,是應用到整個FeatureLayer或GraphicLayer中的所有要素。一下代碼都有體現
整理,InfoWindow的顯示方式
1、在佈局文件中進行設置,又可分爲兩種方式;
第一種,在單獨的graphic中,獨立設置Symbol和InfoWindow
<esri:GraphicsLayer>
<esri:Graphic symbol="{balloonSymbol}">
<esri:geometry>
<esri:MapPoint x="-5009000" y="-5621000"/>
</esri:geometry>
<esri:attributes>
<fx:Object>
<fx:head>Marker 1</fx:head>
<fx:lat>S 45</fx:lat>
<fx:lon>W 45</fx:lon>
</fx:Object>
</esri:attributes>
<esri:infoWindowRenderer>
<fx:Component>
<samples:BalloonTextArea/> <!-- 這裏的BalloonTextArea實現了IGraphicRenderer接口-->
</fx:Component>
</esri:infoWindowRenderer>
</esri:Graphic>
</esri:GraphicsLayer>
參考
http://resources.arcgis.com/en/help/flex-api/samples/index.html#/Custom_Pop_Up_window/01nq00000083000000/第二種,直接在佈局文件中定義
直接在FeatureLayer圖層中,在圖層層次上設置InfoSymbol和InfoWindow
<esri:FeatureLayer id="fLayer"
mode="onDemand"
outFields="[PARCELID,OWNERNME1,SITEADDRESS,LNDVALUE,USECD]"
url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer/2">
<esri:symbol>
<esri:SimpleFillSymbol id="fillsym" style="null">
<esri:SimpleLineSymbol width="3" color="0xFF0000"/>
</esri:SimpleFillSymbol>
</esri:symbol>
<esri:infoWindowRenderer>
<fx:Component>
<mx:VBox backgroundColor="0xffffff"
color="0x444444"
label="Parcel {data.PARCELID}">
<mx:Label text="Owner: {data.OWNERNME1}"/>
<mx:Label text="Address: {data.SITEADDRESS}"/>
<mx:Label text="Land Value: {data.LNDVALUE}"/>
<mx:Label text="Landuse: {data.USECD}"/>
</mx:VBox>
</fx:Component>
</esri:infoWindowRenderer>
</esri:FeatureLayer>
2、在AS代碼中實現,通過Map控件的infowindow控件
protected function fLayer_graphicAddHandler(event:GraphicEvent):void
{
event.graphic.addEventListener(MouseEvent.MOUSE_OVER, onMouseOverHandler);
event.graphic.addEventListener(MouseEvent.MOUSE_OUT, onMouseOutHandler);
}
private function onMouseOverHandler(event:MouseEvent):void
{
var gr:Graphic = Graphic(event.target);
gr.symbol = mouseOverSymbol;
myTextArea.textFlow = TextFlowUtil.importFromString("<span fontWeight='bold'>2000 Population: </span>" + gr.attributes.POP2000.toString() + "<br/>"
+ "<span fontWeight='bold'>2000 Population per Sq. Mi.: </span>" + gr.attributes.POP00_SQMI.toString() + "<br/>"
+ "<span fontWeight='bold'>2007 Population: </span>" + gr.attributes.POP2007 + "<br/>"
+ "<span fontWeight='bold'>2007 Population per Sq. Mi.: </span>" + gr.attributes.POP07_SQMI);
myMap.infoWindow.label = gr.attributes.NAME;
myMap.infoWindow.closeButtonVisible = false;
myMap.infoWindow.show(myMap.toMapFromStage(event.stageX, event.stageY));
}
整理,InfoSymbol的顯示
1、使用 infoRenderer 擴展InfoSymbol
<fx:Declarations>
<esri:InfoSymbol id="infoSymbol1">
<esri:infoRenderer>
<fx:Component>
<s:DataRenderer>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:Image source="{data.myImageURL}"/>
<s:Label text="{data.myTitle}"/>
</s:DataRenderer>
</fx:Component>
</esri:infoRenderer>
</esri:InfoSymbol>
</fx:Declarations>
然後設置圖層層次的InfoSymbol,注意如何爲attributes賦值,這裏的Attribute主要是傳遞到InfoSymbol中的data變量
<esri:GraphicsLayer symbol="{infoSymbol1}">
<esri:Graphic>
<esri:geometry>
<esri:MapPoint x="11945000" y="6074000"/>
</esri:geometry>
<esri:attributes>
<fx:Object>
<fx:myImageURL>assets/mongolia.jpg</fx:myImageURL>
<fx:myTitle>Mongolia</fx:myTitle>
</fx:Object>
</esri:attributes>
</esri:Graphic>
<esri:Graphic>
<esri:geometry>
<esri:MapPoint x="-7359000" y="2092000"/>
</esri:geometry>
<esri:attributes>
<fx:Object>
<fx:myImageURL>assets/sanjuan_pr.jpg</fx:myImageURL>
<fx:myTitle>Puerto Rico</fx:myTitle>
</fx:Object>
</esri:attributes>
</esri:Graphic>
</esri:GraphicsLayer>
2、單獨爲graphic設置InfoSymbol,並設置樣式
<esri:Graphic>
<esri:geometry>
<esri:MapPoint x="3476384" y="3511014"/>
</esri:geometry>
<esri:symbol>
<esri:InfoSymbol containerStyleName="africaStyle">
<esri:infoRenderer>
<fx:Component>
<s:Button label="Cairo"/>
</fx:Component>
</esri:infoRenderer>
</esri:InfoSymbol>
</esri:symbol>
</esri:Graphic>
<esri:Graphic>
<fx:Style>
.africaStyle
{
borderThickness: 1;
infoPlacement: upperRight;
borderColor: #FFFFFF;
backgroundColor: #FF0000;
paddingLeft: 5;
paddingRight: 5;
paddingTop: 5;
paddingBottom: 5;
}
.southamericaStyle
{
infoPlacement: upperLeft;
borderThickness: 3;
borderColor: #FFFFFF;
backgroundColor: #00FF00;
paddingLeft: 2;
paddingRight: 2;
paddingTop: 2;
paddingBottom: 2;
}
</fx:Style>
3、設置複雜的Infosymbol
<esri:FeatureLayer mode="onDemand"
outFields="[CITY_NAME]"
url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0"
useAMF="false">
<esri:symbol>
<esri:CompositeSymbol>
<esri:SimpleMarkerSymbol color="0x000000"
size="14"
style="circle"/>
<esri:TextSymbol background="true"
backgroundColor="0xFFFFFF"
border="true"
borderColor="0x000000"
color="0x000000"
placement="start"
textAttribute="CITY_NAME"
yoffset="10">
<flash:TextFormat bold="true" size="16"/>
</esri:TextSymbol>
<esri:SimpleMarkerSymbol color="0xFFFFFF"
size="10"
style="circle"/>
</esri:CompositeSymbol>
</esri:symbol>
</esri:FeatureLayer>