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>



展开阅读全文

没有更多推荐了,返回首页