Flex Viewer 开发教程（4）Widget与Map交互

1       Widget与Map交互

Widget与Map之间的交互是最常见的一种交互 ，BaseWidget不仅定义了Map实例对象，而且封装了与Map进行交 互的方法。BaseWidget良好封装使Widget与Map交互非常简单。

1.1   交互方式1：map实例

在BaseWidget中，有如下代码：

/**  * Current active map that the container shows.  * The WidgetManager will set its value when a widget is initialized.  */ private var _map:Map; [Bindable] /**  * Set a map object reference. Used by WidgetManager to pass in the current * map. * @param value the map reference object.  */ public function get map():Map{     return _map; } public function set map(value:Map):void{     _map = value; }

通过注释可知，Widget在初始化的时候，WidgetManager会将当前的map实例注入Widget。所以，一旦Widget初始化完成，就有一个map实例可供使用。

下面我们实现一个HelloMapWidget，来说明在Widget如何使用map实例，代码如下：

<?xml version="1.0" encoding="utf-8"?> <viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"                                 xmlns:s="library://ns.adobe.com/flex/spark"                                 xmlns:mx="library://ns.adobe.com/flex/mx"                                 xmlns:viewer="com.esri.viewer.*"                                 layout="absolute" width="400" height="300"                                 widgetConfigLoaded="init()">        <fx:Script>               <![CDATA[                      import com.esri.ags.geometry.MapPoint;                      import mx.controls.Label;                        private var helloContent:String;                        private function init():void{                              if (configXML){                                     helloContent=String(configXML.hellocontent);                              }                      }                        private function sayHiToMap():void{                              var center:MapPoint=map.extent.center;                              var message:Label=new Label();                              message.text=helloContent;                              map.infoWindowContent=message;                              map.infoWindow.show(center);                      }               ]]>        </fx:Script>        <viewer:WidgetTemplate>               <s:HGroup height="100%" width="100%" horizontalAlign="center"                                verticalAlign="middle">                      <s:Button label="Say Hi to Map" click="sayHiToMap()"/>               </s:HGroup>        </viewer:WidgetTemplate> </viewer:BaseWidget>

HelloMapWidget实现的功能是，单击“Say Hi to Map”按钮，在地图当前视图范围的中心点显示infoWindow，infoWindow显示的 内容是配置文件中的字符。运行结果如下图所示：

有了map实例，在Widget就可以做任何与 Map相关的事情，比如控制Map图层、获得Map的各种信息等等， 具体可参考Flex Viewer中的NavigationWidget、MapSwitcherWidget等。
1.2交互方式2：BaseWidget封装的方法

除了map实例，Widget可以通过BaseWidget中封装的方法与Map进行交互（实际上是与MapManager的交 互），见如下代码：

/**  * Show information window (infoWindow) based on infoData from widget.  */ public function showInfoWindow(infoData:Object):void{      ViewerContainer.dispatchEvent(new AppEvent(AppEvent.SHOW_INFOWINDOW, infoData)); } /**  * Set map action from widget.  */ public function setMapAction(action:String, status:String, symbol:Symbol, callback:Function):void{     var data:Object ={             tool: action,             status: status,             symbol: symbol,             handler: callback};     ViewerContainer.dispatchEvent(new AppEvent(AppEvent.SET_MAP_ACTION, data)); } /**  * Set map navigation mode, such a pan, zoomin, etc.  * <p>The navigation methods supported are:</p>  * <listing>  * pan          (Navigation.PAN)  * zoomin       (Navigation.ZOOM_IN)  * zoomout      (Navigation.ZOOM_OUT)  * zoomfull     (ViewerContainer.NAVIGATION_ZOOM_FULL)  * zoomprevious (ViewerContainer.NAVIGATION_ZOOM_PREVIOUS)  * zoomnext     (ViewerContainer.NAVIGATION_ZOOM_NEXT)  * </listing>  */ public function setMapNavigation(navMethod:String, status:String):void{     var data:Object ={             tool: navMethod,             status: status};     ViewerContainer.dispatchEvent(new AppEvent(AppEvent.SET_MAP_NAVIGATION, data)); }

  u  showInfoWindow()

 弹出窗口并显示信息。

  u  setMapAction()

 设置画图操作。

  u  setMapNavigation()

 设置导航操作。

由于是与MapManager交互，上述三个方法中只是派发了相应的事件，这 些事件由MapManager监听、捕捉和响应，在MapManager中有如下代码说明对上述三个方法派发 的事件进行了监听：

ViewerContainer.addEventListener(AppEvent.SET_MAP_NAVIGATION, changeNavigationbyMenu); ViewerContainer.addEventListener(AppEvent.SET_MAP_ACTION, enableMapAction); ViewerContainer.addEventListener(AppEvent.SHOW_INFOWINDOW, widgetShowInfo);

下面实现HelloMapManagerWidget，演示如何使用上述三个方法，代码如 下：

<?xml version="1.0" encoding="utf-8"?> <viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"                                 xmlns:s="library://ns.adobe.com/flex/spark"                                 xmlns:mx="library://ns.adobe.com/flex/mx"                                 xmlns:viewer="com.esri.viewer.*"                                 widgetConfigLoaded="init()">        <fx:Script>               <![CDATA[                      import com.esri.ags.events.DrawEvent;                      import com.esri.ags.layers.GraphicsLayer;                      import com.esri.ags.tools.DrawTool;                      import com.esri.ags.tools.NavigationTool;                      import com.esri.viewer.ViewerContainer;                        private var helloContent:String;                      private var graphicsLayer:GraphicsLayer;                        private function init():void{                              if (configXML){                                     helloContent=String(configXML.hellocontent);                              }                              graphicsLayer=new GraphicsLayer();                              map.addLayer(graphicsLayer);①                      }                        private function sayHiToMapManager():void{② var infoData:Object={content: helloContent, point: map.extent.center};                              this.showInfoWindow(infoData);                      }                        private function activateMapNavigation (tool:String):void{③                              this.setMapNavigation(tool, null);                      }                        private function draw(shape:String):void{④                              this.setMapAction(shape, null, null, drawEnd);                      }                      private function drawEnd(event:DrawEvent):void{⑤                              graphicsLayer.add(event.graphic);                      }               ]]>        </fx:Script>        <viewer:WidgetTemplate width="680" height="200">               <s:VGroup width="100%" height="100%"                                verticalAlign="middle" horizontalAlign="center">                      <s:HGroup width="100%">                              <s:Button label="Say Hi to MapManager"                                              click="sayHiToMapManager()"/>                      </s:HGroup>                      <s:HGroup width="100%">⑥                         <s:Button label="Zoom In"                         click="activateMapNavigation(NavigationTool.ZOOM_IN)"/>                         <s:Button label="Zoom Out"                         click="activateMapNavigation(NavigationTool.ZOOM_OUT)"/>                         <s:Button label="Pan"                         click="activateMapNavigation(NavigationTool.PAN)"/>                              <s:Button label="Previous View" click="activateMapNavigation(ViewerContainer.NAVIGATION_ZOOM_PREVIOUS) "/>                              <s:Button label="Next View" click="activateMapNavigation(ViewerContainer.NAVIGATION_ZOOM_NEXT)"/>                              <s:Button label="Full Extent"                                             click="activateMapNavigation(ViewerContainer.NAVIGATION_ZOOM_FULL)"/>                      </s:HGroup>                      <s:HGroup width="100%">⑦                              <s:Button label="Point"                                              click="draw(DrawTool.MAPPOINT)"/>                              <s:Button label="Polyline"                              &n bsp;              click="draw(DrawTool.POLYLINE)"/>                              <s:Button label="Polygon"                                              click="draw(DrawTool.POLYGON)"/>                              <s:Button label="Extent"                                              click="draw(DrawTool.EXTENT)"/>                              <s:Button label="Circle"                                              click="draw(DrawTool.CIRCLE)"/>                              <s:Button label="Freehand Polyline"                                              click="draw(DrawTool.FREEHAND_POLYLINE)"/>                              <s:Button label="Freehand Polygon"                                              click="draw(DrawTool.FREEHAND_POLYGON)"/>                      </s:HGroup>               </s:VGroup>        </viewer:WidgetTemplate> </viewer:BaseWidget>

•    map添加GraphicsLayer实例，用于显 示画图结果；
•      构造infoData对象，调用showInfoWindow()方法，单击“Say Hi to MapManager”按钮，将显示下图所示信息框（ InfoPupup.mxml和defaults.css已作出相应调整，见源代码）：
  

 

•    调用setMapNavigation()方法，设置当前地图导航操作，Zoom In的效果如下图所示：
  

 

•      调用setMapAction()方法 ，设置地图画图操作，如下图所示：
  

•        响应画图 事件的方法，在此方法中将画图事件中的graphic添加到graphicsLayer中；
•        设置地图导航操作的按钮，click 事件中调用activateMapNavigation()方法；
•          设置画图操作的按钮，click事件 中调用draw()方法。