下载文档原格式
第6章 ArcGIS for Flex6.1 ArcGIS API for Flex介绍6.1.1 简介ArcGIS API for Flex是Esri推出的WebGIS客户端开发包，用于富互联网应用程序RIA(Rich Internet Applications)的开发，为ArcGIS Server提供了一套全新的开发方式，其优点是运行速度快，为用户提供优秀的用户体验。
使用ArcGIS API for Flex可以实现下列功能：z显示地图数据并与之交互。
z在服务器上执行空间处理模型并显示结果。
z基于ArcGIS Online的地图服务，显示自己的业务数据。
z根据属性或者位置查找数据并显示结果。
z查找地址并显示结果。
z创新结果的显示方式。
z创建Mushups应用。
6.1.2 环境搭建ArcGIS API for Flex的下载地址为：h ttp:///ArcGISserver/apis/flex/index.cfm?fa=home开发ArcGIS API for Flex程序需要Flex环境的支持。
Flex SDK 3的下载地址为：/wiki/display/flexsdk/download?build=3.0.1.2012&pkgtype=1有了Flex SDK 3和ArcGIS API for Flex，就可以开发RIA的Flex程序了。
为了开发方便，最好使用Flex Builder，可以从Adobe的官方网站下载试用版，下载地址为：h ttp:///pub/flex/flex_builder/FB3_win.exe安装好Flex Builder之后，会安装Flex SDK 3，所以就不用自己手工安装了。
6.1.3 第一个ArcGIS API for Flex程序打开Flex Builder，从菜单栏选择“开始”→“新建”→“Flex项目”，创建一个Flex 工程(名称为“Demo”)，如图6-1所示，单击“完成”按钮则完成工程创建。
ArcGIS API for Flex技术在数字航道维护管理平台中的应用朱江彦;陈琳【摘要】在长江数字航道维护管理平台建设中,应用ArcGIS API for Flex技术实现了维护管理平台航道底图的及时更新、快速发布与显示,让用户仅使用浏览器就能方便地浏览与查询辖区内的航道信息,对航道基本状况有直观的了解,从而提高航道维护管理效率.【期刊名称】《水运工程》【年(卷),期】2016(000)001【总页数】5页(P106-110)【关键词】ArcGIS API for Flex;数字航道;维护管理平台;地图发布【作者】朱江彦;陈琳【作者单位】长江航道测量中心,湖北武汉430010;长江航道局,湖北武汉430010【正文语种】中文【中图分类】U61;TP30近年来，随着信息化技术的发展与创新，基于Web应用的GIS技术被广泛应用于内河航道信息化的建设中，作为Web技术代表之一的Flex技术由于界面表现力强、可跨平台、且开源，应用非常广泛，而ArcGIS API for Flex更是基于ArcGIS 平台的Flex应用组件集，在长江数字航道维护管理平台建设中，起到了支撑性作用，实现了平台底图的及时更新、快速发布与显示。
本文将就ArcGIS API for Flex技术在长江数字航道维护管理平台中的应用进行讨论。
Flex技术一般指Adobe Flex，最初由Macromedia发布于2004年，它包含了RIA(rich internet applications)富网络应用开发与部署的相关技术与组合。
Flex在开发时通常使用两种方式：一种是MXML的文件，MXML语言是一种基于XML的、标签形式的、陈述性的语言，通过Flex编译器进行编译解析，生成可以在Flash player上播放的后缀为SWF的文件；另外一种是ActionScript的传统脚本语言[1]。
这两种方式在编译过程中没有太大区别，但是对于大多数熟悉C#、Java等软件的开发人员而言，ActionScript更多的是flash动画概念，难以适应flash的开发环境和模式，所以更多的开发人员会采用MXML语言进行编辑开发。
arcgisapiforflex开发入门（一）环境搭建2003
上一篇/下一篇2022-10-1410:50:40/个人分类：muhup查看(2737)/
评论(12)/评分(29/0)
Server建立漂亮的富互联网应用程序
richinternetapplication(RIA)，优
点是运行速度快，用户体验效果会比目前的WEBGIS好。
使用arcgiapiforfle某可以达到下面的效果1，显示你的地图数据并可以和数
据交互2，在服务器上执行空间处理模型并显示结果3，基于ArcGISOnline上的底图显示你自己的数据4，根据属性或者位置查找你的
数据并显示结果5，查找地址并显示结果6，用创新的方式可视化结果7，创建mahup具体详情可以参考
面有一些例子。
安装好fle某builder之后会安装fle某dk3，所以就不用自己手工
安装了。
第一个arcgiapiforfle某程序。
1，打开fle某builder，创建一个fle某工程（名称Demo）。
2，右键单击工程名，选择属性，在属性对话框中选择fle某buildpath，选择
境就配置好了。
3，在Demo.m某ml文件中输入下面这代码
pageTitle=\
Onlineervice\tyleName=\
_World_2D/MapServer\
编译，执行。
第一个简单的agfle某程序就写好了。
效果如图2 Flah:
注：文章部分内容参考了以下文章
Flah:demo。
版权声明本文档版权为ESRI中国（北京）有限公司所有。
未经本公司书面许可，任何单位和个人不得以任何形式摘抄、复制本文档的部分或全部，并以任何形式传播。
本文档版本依照以下原则进行（version x.yz）：x:文档结构变化，设计框架升级y:具体内容更新，章节内容修正z:文字格式调整，奇数为包含对上一版修改记录或批注的稿子，偶数为对上一版修改稿的定稿版本修订记录版本提交日期负责人描述0.10 2008年11月13日张0.20 2008年11月14日张0.30 2008年11月17日张0.32 2008年11月19日张0.33 2008年11月20日陈0.34 2008年11月21日张0.90 2008年11月24日陈1.00 2008年11月25日王目录一初级篇 (4)1.1环境搭建 (4)1.1.1概述 (4)1.1.2相关资源 (4)1.1.3第一个ArcGIS API for Flex程序 (5)1.1.4参考资料及其他 (6)1.2地图的创建 (6)1.2.1概述 (6)1.2.2创建地图 (7)1.2.3事件（Event） (8)1.3绘制与符号化 (9)1.3.1概述 (9)1.3.2绘图控件的使用 (9)1.3.3符号化 (9)1.3.4地图的浏览 (10)1.4T ASK之Q UERY&F IND&I DENTIFY (10)1.4.1概述 (10)1.4.2在mxml文档中嵌入 ActionScript (11)1.4.3 QueryTask (11)1.4.4 FindTask (13)1.4.5 IdentifyTask (15)1.4.6 InfoWindow (17)二中级篇 (18)2.1地理定位（L OCATOR） (18)2.1.1概述 (18)2.1.2地理编码（GeoCode） (18)2.1.3逆地理编码（Reverse Geocode） (20)2.2地理处理（G EOPROCESSING） (21)2.3几何服务（G EOMETRY S ERVICE） (22)2.4打印地图（P RINT） (23)2.5G EO RSS的读取 (24)2.5.1 GeoRSS概述 (24)2.5.2 GeoRSS读取 (24)三高级篇 (26)3.1W EB S ERVICE的使用 (26)3.2ESRI T ILEMAP四叉树索引研究 (28)3.3自定义控件的开发 (31)3.4与G OOGLE M AP的融合 (32)一初级篇1.1环境搭建1.1.1概述ArcGIS API for Flex是ESRI 2008年新推出的WebGIS客户端开发包，用于富互联网应用程序RIA（Rich Internet Applications）的开发，为ArcGIS Server 9.3提供了一套全新的开发方式，其优点是运行速度快，为用户提供优秀的用户体验。
ArcGIS.Server.9.3和ArcGIS API for Flex实现Identify的功能图查属性（六）目的：1.ArcGIS API for Flex实现Identify的功能，进行图查属性的功能，这样选择图层然后进行点、线、面的查询最好查到的地理元素高亮显示同时在右边的Grid中显示查到的数据。
准备工作：1.在ArcGIS.Server.9.3发布一个叫usa的Map Service，并且把这个Service启动起来。
完成后的效果图：开始：1.启动Flex Builder3新建工程以及引入ArcGIS API for Flex library的开发包。
2.新建IdentifyTest.mxml页面，然后在页面上添加esri:Map控件设置esri:ArcGISDyna micMapServiceLayer等，这里还需要高亮显示被查询到的元素所以还需要esri:GraphicsLa yer，具体代码如下：1<mx:Canvas width="490" height="311" borderStyle="solid" borderThickness="3" borderColor="#425DE2" verticalCenter ="-20" x="11">2<esri:Map id="myMap">3<mx:Panel x="209" y="-10" width="250" height="200" layout="absolute">4</mx:Panel>5<esri:ArcGISDynamicMapServiceLayer id="myMapServiceLayer" url="http://jh-53a435fbc0e8/ArcGIS/rest/servic es/USA/MapServer" complete="mapHandler(event)"/>6<esri:GraphicsLayer id="myGraphicsLayer" symbolFunction="{mySymbolFunction}"/>7</esri:Map>8</mx:Canvas>复制代码3.上面的代码中给ArcGISDynamicMapServiceLayer添加了一个complete事件用来当地图载入完成后获取地图的图层名称显示在地图上方的mx:ComboBox上，代码如下：1//获取地图图层名称和index到ComboBox上2 private function mapHandler(event:Event):void3 {4//获取图层信息数组5var layerInfos:Array;6 layerInfos=yerInfos;7var layers:Array = new Array();8//遍历图层信息数组然后把图层的名称和index值添加到新的数组中9for(var i:int=0;i<layerInfos.length;i++)10 {11 layers.push({label:layerInfos[i].name ,data:i});12 }13//给ComboBox设定数据源14 layerList.dataProvider=layers;15 }复制代码mx:ComboBox显示代码：1<mx:ComboBox id="layerList" verticalCenter="-195" x="139"></mx:ComboBox>4.上面的GraphicsLayer也添加了一个symbolFunction的功能，这个功能是当有元素添加到GraphicsLayer时进行元素显示样式的设置，这样分别对点、线、面进行样式设定，代码如下：1private function mySymbolFunction(graphic:Graphic):Symbol2 {3var result:Symbol;4//根据元素的类型进行显示样式的设定5switch(graphic.geometry.type)6 {7case Geometry.GEOMETRY_POINT:8 {9 result=sms;10break;11 }12case Geometry.GEOMETRY_POLYLINE:13 {14 result=sls;15break;16 }17case Geometry.GEOMETRY_POLYGON:18 {19 result=sfs;20break;21 }23return result;24 }复制代码5.上面代码中的sms、sls、sfs是定义好的Symbol的id,具体定义如下：1<esri:SimpleLineSymbol id="sls" style="solid" color="0x00FF00" width="2" alpha="1"/>2<esri:SimpleMarkerSymbol id="sms" style="diamond" color="0x00FF00" size="15"/>3<esri:SimpleFillSymbol id="sfs"/>复制代码6.要画图肯定还需要esri:Draw这个控件了，上一篇有比较详细的讲了这里就不说了，代码如下：1<esri:Draw id="drawToolbar" map="{myMap}" graphicsLayer="{myGraphicsLayer}" drawEnd="drawEndHandler(event)"/> 复制代码7.接着添加mx:ToggleButtonBar了，添加3个子按钮分别是点、线、面的操作，具体代码如下：1<mx:ToggleButtonBar verticalCenter="-195" itemClick="itemClickHandler(event)" x="11" toggleOnClick="true">2<mx:dataProvider>3<mx:Array>4<mx:Object icon="{point}"/>5<mx:Object icon="{polyline}"/>6<mx:Object icon="{polygon}"/>7</mx:Array>8</mx:dataProvider>9</mx:ToggleButtonBar>复制代码8.ToggleButtonBar的itemClickHandler事件代码：1private function itemClickHandler(event:ItemClickEvent):void2 {3switch(event.index)4 {5case 0:6 {7 drawToolbar.activate(Draw.MAPPOINT);8break;9 }10case 1:11 {12 drawToolbar.activate(Draw.POLYLINE);13break;14 }15case 2:16 {17 drawToolbar.activate(Draw.POLYGON);18break;20 }21 }复制代码9.这样就实现了能在GraphicsLayer上画点、线、面的功能，接下来就是今天主要的代码就是在上面添加esri:Draw的时候给它添加了一个drawEnd="drawEndHandler(event)"，这个就是当绘图完成后执行drawEndHandler(event)这个方法了，主要功能就是在这个方法里实现Identify的功能的，要实现Identify的功能还需要添加一个esri:IdentifyTask控件，这个就是实现Identify的功能的控件，添加控件代码如下：1<esri:IdentifyTask id="identifyTask" identifyComplete="identifyCompleteHandler(event)" url="http://jh-53a435fbc0 e8/ArcGIS/rest/services/USA/MapServer"/>复制代码mx:DataGrid的显示代码：1<mx:DataGrid id="datalist" height="311" borderStyle="solid" borderThickness="3" verticalCenter="-20" borderColor ="#1B67D9" left="509">复制代码drawEndHandler(event)的代码如下：1private function drawEndHandler(event:DrawEvent):void2 {3//获取绘图结果Geometry4var geometry:Geometry=event.geometry;5var identifyParams:IdentifyParameters=new IdentifyParameters();6//查询结果需要返回Geometry7 identifyParams.returnGeometry=true;8//查询冗余范围9 identifyParams.tolerance=3;10//宽11 identifyParams.width = myMap.width;12//高13 identifyParams.height = myMap.height;14//设置查询的Geometry15 identifyParams.geometry=geometry;16//从ComboBox获取选择的图层index设置要查询的图层17var layers:Array=new Array();18 layers.push(layerList.value);19 yerIds=layers;20//查询可见图层21 yerOption=YER_OPTION_VISIBLE;2223 identifyParams.mapExtent=myMap.extent;24//进行查询25 identifyTask.execute(identifyParams);26 }2728//查询完成后执行的事件29 private function identifyCompleteHandler(event:IdentifyEvent):void30 {31var datas:Array=new Array();32//myGraphicsLayer.clear();33//遍历查询结果把查询到的feature添加到GraphicsLayer进行高亮显示34//同时把查询到的元素的名称添加到datas对象数组用来DataGrid显示用35for each (var result:IdentifyResult in event.identifyResults)36 {37 myGraphicsLayer.add(result.feature);38//datas.push(result.feature.attributes);39 datas.push({"value":result.value});40 }41//设置mx:DataGrid的数据源42 datalist.dataProvider=datas;43 }复制代码10.这样就完成了所有的代码可以运行测试效果了。
