ArcGIS API for Flex入门

一、数据绑定

   在 FlexApplication 中加入一个 Map 组件,并且在 Map 组件中添加了一个 ArcGISTiledMapServiceLayer 图层,当然,ArcGISFlex 不仅支持切 片 图 层 , 还 有 ArcGISDynamicMapServiceLayer 、 ArcGISMapServiceLayer 、 ArcGISImageServiceLayer、ArcIMSMapServiceLayer,这些类型的图层都可以顾名思义。

  如果你想要实现这样的功能:点击一个按钮(或者选中下拉框的一个选项) ,当 前的 Map 中的地图就自动地切换——就像 GoogleMap 一样,你可以选择卫星图或者切片地 图。当然,你可以这样做:在每个按钮的 Click 事件中,获得需要更新的图层 URL,然后通 知 Map:换图层了!没有任何问题,但是,在 Flex 有更加“面向对象”的方法:数据绑定。 打开 Sample 中的 agol.mxml。 我们注意,在 Map 元素的属性中,有一个 url 定义,当然这就是地图服务的地址。然而 这 个 地 址 并 不 是 一 个 通 常 的 字 符 串 , 在 其 中 嵌 入 了 一 段 “{servicePicker.selectedItem.toString()}” 。这个 servicePicker 是什么呢,往下看几行,我们 可以看到,在这个 FlexApplication 中的 ComboBox 的 id 是 servicePicker,这个 ComboBox 就是供你来选择地图服务的。 id 在 Flex 中有着非常重要的作用。 好, 我们看看这段代码到底是什么意思。

   Flex 组件默认监听了名为 propertyChange 的事 件,当自身的数据改变的时候,它就会分发这一事件,这时,使用花括号括起来的对象就会 接受到对应的事件并更新自身的数据。 “{servicePicker}” 监听的是 id 为 servicePicker 的下拉 框 的 组 件 , 当 我 们 在 下 拉 框 选 择 了 某 个 地 图 服 务 的 时 候 , “{servicePicker.selectedItem.toString()}”就会根据这个下拉框的选择项生成一个字符串,再 把字符串拼接到 Map 的 url 属性中去。Map 就会根据新的 url 获取数据并进行渲染。这就是 一种“面对对象”的数据处理方式。

 二、 事件 Event

   比如在你的 Flex Application 中,你希望在用户在点击 Map 的时候,获取到用户点击的 坐标, 然后到数据库去查找附近是不是有好吃的餐馆之类的。 这个时候你应该想到我们应该 要处理 Map 的事件了。 这里插播一句,ArcGIS API for Flex 最重要的就是 Map 组件,你完全可以把 Map 组件 等同于其他原生的 Flex 组件来使用。——所以,如果你很熟悉 Flex,那么本小节下面的内 容你可以跳过了。 好,我们打开 Sample 的“EventBasics.mxml” ,在 onApplicationCreationComplete()方法 (它监听了 Application 的创建完成事件) 其中添加了 Map 组件的鼠标 click 事件监听器: 中, myMap.addEventListener(MouseEvent.CLICK, logMouseEvent); 其中的 logMouseEvent 在下面进行了定义: public function logMouseEvent(event:MouseEvent):void { log.text = "* MouseEvent: " + event.type + "\n" + log.text; } 每当用户在 Map 上进行点击时,Map 就会自动分发 MouseEvent.CLICK 事件,而监听 Click 事件的 logMouseEvent()方法就会被执行。运行这个“EventBasics.mxml” ,试着在 地图上点击几下,有没有看到右面的文本变化? 当然,ArcGIS 的 Map 组件提供了许多的 Event,涵盖地图操作、图层操作、查询操作、 绘图操作等等,你可以在此基础上实现任何你想实现的功能。

三、 任务 Task

  Task 是 ArcGISServer 的重要组成部分,一个 Task 可以执行某些特定的任务,比如 Identify、Query 等等。在这个小节,我们通过 IdentifyTask 来认识 Task 的使用方法。 IdentifyTask 是一个可以识别要素的任务, 让我们打开 Sample 的 “IdentifySample.mxml” , 看一下其中核心的代码。 我们首先注意一下在 Flex Application 中添加了这样一个 IdentifyTask 的标签: 我们设想的功能大概是这样的: 先在地图上画一个多边形, 然后识别多边形内的所有要 素,最后在图上标注出来。让我们看一下这个功能在 Flex 中是如何通过 Task 执行完成的:

   首先是绘图,我首先需要在地图上画一个多边形,在 ArcGIS API for Flex 中有一个提供 绘图的工具条 com.esri.ags.toolbars.Draw,通过它我们可以很轻松地实现绘图功能: 上所示,IdentifySample 在 Draw 对象上添加一个事件监听器,当绘图完成时,执行 drawEndHandler()方法,在这个方法中,我们将继续绘图以后的工作。 在已经绘制了一个多边形以后,我们就需要执行 IdentifyTask 来进行要素识别了。先看 一下代码:
private function drawEndHandler(event rawEvent):void             { 
                var geometry : Geometry = event.geometry;  
                var identifyParams : IdentifyParameters = new IdentifyParameters);   
               identifyParams.returnGeometry = true;   
               identifyParams.tolerance = 3;   
               identifyParams.width = 600;    
               identifyParams.height = 550; 
               identifyParams.geometry = geometry;   
              switch (layerOption.value)                 { 
                    case "top": 
                       identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_TOP;       break;  
                   case "visible": 
                       identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;      break; 
                    case "all":      
                       identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;     break;    
      } 
                identifyParams.mapExtent = map.extent;   
                identifyTask.execute( identifyParams );            }
  
在 DrawEvent 对象中, 我们可以获取刚才绘图的 Geometry 对象, 这个 Geometry 对象用 于 Identify 的参数设置中,如果你做过 ArcEngine 开发,你可以对比一下 SpatialFilter。好, 再设置了一下需要搜索的图层和范围以后,你就可以执行这个 IdentifyTask 了,看到 execute 是不是很兴奋? 然后呢?我们回头看看这个 IdentifyTask 的定义, 其中注册了当 Task 完成时候执行的方 法:identifyCompleteHandler()。
private function identifyCompleteHandler(event:IdentifyEvent):void {
   
for each (var result:IdentifyResult in event.identifyResults)
    { myGraphicsLayer.add(result.feature); } }
看明白了么?这个方法就是在 GraphicLayer 上把这个 Task 的结果画出来。 通过这个流程,你应该明白了 Task 的作用和用法了吧。

 四、 有多少 Task 可以重来

   上一小节我们了解了 FlexAPI 中的 Task 用法,你可以把 Task 想象成一条命令,当你把 命令发送到服务器的时候, 服务器会执行并返回给你结果——当然, 前提是要服务器提供这 个服务。 上一节的例子是 IdentifyTask, 其它的 Task 大抵也可以触类旁通。 可是, API 的 Task 包的命名因为不同 Task 的功能不同而并不很一致,有些 Task 的名称并不是以 Task 结尾, 同时,并不是所有的 Task 都可以 execute。所以,我们在这一小节重点讨论一下各种 Task 的作用和用法。
  1.FindTask 这是一个很简洁的 Task,它的功能主要是通过关键字来搜索要素的某些字段,如果符 合则返回查找到的要素。你可以参考 Sample 的“FindTask.mxml” ,下面是对 Task 定义的一 些代码: 我们似乎已经可以摸到 Task 的一般套路,先生成一个参数对象,对这个 Task 需要完成 的任务进行一些设定,然后将 Task 与这些参数联系起来,最后执行等待服务器返回处理结 果。这个 FindTask 就是这样,简洁明了。
   2.GeometryService 这是对几何对象进行处理的一个 Task,可是它是以 Service 结尾,这代表它并不简单地 给你 execute 一下的,它提供了处理多种任务的能力。比如缓冲(buffer) 、量测(lengths) 等等。让我们打开 Sample 的“BufferSample.mxml”看看,这是一个缓冲的例子。 我们可以看到,处理的过程和其它 Task 也没什么区别,只不过没有了 execute(有你也 不知道到底执行什么命令) 取代它的是明确的任务名称, , 比如要进行缓冲, 那就是用 buffer 方法: myGeometryService.buffer( bufferParameters ); 好, 那么随之而来的一个问题就是执行完了怎么办, 怎么区分不同命令返回的结果?事 实 上 , 你 只 要 监 听 不 同 的 时 间 好 了 , 比 如 你 执 行 buffer 命 令 , 那 么 你 就 监 听 BUFFER_COMPLETE 事件(mxml 中:bufferComplete="...") ,好了,只要你的方法监听到 这个事件,你就可以在 buffer 完成后进行后续的处理了。
   3.Geoprocessor 这是 GP 服务对应的 Task。 服务很灵活, GP 因此你在设置 Geoprocessor 任务参数 (Object 对象) 的时候, 需要给予更多的注意。 在用法上它并没有很多新意, 具体可以参考一下 Sample 的“GeoprocessorMessageInABottle.mxml” 。
   4.IdentifyTask 识别要素,老朋友了,具体参考上一节。
   5.Locator 从地址获得要素或者从要素获得地址的 Task。 让我们打开 Sample 的 “LocatorTask.mxml” 看一下,下面是执行命令的代码: locateTask.addressToLocations(addy, null, new AsyncResponder(onResult, onFault)); Locator 主要提供两个命令:addressToLocations()和 locationToAddress()。它的参数也是 Object 对象,因此提供了灵活的参数设置和更多出错的机会。
   6.QueryTask 查询要素。FindTask 是搜索某些字段文本的命令,而 QueryTask 则提供了文本查询和空 间查询的能力。sample 中的“QueryTaskOnMap.mxml”是一个文本查询的例子。让我们对 它进行一些修改以进行空间查询: 执行查询的命令是 queryTask.execute( query, new AsyncResponder( onResult, onFault ));
  让我们在它之前加上: query.geometry = map.extent; query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
  上面的 map 是 Map 组件的 id(自己添加) ,同时,把 query 原先定义的 text 属性删除。 让我们运行以后再点击查询, 拖动一下地图, 是不是看到只有原先视口中的要素被高亮了出 来?这就是空间查询的结果,因为上面执行的查询是以当前地图范围为过滤条件的。

五、 API 学习路线
  仅供参考:
  首先,你是否了解 Flex,如果你还不了解 Flex 和它的开发环境,那么可以到这里看看: Flex 入门、 Flex 语言参考 。
  如果你对 Flex 已经有了一定了解,并准备开始使用 
ArcGIS API for Flex,那么首先推荐 看一个 ESRI 的在线视频教你如何配置开发环境,工欲善其事必先利其器嘛。 《Creating an application using the ArcGIS API forFlex》
  当你对 Flex 的 MXML 和 ActionScript 语言都有所了解, 同时已经配置好 
ArcGIS API for Flex 并且可以创建 Flex 应用以后,案例驱动是最好的学习方法,下面是 ArcGIS API for Flex 的在线 Sample 及其源代码。
   
ArcGIS API for Flex 在线 Sample 在开发过程中,对 ArcGIS API for Flex 有任何疑问,最好的解决办法是查看 API 参考: ArcGIS Flex API 参考

posted @ 2013-08-15 15:38  凌光逸仙  阅读(450)  评论(0)    收藏  举报