??? 作者：Flyingis

??? 本文嚴(yán)禁用于商業(yè)目的，如需轉(zhuǎn)載請(qǐng)注明作者及原文鏈接，其他疑問(wèn)請(qǐng)聯(lián)系：dev.vip#gmail.com

??? 在ArcGIS Flex API中探索Flex使用是一種不錯(cuò)的學(xué)習(xí)方法，可以相互輔助理解ArcGIS Flex API和Flex，這兩天重新翻閱了一些官方資料，寫(xiě)一點(diǎn)小結(jié)，從之前的一篇事件開(kāi)始。

??? ArcGIS Flex API是基于Flex API的一個(gè)開(kāi)發(fā)庫(kù)，開(kāi)發(fā)之前需要導(dǎo)入agslib.swc，根據(jù)WebGIS所需的功能可以想到，事件是用戶和地圖進(jìn)行交互的基礎(chǔ)，沒(méi)有豐富的事件交互機(jī)制就很難為用戶提供完整的WebGIS應(yīng)用體驗(yàn)，如果換成是自己去設(shè)計(jì)ArcGIS Flex API，我們會(huì)從哪些功能需求入手？

??? 點(diǎn)擊圖層的地理要素進(jìn)行查詢(xún)，鼠標(biāo)移動(dòng)到查詢(xún)圖層的地理要素上方，異步彈出該要素基本信息窗口。沒(méi)錯(cuò)，這些都是WebGIS的基本需求，那么通過(guò)一個(gè)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，上面例子中所有事件的管理通過(guò)addEventListener和 removeEventListenser兩個(gè)方法實(shí)現(xiàn)，并且通過(guò)鼠標(biāo)對(duì)地圖的點(diǎn)擊動(dòng)作的分解，實(shí)現(xiàn)在鼠標(biāo)點(diǎn)擊不同階段的事件響應(yīng)，屬性信息的獲取在 MouseUp階段，toMapFromStage實(shí)現(xiàn)屏幕坐標(biāo)到地圖坐標(biāo)的轉(zhuǎn)換，并將結(jié)果顯示在infoWindow中。

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

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

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>

轉(zhuǎn)載于:https://www.cnblogs.com/flyingis/archive/2008/12/07/1349751.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。