InfoWindow 和 InfoSymbol 的顯示

既可以爲圖層設置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>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章