Flex Viewer 开发教程(4)Widget与Map交互
来源:互联网 发布:路由器mac地址过滤破解 编辑:程序博客网 时间:2024/04/29 17:31
Widget与Map之间的交互是最常见的一种交互,BaseWidget不仅定义了Map实例对象,而且封装了与Map进行交互的方法。BaseWidget良好封装使Widget与Map交互非常简单。
4.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等。
4.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"
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()方法。
- Flex Viewer 开发教程(4)Widget与Map交互
- Flex Viewer 开发教程(4)Widget与Map交互
- Flex Viewer 开发教程(4)Widget与Map交互
- Flex Viewer 开发教程(5)Widget与Widget交互
- Flex Viewer 开发教程(5)Widget与Widget交互
- Flex Viewer 开发教程(5)Widget与Widget交互
- Flex Viewer 开发教程(7)Widget与服务器交互
- Flex Viewer 开发教程(7)Widget与服务器交互
- Flex Viewer 开发教程(3)Widget与WidgetTemplate
- Flex Viewer 开发教程(6)Widget与共享数据
- 【Flex Viewer】 开发教程(3)Widget与WidgetTemplate
- Flex Viewer 开发教程(3)Widget与WidgetTemplate
- Flex Viewer 开发教程(6)Widget与共享数据
- Flex Viewer 开发教程(3)Widget与WidgetTemplate
- Flex Viewer 开发教程(6)Widget与共享数据
- Flex Viewer 开发教程(2)Widget配置文件
- 【Flex Viewer】 开发教程(2)Widget配置文件
- Flex Viewer 开发教程(2)Widget配置文件
- 又是编码惹的事
- 河流与海
- 开博啦~
- EXCEL画图软件
- 正则表达式中有用但很少用的语法
- Flex Viewer 开发教程(4)Widget与Map交互
- 运盐的驴子
- C#----遍历菜单项加载到TreeView中(目前只支持二级菜单)
- 迭代器模式
- Hibernate二级缓存 ---- 最佳实践
- 解决无法直接打开EXCEL文件的问题
- 狮子和他的三个顾问
- 马云谈支付宝重组:100%合法 雅虎说话不算话
- 一步吟唱EXCEL所有的批注