既可以为图层设置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>
http://resources.arcgis.com/en/help/flex-api/samples/index.html#/InfoWindow_on_Click/01nq00000031000000/
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)); }
http://resources.arcgis.com/en/help/flex-api/samples/index.html#/InfoWindow_on_MouseOver/01nq0000001q000000/
整理,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>