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; } 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;
var helloContent:String;
private function init():void{ if (configXML){ helloContent=String(configXML.hellocontent); } }
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> |
有了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. function showInfoWindow(infoData:Object):void{ ViewerContainer.dispatchEvent(new AppEvent(AppEvent.SHOW_INFOWINDOW,infoData)); } * Set map action from widget. 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> function setMapNavigation(navMethod:String,status:String):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="com.esri.viewer.*" widgetConfigLoaded="init()"> 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;
var helloContent:String; var graphicslayer:Graphicslayer;
if (configXML){ helloContent=String(configXML.hellocontent); } graphicslayer=new Graphicslayer(); map.addLayer(graphicslayer);① }
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); }
function draw(shape:String):void{④ this.setMapAction(shape,255)">null,drawEnd); } 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已作出相应调整，见源代码）：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
