??? 作者：Flyingis

??? 本文嚴禁用于商業目的，如需轉載請注明作者及原文鏈接，其他疑問請聯系：dev.vip#gmail.com

??? 在ArcGIS Flex API中探索Flex使用是一種不錯的學習方法，可以相互輔助理解ArcGIS Flex API和Flex，這兩天重新翻閱了一些官方資料，寫一點小結，從之前的一篇事件開始。

??? ArcGIS Flex API是基于Flex API的一個開發庫，開發之前需要導入agslib.swc，根據WebGIS所需的功能可以想到，事件是用戶和地圖進行交互的基礎，沒有豐富的事件交互機制就很難為用戶提供完整的WebGIS應用體驗，如果換成是自己去設計ArcGIS Flex API，我們會從哪些功能需求入手？

??? 點擊圖層的地理要素進行查詢，鼠標移動到查詢圖層的地理要素上方，異步彈出該要素基本信息窗口。沒錯，這些都是WebGIS的基本需求，那么通過一個sample看在ArcGIS Flex API如何使用事件。

Code
<?xml?version="1.0"?encoding="utf-8"?>
<mx:Application?
????xmlns:mx="http://www.adobe.com/2006/mxml"?
????pageTitle="Map?Click?(but?not?on?pan?&?zoom)"?
????xmlns:esri="http://www.esri.com/2008/ags"?
????layout="absolute"
????>
????<mx:Script>
????????<![CDATA[/**?*?Problem:??You?want?to?capture?a?"click"?on?the?map,?but?not?a?pan?or?other?mouse?navigation?actions.?*?
????????Solution:?Use?mouseDown?and?panStart?instead?of?the?click?property.?*/
????????import?mx.controls.Button;
????????import?mx.controls.Text;
????????import?com.esri.ags.geometry.MapPoint;
????????import?com.esri.ags.events.PanEvent;

????????private?function?mouseDownHandler(event:MouseEvent):void
????????{
????????????if?(!event.shiftKey)
????????????{
????????????????myMap.addEventListener(MouseEvent.MOUSE_UP,?mouseUpHandler);
????????????}
????????}
????????private?function?panStartHandler(event:PanEvent):void
????????{
????????????myMap.removeEventListener(MouseEvent.MOUSE_UP,?mouseUpHandler);
????????}
????????private?function?mouseUpHandler(event:MouseEvent):void
????????{
????????????myMap.removeEventListener(MouseEvent.MOUSE_UP,?mouseUpHandler);
????????????var?mapPoint:MapPoint=?myMap.toMapFromStage(event.stageX,?event.stageY);
????????????myMap.infoWindow.label?=?"You?clicked?here";
????????????myMap.infoWindow.show(?mapPoint?);?//?"Show?the?click"
????????}
????????]]>
????</mx:Script>
????<esri:Map?id="myMap"?mouseDown="mouseDownHandler(event)"?panStart="panStartHandler(event)">
????<esri:ArcGISTiledMapServiceLayer?url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
????</esri:Map>
</mx:Application>

??? PanEvent是ArcGIS Flex API中自定義的事件，繼承了flash.events.Event，上面例子中所有事件的管理通過addEventListener和 removeEventListenser兩個方法實現，并且通過鼠標對地圖的點擊動作的分解，實現在鼠標點擊不同階段的事件響應，屬性信息的獲取在 MouseUp階段，toMapFromStage實現屏幕坐標到地圖坐標的轉換，并將結果顯示在infoWindow中。

??? 具體的組件中，ArcGISTiledMapServiceLayer和ArcGIS Javascript API中的功能相同，將緩存好的地圖服務添加到頁面上，"esri"是一個標識符，在mxml頁面最上方"xmlns:esri="http://www.esri.com/2008/ags"申明，用以在mxml中使用已定義好的組件。

??? ArcGIS Flex API Events Demo包含了常用的一些事件，可以作為參考學習。從下面例子可以了解到，圖層加載、圖層添加刪除、地圖放大縮小、地圖平移等都被ArcGIS Flex API Events進行了封裝，加上原有的鼠標事件就可以基本滿足WebGIS應用要求了。

Code
<?xml?version="1.0"?encoding="utf-8"?>
<mx:Application?
????xmlns:mx="http://www.adobe.com/2006/mxml"?
????xmlns:esri="http://www.esri.com/2008/ags"?
????pageTitle="Event?handling"?
????layout="absolute"?
????creationComplete="onApplicationCreationComplete()"?
????>
????<mx:Script>
????????<![CDATA[
????????????import?flash.geom.Point;
????????????import?com.esri.ags.events.LayerEvent;
????????????import?com.esri.ags.events.ExtentEvent;
????????????import?com.esri.ags.events.MapEvent;
????????????import?com.esri.ags.events.PanEvent;
????????????import?com.esri.ags.events.ZoomEvent;
????????????import?com.esri.ags.geometry.MapPoint;
????????????import?mx.events.FlexEvent;

????????????[Bindable]?private?var?mapCoordX?:?Number?=?0;
????????????[Bindable]?private?var?mapCoordY?:?Number?=?0;
????????????[Bindable]?private?var?pixelCoordX?:?Number?=?0;
????????????[Bindable]?private?var?pixelCoordY?:?Number?=?0;

????????????private?function?onMouseMove(?event?:?MouseEvent?)?:?void
????????????{
????????????????if?(my Map.loaded)
????????????????{
????????????????????var?mapPoint?:?MapPoint?=?myMap.toMapFromStage(event.stageX,?event.stageY);
????????????????????mapCoordX?=?mapPoint.x;
????????????????????mapCoordY?=?mapPoint.y;
????????????????????var?mapLocalPixelPoint?:?Point?=?myMap.globalToLocal(?new?Point(event.stageX,?event.stageY)?);
????????????????????pixelCoordX?=?mapLocalPixelPoint.x;
????????????????????pixelCoordY?=?mapLocalPixelPoint.y;
????????????????}
????????????}

????????????public?function?onApplicationCreationComplete():void
????????????{
????????????????//?Map?Navigation?Events
????????????????myMap.addEventListener(ExtentEvent.EXTENT_CHANGE,?logExtentEvent);
????????????????myMap.addEventListener(PanEvent.PAN_START,?logPanEvent);
????????????????myMap.addEventListener(PanEvent.PAN_UPDATE,?logPanEvent);
????????????????myMap.addEventListener(PanEvent.PAN_END,?logPanEvent);
????????????????myMap.addEventListener(ZoomEvent.ZOOM_START,?logZoomEvent);
????????????????myMap.addEventListener(ZoomEvent.ZOOM_UPDATE,?logZoomEvent);
????????????????myMap.addEventListener(ZoomEvent.ZOOM_END,?logZoomEvent);
????????????????myMap.addEventListener(MouseEvent.CLICK,?logMouseEvent);
????????????????myMap.addEventListener(MouseEvent.DOUBLE_CLICK,?logMouseEvent);
????????????????myMap.addEventListener(MouseEvent.MOUSE_WHEEL,?logMouseEvent);
????????????????myMap.addEventListener(MapEvent.LAYER_ADD,?logMapEvent);
????????????????myMap.addEventListener(MapEvent.LAYER_REORDER,?logMapEvent);
????????????????myMap.addEventListener(MapEvent.LOAD,?logMapEvent);
????????????????aims.addEventListener(LayerEvent.LOAD,?logLayerEvent);
????????????????log.text?=?"2.?Application?creation?complete\n"?+?log.text;
????????????}

????????????public?function?onMapCreationComplete():void
????????????{
????????????????myMap.infoWindow.addEventListener(FlexEvent.HIDE,?logInfoWindowFlexEvent);
????????????????myMap.infoWindow.label?=?"Clicking?the?'x'?will?\nthrow?'hide'?event";
????????????????//?put?the?infoWindow?in?the?middle?of?the?map
????????????????var?myPoint:MapPoint?=?new?MapPoint(0,0);
????????????????myMap.infoWindow.show(myPoint);
????????????????log.text?=?"1.?Map?creation?complete\n"?+?log.text;
????????????}

????????????public?function?logInfoWindowEvent(event:Event):void
????????????{
????????????????log.text?=?"*?Event?(infoWindow):?"?+?event.type?+?"\n"?+?log.text;
????????????}

????????????public?function?logInfoWindowFlexEvent(event:FlexEvent):void
????????????{
????????????????log.text?=?"*?FlexEvent?(infoWindow):?"?+?event.type?+?"\n"?+?log.text;
????????????}

????????????public?function?logMouseEvent(event:MouseEvent):void
????????????{
????????????????log.text?=?"*?MouseEvent:?"?+?event.type?+?"\n"?+?log.text;
????????????}

????????????public?function?logExtentEvent(event:ExtentEvent):void
????????????{
????????????????log.text?=?"*?ExtentEvent:?"?+?event.type?+?"\n"?+?log.text;
????????????}

????????????public?function?logPanEvent(event:PanEvent):void
????????????{
????????????????log.text?=?"*?PanEvent:?"?+?event.type?+?"\n"?+?log.text;
????????????}

????????????public?function?logZoomEvent(event:ZoomEvent):void
????????????{
????????????????log.text?=?"*?ZoomEvent:?"?+?event.type?+?"\n"?+?log.text;
????????????}

????????????public?function?logMapEvent(event:MapEvent):void
????????????{
????????????????log.text?=?"*?MapEvent:?"?+?event.type?+?"\n"?+?log.text;
????????????}

????????????public?function?logLayerEvent(event:LayerEvent):void
????????????{
????????????????log.text?=?"*?LayerEvent:?"?+?event.type?+?"\n"?+?log.text;
????????????}
????????]]>
????</mx:Script>

????<mx:HDividedBox?width="100%"?height="100%">
????????<esri:Map?id="myMap"
????????????mouseMove="onMouseMove(event)"
????????????crosshairVisible="true"
????????????creationComplete="onMapCreationComplete()"
????????????>
????????????<esri:extent>
????????????????<esri:Extent?xmin="-45"?ymin="-45"?xmax="45"?ymax="45">
????????????????????<esri:SpatialReference?wkid="4326"/>
????????????????</esri:Extent>
????????????</esri:extent>
????????????<esri:ArcIMSMapServiceLayer?id="aims"?creationComplete="log.text='MapLayer?creation?complete\n'+log.text;"?load="log.text='MapLayer?loaded\n'+log.text;"
????????????????serviceHost="http://www.geographynetwork.com"
????????????????serviceName="ESRI_Time"
????????????????/>
????????????<esri:GraphicsLayer?visible="true"?creationComplete="log.text='GraphicLayer?creation?complete\n'+log.text;"?load="log.text='GraphicLayer?loaded\n'+log.text;">
????????????????<esri:Graphic?toolTip="-70.488281,41.660156"?visible="true">
????????????????????<esri:geometry>
????????????????????????<esri:MapPoint?x="-70.488281"?y="41.660156"?spatialReference="{new?SpatialReference(4326)}"/>
????????????????????</esri:geometry>
????????????????????<esri:symbol>
????????????????????????<esri:SimpleMarkerSymbol?id="symbol"?color="0xFF0000"?size="10"?alpha="0.75"/>
????????????????????</esri:symbol>
????????????????</esri:Graphic>
????????????</esri:GraphicsLayer>
????????</esri:Map>
????????<mx:Panel?layout="vertical"?height="100%">
????????????<mx:Text?width="250"?text="You?can?listen?to?many?different?events?both?our?Map?Navigation?specific?events,?as?well?as?general?Flex?events."/>
????????????<mx:TextArea?width="100%"?height="100%"?id="log"/>
????????????<mx:HBox?borderStyle="solid">
????????????????<mx:Label?text="Pixel?x:?{pixelCoordX}"?paddingBottom="0"/>
????????????????<mx:Label?text="Pixel?y:?{pixelCoordY}"?paddingBottom="0"/>
????????????</mx:HBox>
????????????<mx:HBox?borderStyle="solid">
????????????????<mx:Label?text="Map?x:?{mapCoordX.toFixed(4)}"?paddingBottom="0"/>
????????????????<mx:Label?text="Map?y:?{mapCoordY.toFixed(4)}"?paddingBottom="0"/>
????????????</mx:HBox>
????????????<mx:Label?text="spatial?reference:?{myMap.spatialReference.wkid}"/>
????????</mx:Panel>
????</mx:HDividedBox>
</mx:Application>

轉載于:https://www.cnblogs.com/flyingis/archive/2008/12/07/1349751.html

總結

以上是生活随笔為你收集整理的ArcGIS Flex API 中的 Flex 技术（一）--事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。