Flex Viewer 開發教程（4）Widget與Map互動

gispace發表於2011-05-15
FlexView

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()方法。

 

相關文章