加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

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

发布时间：2020-12-15 04:13:01 所属栏目：百科 来源：网络整理
导读：1???????Widget与Map交互 Widget与Map之间的交互是最常见的一种交互 ，BaseWidget不仅定义了Map实例对象，而且封装了与Map进行交 互的方法。BaseWidget良好封装使Widget与Map交互非常简单。 1.1???交互方式1：map实例 在BaseWidget中，有如下代码： /** ?* C
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;

}

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>
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.

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已作出相应调整，见源代码）：

?

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

?

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同