既可以为图层设置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>