Arcgis apis for flex项目实例—开发篇（6）：自己的infowindow

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="280" height="120" 
         xmlns:esri="http://www.esri.com/2008/ags">
    <fx:Script>
        <![CDATA[
            import com.esri.ags.Graphic;
            
            import flash.net.navigateToURL;
            [Bindable]
            public var graphic:Graphic;
            
            protected function image_Close_clickHandler(event:MouseEvent):void
            {
                this.parent.removeChild(this);
            }
            
        ]]>
    </fx:Script>
    <!--气泡形外框-->
    <s:Path data="M 1 1 L 278 1 L 278 90 L 175 90 L 130 118 L 150 90 L 1 90 Z" winding="nonZero">
        <s:stroke>
            <s:SolidColorStroke caps="none" color="#696969" joints="miter" miterLimit="4" weight="1"/>
        </s:stroke> 
        <s:fill>
            <s:SolidColor color="#FFFFFF"/>
        </s:fill>
    </s:Path>
    <!--主要内容-->
    <s:BorderContainer left="1" right="1" top="1" height="30" backgroundColor="#EAEAEA"
                       dropShadowVisible="false">
        <s:Image id="image_Close" right="5" click="image_Close_clickHandler(event)"
                 source="image/close.png" verticalCenter="0"/>
        <s:Label id="label_Title" left="10" color="#1D2DC6" fontFamily="宋体" fontSize="16"
                 fontWeight="bold" text="{graphic.attributes.NAME}" verticalCenter="0"/>
    </s:BorderContainer>
    <s:Label id="label_Address" left="10" top="45" color="#6B6B6B" text="{graphic.attributes.REGION}"/>
    <!--查看详情时跳转至数据自带的链接-->
    <s:Label right="10" top="45" color="#0000FF" text="查看详情" textDecoration="underline" buttonMode="true"
             click="navigateToURL(new URLRequest(graphic.attributes.URL.toString()),‘_blank‘)"/>
</s:Group>

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          width="270" gap="0">
    <!--注册事件用于点击返回按钮回到首页-->
    <fx:Metadata>
        [Event(name="BacktoFront", type="tool.CustomEvent")]
    </fx:Metadata>
    <fx:Script>
        <![CDATA[
            import com.esri.ags.Graphic;
            import com.esri.ags.Map;
            import com.esri.ags.events.ExtentEvent;
            import com.esri.ags.events.PanEvent;
            import com.esri.ags.events.ZoomEvent;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.layers.GraphicsLayer;
            import com.esri.ags.symbols.PictureMarkerSymbol;
            import com.esri.ags.symbols.SimpleMarkerSymbol;
            import com.esri.ags.utils.GeometryUtil;
            import com.esri.ags.utils.GraphicUtil;
            
            import mx.collections.ArrayCollection;
            
            import spark.events.IndexChangeEvent;
            
            import tool.CustomEvent;
            
            //绑定map用于显示要素、控制popupwindow
            //赋值map时就把三个监听注册
            [Bindable]
            private var _map:Map;
            public function set map(value:Map):void
            {
                _map = value;
                _map.addEventListener(ExtentEvent.EXTENT_CHANGE,mapExtentChanger);
                _map.addEventListener(PanEvent.PAN_UPDATE,panHandler);
                _map.addEventListener(ZoomEvent.ZOOM_UPDATE,zoomHandler);
            }
            public function get map():Map
            {
                return _map;
            }
            
            //将result改为set函数，组件中的绑定要换为resultArray
            //使用时先赋值map，再赋值result，这时result会为map添加要素
            [Bindable]
            private var resultArray:ArrayCollection;
            public function set result(value:ArrayCollection):void
            {
                resultArray = value;
                if(map)
                {
                    var gLayer:GraphicsLayer = AddGraphicLayer("query");
                    for each(var graphic:Graphic in resultArray)
                    {
                        gLayer.add(graphic);
                    }
                    map.zoomTo(GraphicUtil.getGraphicsExtent(resultArray.toArray()));
                }
            }
            public function get result():ArrayCollection
            {
                return resultArray;
            }
            
            //返回按钮中增加了移除要素和popwindow
            private function back_clickHandler(event:MouseEvent):void
            {
                RemoveGraphicLayer("query");
                RemovePopup();
                dispatchEvent(new CustomEvent(CustomEvent.BacktoFront));
            }

            private function RemoveGraphicLayer(layerid:String):void
            {
                if(map.getLayer(layerid)!=null)
                {
                    map.removeLayer(map.getLayer(layerid));
                }
                
            }

            private function RemovePopup():void
            {
                if(map.getChildByName("popup"))
                {
                    map.removeChild(map.getChildByName("popup"));
                }
                
            }
            
            //这个是常用添加GraphicsLayer函数
            private function AddGraphicLayer(layerid:String):GraphicsLayer
            {
                var glayer:GraphicsLayer;
                if(map.getLayer(layerid)!=null)
                {
                    glayer = map.getLayer(layerid) as GraphicsLayer;
                }
                else
                {
                    glayer = new GraphicsLayer();
                    glayer.id = layerid;
                    map.addLayer(glayer);
                }
                return glayer;
            }

            private function list_Result_changeHandler(event:IndexChangeEvent):void
            {
                var graphic:Graphic = list_Result.selectedItem as Graphic;
                var mappoint:MapPoint = graphic.geometry as MapPoint;
                //定位至选定要素，同时控制一下级别
                map.zoomTo(mappoint);
                if(map.level < 12)
                    map.level = 12;
                var popupWindow:PopupWindow;
                //若map已有popupwindow，就把popupwindow移动到当前位置
                if(map.getChildByName("popup"))
                {
                    popupWindow = map.getChildByName("popup") as PopupWindow;
                    popupWindow.graphic = graphic;
                    //popup的x、y是左上角定位的，要计算一下把定位点移至气泡底部，同时要和符号匹配
                    popupWindow.x = map.toScreenX(mappoint.x) - 130;
                    popupWindow.y =  map.toScreenY(mappoint.y) - 148;
                
                }
                //若map没有popupwindow，新建一个并放置到对应的位置
                else
                {
                    popupWindow = new PopupWindow();
                    popupWindow.graphic = graphic;
                    popupWindow.name = "popup";
                    popupWindow.x = map.toScreenX(mappoint.x) - 130;
                    popupWindow.y =  map.toScreenY(mappoint.y) - 148;
                    map.addChild(popupWindow);
                }

            }

            private function panHandler(event:PanEvent):void
            {
                PopupMove();
            }
            
            private function zoomHandler(event:ZoomEvent):void
            {
                PopupMove();
            }
            
            private function mapExtentChanger(event:ExtentEvent):void
            {
                PopupMove();
            }
            //move其实就是重新计算定位点的屏幕坐标，移动一下popupwindow
            private function PopupMove():void
            {
                if(map.getChildByName("popup"))
                {
                    var popupWindow:PopupWindow = map.getChildByName("popup") as PopupWindow;
                    var mappoint:MapPoint = popupWindow.graphic.geometry as MapPoint;
                    popupWindow.x = map.toScreenX(mappoint.x) - 130;
                    popupWindow.y =  map.toScreenY(mappoint.y) - 148;
                    
                }
            }
            
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <s:Group width="100%" height="30">
        <s:Label left="0" text="{‘共查到‘+resultArray.length+‘个结果‘}" verticalCenter="0"/>
        <mx:LinkButton right="0" label="返回" click="back_clickHandler(event)"
                       verticalCenter="0"/>
    </s:Group>
    <s:List id="list_Result" width="100%" height="100%" itemRenderer="renderer.listRenderer" dataProvider="{resultArray}"
            change="list_Result_changeHandler(event)"></s:List>
</s:VGroup>