Flex Viewer 開發教程(4)Widget與Map互動
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()方法。
相關文章
- [開發教程]第1講:Bootstrap使用者介面與互動架構boot架構
- Android與Flutter混合開發-UI互動AndroidFlutterUI
- odoo 開發入門教程系列-模組互動Odoo
- vue 與原生app的對接互動(混合開發)VueAPP
- 元件化開發跨module互動方式—ModuleBus互動元件化
- Solana 開發學習之透過RPC與Solana互動RPC
- UE4 C++ Widget的NativeConstruct 與 NativePreConstructC++Struct
- 4、Flutter Widget - Transform;FlutterORM
- Redis資料庫4:Go與Redis的互動Redis資料庫Go
- H5與APP混合開發通訊互動記錄H5APP
- Flutter開發日記——Flutter動畫&Motion Widget詳解(上)Flutter動畫
- Flutter開發日記——Flutter動畫&Motion Widget詳解(下)Flutter動畫
- 重新發現科技與人文的互動
- 外媒:遊戲開發者與貓咪互動對工作有益遊戲開發
- 百度地圖開發-與地圖的互動功能 06地圖
- 【Flutter】開發之實戰Widget(四)Flutter
- 【Flutter】開發之進階Widget(三)Flutter
- 【Flutter】開發之基礎Widget(二)Flutter
- 【Flutter】開發之進階Widget(五)Flutter
- Flex的動畫效果與變換!(二)Flex動畫
- Go(4 [Map])Go
- Google AR 互動的開源與幕後Go
- iOS BLE 開發小記[5] 與 Remote Peripheral 互動的最佳實踐iOSREM
- display:flex與inline-flex 區別Flexinline
- vnc viewer 64位下載,在windows安裝vnc viewer客戶端使用教程VNCViewWindows客戶端
- Widget、RenderObject 與 ElementObject
- js 與WKWebView 互動JSWebView
- LVGL庫入門教程02-基本控制元件與互動控制元件
- 敏捷開發與文件:互補還是互斥?敏捷
- 遊戲內嵌社群服務開放,助力開發者提升玩家互動與留存遊戲
- 開發互動直播應用很簡單:聲網 Android Demo保姆級跑通教程Android
- vnc viewer西西軟體,vnc viewer西西軟體推薦,vnc客戶端使用教程VNCView客戶端
- AndoridSQLite資料庫開發基礎教程(4)SQLite資料庫
- Java與Excel的互動!-JavaExcel
- ReactNative與iOS的互動ReactiOS
- Flutter 與Native原生互動Flutter
- Flutter 與 Android 的互動FlutterAndroid
- flash如何與js互動?JS
- Spring 容器與 Servlet互動SpringServlet