WebGIS开发实实例教程


WEBGIS开发实实例教程 (一)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实现基本的地图 浏览 2 (二)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实现动态图层和 瓦片图层叠加显示 5 (三)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实现自己的 Toc 控件 8 (四)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实现 Toolbar 功 能 16 (五)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实 现 GraphicsLayer 上画点、线、面 20 (六)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实现 Identify 的 功能图查属性 25 (七)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实现 Query 查询 定位中心功能 30 (八)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实现 MapTips 37 (九)ArcGIS.Server.9.3 和 ArcGIS API for Flex 在 MapTips 显示 饼图数据统计 42 (十)ArcGIS.Server.9.3 和 ArcGIS API for Flex 的 GeometryService 和 buffer 分析 49 (十三)ArcGIS.Server.9.3 和 ArcGIS API for Flex 的 GeoprocessingServices 和最短路径分析 65 (一)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实现基本的地图浏览 目的: 1.ArcGIS API for Flex 实现在 Flex 程序中浏览自己的 ArcGIS.Server.9.3中发布的地图,一个 最基本的入门例子。 准备工作: 1.在 ArcGIS.Server.9.3发布一个叫 usa 的 Map Service,并且把这个 Service 启动起来。 2.安装 Flex Builder3。 3.下载 ArcGIS API for Flex library 的开发包 arcgis_flex_api_1.0-beta 然后解压缩到文件夹中, 地址:http://resources.esri.com/arcgisserver/apis/flex/index.cfm 完成后的效果图: 开始: 1.启动 Flex Builder3,点击菜单 File->New->Flex Project,然后输入项目名称 Project Name:flexMapApp 接着点击 Next 选择输出文件夹(不用修改默认就行)继续 Next 然后出现 如下界面: 2.在上面的界面中点击 Library path 然后点击 Add SWC 找到上面解压到目录中的 agslib-1.0-beta-2008-07-31.swc 文件点击 ok,在这里就把 ArcGIS API for Flex library 的开发包 引入到工程中来,就可以在工程中使用 Esri 提供的 Flex 组件了。 3.然后点击 Finish 按钮后就完成了工程的建立工作,工程建立后有会默认建立一个 flexMapApp.mxml 的文件,这个就是 Flex 的页面文件,查看一下代码: 1 2 3 4 5 4.是一个空的页面了接下来在这个页面中添加 Map 控件了,Flex 下的 Map 控件支持 ArcGISDynamicMapServiceLayer 、ArcGISImageServiceLayer、ArcGISTiledMapServiceLayer、 ArcIMSMapServiceLayer 、GraphicsLayer 等几种类型的 layer,这些类型的 layer 区别其实看 名字就能知道区别了,比如 ArcGISDynamicMapServiceLayer 就是支持 ArcGIS Server 发布的 普通的地图服务,ArcGISTiledMapServiceLayer 支持 ArcGIS.Server 发布的切片缓存地图。。。 5.在这里采用 ArcGISDynamicMapServiceLayer,因为上面在 ArcGIS Server 中发布的 USA 的 Map Service 是普通的动态生成的地图,添加 Map 控件可以输入代码。 代码输入可以在标签内输入代码,具体如下: 1 2 3 4 5 上面的代码中属性 url 就是上面发布的 USA 的 Map Service 的 rest 服务地址。 这样就可以直接运行查看地图效果了,很简单。 6.接下来可以对 Map 控件的属性做一些设置,常用属性解释如下: clickRecenterEnabled:true/false 是否开启按 shift 键点击地图定位中心的功能。 crosshairVisible:true/false 是否在地图的中心显示十字。 doubleClickZoomEnabled:true/false 是否开启双击地图放大的功能。 keyboardNavigationEnabled :true/false 是否开启键盘进行地图导航放大缩小的功能。 mapNavigationEnabled :true/false 是否开启地图导航的功能。 panArrowsVisible:true/false 是否在地图的四边以及4个角显示移动地图箭头按钮的功能。 panEnabled:true/false 是否开启拖拽地图移动的功能。 rubberBandZoomEnabled:true/false 是否开启按 shift+拉框放大地图的功能。 scaleBarVisible:true/false 是否显示放大缩小功能按钮条。 scrollWheelZoomEnabled:true/false 是否开启鼠标滚轮放大缩小的功能。 logoVisible:true/false 是否地图上显示 logo 图标。 7:本例完成后的所有代码如下: 1 2 3 4 5 6 (二)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实现动态图层和瓦片图层叠加显示 2009年09月11日 6:59 上午 | 分类:Flex 目的: 1.ArcGIS.Server.9.3和 ArcGIS API for Flex 实现动态图层和瓦片图层叠加显示,在瓦片基图上 显示动态图层。 准备工作: 1.在 ArcGIS.Server.9.3发布一个叫 USA 的 Map Service,并且把这个 Service 启动起来,这个 作为动态图层数据。 2.瓦片数据我这里没有现成的就采用 Esri 提供的 rest 世界地图数据服务,地址如下: http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer。 完成后的效果图: 开始: 1.启动 Flex Builder3,点击菜单 File->New->Flex Project,然后输入项目名称 Project Name:flexMapApp 接着点击 Next 选择输出文件夹(不用修改默认就行)继续 Next 然后出现 如下界面: 2.在上面的界面中点击 Library path 然后点击 Add SWC 找到上面解压到目录中的 agslib-1.0-beta-2008-07-31.swc 文件点击 ok,在这里就把 ArcGIS API for Flex library 的开发包 引入到工程中来,就可以在工程中使用 Esri 提供的 Flex 组件了。 3. 这 里 要 显 示 2 种地图数据一种是瓦块图、一种是动态图,这样就需要 ArcGISTiledMapServiceLayer 和 ArcGISDynamicMapServiceLayer 支持,关于这个可以看第一 篇了有讲到,在这里瓦块图是作为底图显示首先要先添加 ArcGISTiledMapServiceLayer,具 体代码如下: Code 1 2 3 4 5 6 7 8 9 4.上面的代码非常简单,首先是在页面上添加了一个 Canvas 控件用来作为地图的框, 然后是在 Canvas 控件内添加了一个 Map 控件同时设置好了 ArcGISTiledMapServiceLayer 这 样运行起来就可以浏览世界地图了。 5.接下来要在底图上显示上面在 ArcGIS.Server.9.3发布一个叫 USA 的动态数据,添加 ArcGISDynamicMapServiceLayer 并且设置,具体的代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 6. 上 面 的 代 码 中 添 加 了 ,这个 url 地址就是发布的 USA 的 rest 地址,安 装好 Ags9.3后可以有 ArcGIS Services Directory 菜单可以浏览自己发布的所有的 rest 服务。 这样就完成了2种地图类型的叠加显示可以运行查看一下效果。 7.通过浏览效果可以发现地图显示范围很大不是以 USA 为显示范围,这样可以 Map 控件的 extent 属性设置一下地图的显示视图范围,这里设置以 USA 的数据范围为地图默认显示范 围,可以在 ArcGIS Services Directory 浏览 USA 的 MapServer 查找到 USA 数据的最多视图 范围为 XMin: -127.968857954995、YMin: 25.5778580720472、XMax: -65.0742781827045、 YMax: 51.2983251993735,根据这些参数在 mx:Application 内添加一个 esri:Extent 标签如下 代码: 1 8.然后给 esri:Map 添加一个 extent=”{allUsa}”属性,这样就设置了 Map 控件的默认视图 范围为 ID 为 allUsa 的 ectent,这样就完成了这个练习。 9.其他的还可以设置 MapServiceLayer 中选择自己需要显示部分的图层,比如 USA 的地图数 据中有4个图层分别为 Cities、Highways、States、Counties,现在只想显示 States 和 Counties 图层,可以加入如下代码: Code 1 2 3 4 2 5 3 6 7 8 (三)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实现自己的 Toc 控件 目的: 1.ArcGIS API for Flex 没有提供现成的 Toc 控件,这里来实现自己的 Toc 控件。 准备工作: 1.在 ArcGIS.Server.9.3发布一个叫 USA 的 Map Service,并且把这个 Service 启动起来。 完成后的效果图: 开始: 1.启动 Flex Builder3新建工程以及引入 ArcGIS API for Flex library 的开发包,这个过程前面2 篇都讲过了这里就不啰嗦了。 2. 新建 LayersOnAndOff.mxml 页面,然后在页面上添加 Map 控 件 以 及 设 置 ArcGISDynamicMapServiceLayer,添加一个 ComboBox 控件用来地图切换显示。具体代码如 下: 1 2 3 4 5 6 7 8 9 10 11 12 3.对上面的代码做一下解释,首先添加了一个 id 为 arr 的对象数组作为 ComboBox 的数 据源,arr 的对象数组包含2个对象:一个是上面发布的 USA 得 rest 地址,一个是 Esri 提供 的在线的 rest 地址。然后在 Map 控件的 ArcGISDynamicMapServiceLayer 的 url 属性绑定 ComboBox 的选择值,这样当 ComboBox 选择发生变化时地图也会根据 rest 地址进行切换显 示。 4.接下来做 Toc 控件了,首先在 src 目录下新添加一个叫 uc 的目录,然后在 uc 下新建 TreeToc.mxml 文件这个就是用来实现 Toc 功能的。Toc 控件这里是用 Flex 提供的 Tree 控件 的基础上实现的,具体代码如下: 1 2 3 4 145 146 147 uc.TreeRenderer 148 149 150 5.对上面的代码做一下解释,首先 Toc 控件是在 Tree 控件的基础上实现的,这个 Tree 控件获取 Layers 数据作为数据源进行绑定显示,同时提供了显示图层隐藏图层等方法。最 后这个 Tree 添加了一个叫 uc.TreeRenderer 的 itemRenderer(项渲染器),也就是说 Tree 的每 一个节点都是由这个 itemRenderer 来负责显示。那也就是说还需要实现 uc.TreeRenderer 的 功能。 6.在 uc 目录下新增加 TreeRenderer.mxml 的文件,这个因为是 itemRenderer 所以需要 implements=”mx.controls.listClasses.IDropInListItemRenderer”,具体代码如下: 1 2 3 4 43 44 45 46 47 48 49 7.上面的代码中主要是在 HBox 控件中放了一个 CheckBox、一个 Image、一个 Label, 并且为 CheckBok 添加了点击事件可以控制图层的隐藏显示。 8.这样完成了 Toc 控件的开发,接下来是要在 LayersOnAndOff.mxml 页面使用这个控件,增 加如下代码(红色部分): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 9.上面代码的红色部分添加了 TreeToc,并且设置了一个 layer 的属性值是绑定 myDynamicService。这样完成了所有功能就可以运行查询效果了。 (四)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实现 Toolbar 功能 目的: 1.ArcGIS API for Flex 实现 Toolbar 功能,包括 ZoomIn、ZoomOut、Pan、PrevExtent、 NextExtent、FullExtent 功能。 准备工作: 1. 这 次 地 图 数 据 就 用 Esri 提供的 http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer。 完成后的效果图: 开始: 1.启动 Flex Builder3新建工程以及引入 ArcGIS API for Flex library 的开发包,这个过程前面 几篇都讲过了这里就不啰嗦了。 2. 新建 ToolBar.mxml 页面,然后在页面上添加 Map 控 件 以 及 设 置 ArcGISTiledMapServiceLayer,具体代码如下: 1 2 3 4 5 6 7 8 9 3.接下来要实现地图浏览控制就需要添加 esri:Navigation 控件,这个控件提供了放大、 缩小、漫游、前一视图、后一视图等功能方法,在 mx:Canvas 标签前面添加如下代码: 1 2 3 2 30 5.接下啦在 Map 控件的上方位置添加一个 mx:ToggleButtonBar 控件,这个控件就是切 换按钮组工具条,它可以添加子按钮然后各个子按钮点击时能进行显示等切换。具体代码如 下: 1 2 3 4 5 6 7 8 9 10 11 6.上面的代码中 ToggleButtonBar 控件绑定了一个 mx:Array 数据源,这个数据源包含3 条数据,icon 分别对于3张图标用来按钮图标的显示,这3张图片由上的 script 中定义, ToggleButtonBar 控件定义了 iconField 属性就是用来显示图标,同时定义了 creationComplete 事件、itemClick 事件,分别实现 ToggleButtonBar 的初始化选择以及子按钮点击功能,具体 代码如下: 1 //初始化 toolbar1选中项为 Pan 2 private function initToolbar1():void 3 { 4 toolbar1.selectedIndex = 2; 5 } 6 //ToggleButtonBar 的子按钮点击事件 7 private function itemClickHandler(event:ItemClickEvent):void 8 { 9 switch(event.index) 10 { 11 case 0://选择为 zoomin 12 { 13 //激活 navToolbar 的 ZOOM_IN 14 navToolbar.activate(Navigation.ZOOM_IN); 15 break; 16 } 17 case 1://选择为 zoomout 18 { 19 //激活 navToolbar 的 ZOOM_OUT 20 navToolbar.activate(Navigation.ZOOM_OUT); 21 break; 22 } 23 case 2://选择为 pan 24 { 25 //激活 navToolbar 的 PAN 26 //navToolbar.activate(Navigation.PAN); 27 navToolbar.deactivate(); 28 break; 29 } 30 } 31 } 7.接下在在页面上在添加3个按钮用来显示前一视图、后一视图、全图显示,具体代码 如下: 1 2 3 8.上面代码中添加了3个 button,然后设置的小图标、click 事件、enabled 属性,enabled 属性属性是针对前一视图和后一视图功能按钮了。click 事件代码如下: 1 private function navToolbarExtent(type:String):void 2 { 3 if(type==“Prev“)//前一视图 4 { 5 navToolbar.zoomToPrevExtent(); 6 } 7 else if(type==“Next“)//后一视图 8 { 9 navToolbar.zoomToNextExtent(); 10 } 11 else if(type==“Full“)// 12 { 13 navToolbar.zoomToFullExtent(); 14 } 15 } 9.这样就完成了 toolbar 的功能,可以运行测试效果。 (五)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实现 GraphicsLayer 上画点、线、面 .ArcGIS API for Flex 实现 GraphicsLayer 上画点、线、面。 准备工作: 1. 这 次 地 图 数 据 就 用 Esri 提供的 http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer。 完成后的效果图: 开始: 1.启动 Flex Builder3新建工程以及引入 ArcGIS API for Flex library 的开发包。 2. 新建 DrawTool.mxml 页面,然后在页面上添加 esri:Map 控件设置 esri:ArcGISTiledMapServiceLayer 等。 3.和上一篇一样仍旧用 mx:ToggleButtonBar 来实现功能按钮,mx:ToggleButtonBar 需要包含6 个按钮分别实现6种不一样的操作,具体代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 4.上面的代码中 icon 对应的图标定义在 mx:Script 中如下: 1 //图标图片 2 [Bindable] 3 [Embed(source="assets/point.gif")] 4 public var point:Class; 5 6 [Bindable] 7 [Embed(source="assets/point2.gif")] 8 public var point2:Class; 9 10 [Bindable] 11 [Embed(source="assets/polyline.gif")] 12 public var polyline:Class; 13 14 [Bindable] 15 [Embed(source="assets/polyline3.gif")] 16 public var polyline3:Class; 17 18 [Bindable] 19 [Embed(source="assets/polyline2.gif")] 20 public var polyline2:Class; 21 22 [Bindable] 23 [Embed(source="assets/polygon.gif")] 24 public var polygon:Class; 25 26 [Bindable] 27 [Embed(source="assets/polygon2.gif")] 28 public var polygon2:Class; 29 30 [Bindable] 31 [Embed(source="assets/polygon3.gif")] 32 public var polygon3:Class; 5.现在要实现在地图上画点、线等就需要 esri:GraphicsLayer 的功能,实际上点、线、 面都是画在 GraphicsLayer 的所以需要在 Map 控件中添加: 1 2 3 4 6.要进行绘制功能 esri 已经提供了 esri:Draw 这个控件能很方便的实现基本图形的绘制, 使用代码如下: 1 7.esri:Draw 有2个属性一个是要进行画图操作的地图控件,一个是画图的容器 GraphicsLayer。 8.接下来定义一下画出来的点、线、面的显示样式,代码如下: 1 2 3 9.上面的 sls 为线的显示样式;sms 为点的显示样式;sfs 为面的显示样式,关于样式的 定义可以查询一下帮助了有很多的样式等可以实现。 10. 最后就是编写功能代码在上面的 ToggleButtonBar 控件中已经给它添加了一个 itemClick=”itemClickHandler(event)”,这里就是编写 itemClickHandler(event)这个方法的代码: 1 import mx.events.ItemClickEvent; 2 private function itemClickHandler(event:ItemClickEvent):void 3 { 4 //设置点样式 5 drawToolbar.markerSymbol=sms; 6 //设置线样式 7 drawToolbar.lineSymbol=sls; 8 //设置面样式 9 drawToolbar.fillSymbol=sfs; 10 //更加按钮的 index 值设置不同的绘制操作 11 switch(event.index) 12 { 13 case 0: 14 { 15 drawToolbar.activate(Draw.MAPPOINT); 16 break; 17 } 18 case 1: 19 { 20 drawToolbar.activate(Draw.MULTIPOINT); 21 break; 22 } 23 case 2: 24 { 25 drawToolbar.activate(Draw.LINE); 26 break; 27 } 28 case 3: 29 { 30 drawToolbar.activate(Draw.POLYLINE); 31 break; 32 } 33 case 4: 34 { 35 drawToolbar.activate(Draw.FREEHAND_POLYLINE); 36 break; 37 } 38 case 5: 39 { 40 drawToolbar.activate(Draw.POLYGON); 41 break; 42 } 43 case 6: 44 { 45 drawToolbar.activate(Draw.FREEHAND_POLYGON); 46 break; 47 } 48 case 7: 49 { 50 drawToolbar.activate(Draw.EXTENT); 51 break; 52 } 53 } 54 } 11.很简单就完成了这些功能可以运行查看效果。 (六)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:ArcGISDynamicMapServiceLayer 等,这里还需要高亮显示被查询到的元素所以还需要 esri:GraphicsLayer,具体代码如下: 1 2 3 4 5 6 7 8 3.上面的代码中给 ArcGISDynamicMapServiceLayer 添加了一个 complete 事件用来当地 图载入完成后获取地图的图层名称显示在地图上方的 mx:ComboBox 上,代码如下: 1 //获取地图图层名称和 index 到 ComboBox 上 2 private function mapHandler(event:Event):void 3 { 4 //获取图层信息数组 5 var layerInfos:Array; 6 layerInfos=myMapServiceLayer.layerInfos; 7 var layers:Array = new Array(); 8 //遍历图层信息数组然后把图层的名称和 index 值添加到新的数组中 9 for(var i:int=0;i 4.上面的 GraphicsLayer 也添加了一个 symbolFunction 的功能,这个功能是当有元素添 加到 GraphicsLayer 时进行元素显示样式的设置,这样分别对点、线、面进行样式设定,代 码如下: 1 private function mySymbolFunction(graphic:Graphic):Symbol 2 { 3 var result:Symbol; 4 //根据元素的类型进行显示样式的设定 5 switch(graphic.geometry.type) 6 { 7 case Geometry.GEOMETRY_POINT: 8 { 9 result=sms; 10 break; 11 } 12 case Geometry.GEOMETRY_POLYLINE: 13 { 14 result=sls; 15 break; 16 } 17 case Geometry.GEOMETRY_POLYGON: 18 { 19 result=sfs; 20 break; 21 } 22 } 23 return result; 24 } 5.上面代码中的 sms、sls、sfs 是定义好的 Symbol 的 id,具体定义如下: 1 2 3 6.要画图肯定还需要 esri:Draw 这个控件了,上一篇有比较详细的讲了这里就不说了, 代码如下: 1 7.接着添加 mx:ToggleButtonBar 了,添加3个子按钮分别是点、线、面的操作,具体代 码如下: 1 2 3 4 5 6 7 8 9 8.ToggleButtonBar 的 itemClickHandler 事件代码: 1 private function itemClickHandler(event:ItemClickEvent):void 2 { 3 switch(event.index) 4 { 5 case 0: 6 { 7 drawToolbar.activate(Draw.MAPPOINT); 8 break; 9 } 10 case 1: 11 { 12 drawToolbar.activate(Draw.POLYLINE); 13 break; 14 } 15 case 2: 16 { 17 drawToolbar.activate(Draw.POLYGON); 18 break; 19 } 20 } 21 } 9.这样就实现了能在 GraphicsLayer 上画点、线、面的功能,接下来就是今天主要的代 码就是在上面添加 esri:Draw 的时候给它添加了一个 drawEnd=”drawEndHandler(event)”,这 个就是当绘图完成后执行 drawEndHandler(event)这个方法了,主要功能就是在这个方法里实 现 Identify 的功能的,要实现 Identify 的功能还需要添加一个 esri:IdentifyTask 控件,这个就 是实现 Identify 的功能的控件,添加控件代码如下: 1 mx:DataGrid 的显示代码: 1 drawEndHandler(event) 的代码如下: 的代码如下: 1 private function drawEndHandler(event:DrawEvent):void 2 { 3 //获取绘图结果 Geometry 4 var geometry:Geometry=event.geometry; 5 var identifyParams:IdentifyParameters=new IdentifyParameters(); 6 //查询结果需要返回 Geometry 7 identifyParams.returnGeometry=true; 8 //查询冗余范围 9 identifyParams.tolerance=3; 10 //宽 11 identifyParams.width = myMap.width; 12 //高 13 identifyParams.height = myMap.height; 14 //设置查询的 Geometry 15 identifyParams.geometry=geometry; 16 //从 ComboBox 获取选择的图层 index 设置要查询的图层 17 var layers:Array=new Array(); 18 layers.push(layerList.value); 19 identifyParams.layerIds=layers; 20 //查询可见图层 21 identifyParams.layerOption=IdentifyParameters.LAYER_OPTION_VISIBLE; 22 23 identifyParams.mapExtent=myMap.extent; 24 //进行查询 25 identifyTask.execute(identifyParams); 26 } 27 28 //查询完成后执行的事件 29 private function identifyCompleteHandler(event:IdentifyEvent):void 30 { 31 var datas:Array=new Array(); 32 //myGraphicsLayer.clear(); 33 //遍历查询结果把查询到的 feature 添加到 GraphicsLayer 进行高亮显 示 34 //同时把查询到的元素的名称添加到 datas 对象数组用来 DataGrid 显 示用 35 for 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.这样就完成了所有的代码可以运行测试效果了。 (七)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实现 Query 查询定位中心功能 1.ArcGIS API for Flex 实现 Query 查询定位中心功能,进行属性查图的功能,选择图层 然后输入查询语句进行查询把查到的地理元素高亮显示同时在右边的 Grid 中显示查到的数 据,然后点击 Grid 中的数据进行对该条数据进行定位中心的显示。 准备工作: 1.在 ArcGIS.Server.9.3发布一个叫 usa 的 Map Service,并且把这个 Service 启动起来。 2. 采用 Esri 在线数据 http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer 完成后的效果图: 开始: 1.启动 Flex Builder3新建工程以及引入 ArcGIS API for Flex library 的开发包。 2. 新建 QueryTest.mxml 页面,这里显示的地图采用 Esri 提 供 的 在 线 的 NPS_Physical_World_2D 的地图比较的漂亮,但是 Tiled 图没有图层以及字段等数据没有办 法进行查询定位,所以在 Tiled 图的基础上在叠加一个 DynamicMap 图层就是上面发布的 usa 的数据,我们对 usa 的数据进行查询然后结果显示在 NPS_Physical_World_2D 的地图上面。 由 于 是 2 个 Layer 的 叠 加 就 需 要 esri:ArcGISTiledMapServiceLayer 和 ArcGISDynamicMapServiceLayer,具体的显示代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 3. 上 面 的 代 码 中 为 Map 控 件 设 置 了 以 为 USA 范围的 Extent ,为 ArcGISDynamicMapServiceLayer 设 置 了 creationComplete 事 件 就 是 用 来 执 行 loadMapLayer(event)把地图图层名称以及 index 添加到 ComboBox 来选择用。 loadMapLayer(event)方法代码如下: 1 //获取地图图层名称和 index 到 ComboBox 上 2 private function loadMapLayer(event:Event):void 3 { 4 //获取图层信息数组 5 var layerInfos:Array; 6 layerInfos=myMapServiceLayer.layerInfos; 7 var layers:Array = new Array(); 8 //遍历图层信息数组然后把图层的名称和 index 值添加到新的数组中 9 for(var i:int=0;i 4. 上面还为 ArcGISDynamicMapServiceLayer 设置了可 视 图 层 ,这样设 置的为空就是不想用来显示只是用来数据查询用。 5. 还添加了 GraphicsLayer 对象用来进行高亮显示用,并且为它设置了 symbolFunction=”{mySymbolFunction}”这样是在 mySymbolFunction 方法中对点、线、面的 显示样式进行设置,代码如啊: 1 private function mySymbolFunction(graphic:Graphic):Symbol 2 { 3 var result:Symbol; 4 //根据元素的类型进行显示样式的设定 5 switch(graphic.geometry.type) 6 { 7 case Geometry.GEOMETRY_POINT: 8 { 9 result=sms; 10 break; 11 } 12 case Geometry.GEOMETRY_POLYLINE: 13 { 14 result=sls; 15 break; 16 } 17 case Geometry.GEOMETRY_POLYGON: 18 { 19 result=sfs; 20 break; 21 } 22 } 23 return result; 24 } 对上面的 sms、sls、sfs 等定义: 1 2 3 6.接下来在页面上添加一个 TextInput、Button、mx:DataGrid 分别为查询语句输入框、 查询按钮、查询结果显示表,具体显示代码如下: 1 2 3 4 5 6 7 7.上面的代码中为TextInput添加了enter事件用来实现回车后进行调用doQuery()方法进 行查询,为 Button 添加了 click 事件点击后调用 doQuery()方法进行查询。 8.要进行 Query 还需要 esri:QueryTask 控件,在页面上添加如下显示代码: 1 2 3 9.doQuery()方法代码如下,具体说明看注解: 1 private function doQuery():void 2 { 3 //清除原来的高亮显示 4 myGraphicsLayer.clear(); 5 //设置 queryTask 的 url,就是设置要查询的图层 6 queryTask.url=“http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer/“+layerList.value; 7 //queryTask.query.text=qText.text; 8 //queryTask.query.where=”STATE_NAME like ‟%”+qText.text+”%‟”; 9 //设置查询语句 10 queryTask.query.where=qText.text; 11 //查询结果是否返回 Geometry 12 queryTask.query.returnGeometry=true; 13 queryTask.query.spatialRelationship=“esriSpatialRelEnvelopeIntersects“; 14 //设置要查询的字段 15 var fields:Array=new Array(); 16 fields.push(“OBJECTID“); 17 fields.push(“STATE_NAME“); 18 fields.push(“POP2000“); 19 queryTask.query.outFields=fields; 20 //进行查询成功调用 onResult 方法,错误失败调用 onFault 21 queryTask.execute(query,new AsyncResponder(onResult,onFault)); 22 } 23 24 //查询成功活进行高亮显示已经数据 Grid 显示 25 private function onResult(featureSet:FeatureSet,token:Object = null):void 26 { 27 var resultlist:Array=new Array(); 28 for each(var griphic:Graphic in featureSet.features) 29 { 30 myGraphicsLayer.add(griphic); 31 resultlist.push( {“ID“:griphic.attributes.OBJECTID,“STATE_NAME“:griphic.attributes.STATE_NAME}) 32 } 33 //Grid 设置数据源进行查询结果显示 34 resultTable.dataProvider=resultlist; 35 } 36 37 //查询失败提示 38 private function onFault(info:Object, token:Object = null ):void 39 { 40 //Alert.show(info.toString()); 41 Alert.show(“输入的查询语句不正确!“); 42 } 10.更加查询语句查询到结果显示到Grid 中后还需要实现一个点击Grid 的行进行地图定 位的功能,上面添加 Grid 的时候已经为它添加了 change 事件就是点击某一行后调用 clickHandler(event)方法进行定位功能,代码说明如下: 1 //Grid 点击事件进行对点击对象进行定位居中显示 2 public function clickHandler(event:ListEvent):void 3 { 4 //获取点击行的 id 5 var idstr:String=event.itemRenderer.data.ID; 6 //设置查询的图层 7 queryTask.url=“http://jh-53a435fbc0e8/ArcGIS/rest/services/USA/MapServer/“+layerList.value; 8 //是否返回 Geometry 9 queryTask.query.returnGeometry=true; 10 queryTask.query.spatialRelationship=“esriSpatialRelEnvelopeIntersects“; 11 //查询语句 12 queryTask.query.where=“OBJECTID=“+idstr; 13 //执行查询 14 queryTask.execute(query,new AsyncResponder(onResult2,onFault2)); 15 } 16 17 private function onResult2(featureSet:FeatureSet,token:Object = null):void 18 { 19 var resultlist:Array=new Array(); 20 for each(var griphic:Graphic in featureSet.features) 21 { 22 myGraphicsLayer.add(griphic); 23 var geo:Geometry= griphic.geometry; 24 var ex:Extent=new Extent(); 25 switch(geo.type) 26 { 27 //点对象 28 case Geometry.GEOMETRY_POINT: 29 { 30 //转成 MapPoint 31 var pnt :MapPoint = geo as MapPoint ; 32 //定位中心 33 myMap.centerAt(pnt); 34 break; 35 } 36 //线对象 37 case Geometry.GEOMETRY_POLYLINE: 38 { 39 //转成 Polyline 40 var pline:Polyline=geo as Polyline; 41 //设置地图视图范围 42 ex=pline.extent; 43 myMap.extent=ex; 44 break; 45 } 46 //面对象 47 case Geometry.GEOMETRY_POLYGON: 48 { 49 //转成 Polygon 50 var pgon:Polygon=geo as Polygon; 51 //设置地图视图范围 52 ex=pgon.extent; 53 myMap.extent=ex; 54 break; 55 } 56 } 57 58 break; 59 } 60 61 } 62 63 private function onFault2(info:Object, token:Object = null ):void 64 { 65 Alert.show(“出差啦!“); 66 } 11.这样就完成了所有功能的编写可以运行测试效果。 (八)ArcGIS.Server.9.3 和 ArcGIS API for Flex 实现 MapTips 1.ArcGIS API for Flex 实现 MapTips 功能,在 USA 的地图上添加城市点,鼠标移上去 的时候显示 MapTips 可以查看城市的详细信息。 准备工作: 1.在 ArcGIS.Server.9.3发布一个叫 usa 的 Map Service,并且把这个 Service 启动起来。 2. 采用 Esri 在线数据 http://server.arcgisonline.com/ArcGIS/rest/services/NPS_Physical_World_2D/MapServer 3.去 Esri 下载新的 ArcGIS API for Flex library 开发包,昨天发布了1.0正式版,以后的文章都 是基于正式版写。 完成后的效果图: 开始: 1.启动 Flex Builder3新建工程以及引入1.0正式版的 ArcGIS API for Flex library 的开发包。 2.新建 showInfoWindow.mxml 页面, 整个功能主要分2部分,第一部分功能实现从我们上面 发 的 动 态 地 图 USA 的 数 据 中 读 取 Cities 图层的城市点数据显示到 ArcGISTiledMapServiceLayer 的 NPS_Physical_World_2D 的地图上面。第二部分功能实现当 鼠标移动到哪些数据点上时显示城市详细信息,鼠标移开时隐藏信息显示。 3. 首 先 添 加 Map 控 件 以 及 用 来 显 示 的 NPS_Physical_World_2D 的 ArcGISTiledMapServiceLayer,用来显示 Cities 图层的城市点数据的 GraphicsLayer,具体代 码如下: 1 2 3 4 5 6 7 4.上面的代码中添加了 id 为 usaExtent 的 Extent 用来设置当前地图的显示范围为 USA。 5.在添加一个点样式的定义用来设置地图上城市点的显示样式: 1 2 3 6.接下来需要在地图初始化的时候读取 Cities 图层的城市点数据显示到 GraphicsLayer 的功能。在 mx:Application 内添加 mx:initialize 标签实现: 1 2 37 7.通过上面的代码实现了把城市点数据读取到地图上显示的功能并且为城市点数据添 加了鼠标移动上去的事件监听和鼠标移开的事件监听的2个事件方法,显示城市相信信息和 隐藏信息显示就在这个2个方法中实现的,显示信息用 Map 控件的 infoWindow 功能实现, 这里要对 infoWindow 做一些我们自己的设置,首先添加 cityInfo.mxml 文件用来作为 infoWindow 的 content 内容用,实现非常的简单了不作具体解释了,代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 8.回到 showInfoWindow.mxml 页面添加 mx:Script 标签,然后在标签中首先添加对 infowindow 进行设置的代码: 1 //实例化 cityInfo.mxml 2 private const m_content:cityInfo=new cityInfo(); 3 //覆写 createChildren 方法,对 infoWindow 进行设置 4 override protected function createChildren():void 5 { 6 super.createChildren(); 7 //不显示标题头 8 myMap.infoWindow.labelVisible = false; 9 //设置显示内容 10 myMap.infoWindow.content = m_content; 11 //不显示关闭按钮 12 myMap.infoWindow.closeButtonVisible = false; 13 } 9.最后就是编写鼠标移动上去的事件监听和鼠标移开的事件监听的2个事件方法: 1 //鼠标移上去事件显示 infoWindow 2 private function maouseOverHandler(event:MouseEvent):void 3 { 4 //获取当前鼠标移动上去的点对象 5 var graphic:Graphic=Graphic(event.target); 6 //转换成 MapPoint 7 var mapPoint:MapPoint=MapPoint(graphic.geometry); 8 //设置 cityInfo.mxml 的 AREANAME 9 m_content.AREANAME = graphic.attributes.AREANAME; 10 //设置 cityInfo.mxml 的 CLASS 11 m_content.CLASS = graphic.attributes.CLASS; 12 //设置 cityInfo.mxml 的 CAPITAL 13 m_content.CAPITAL = graphic.attributes.CAPITAL; 14 //设置 cityInfo.mxml 的 ST 15 m_content.ST = graphic.attributes.ST; 16 //设置 cityInfo.mxml 的 POP2000 17 m_content.POP2000 = graphic.attributes.POP2000; 18 //显示 infoWindow 19 myMap.infoWindow.show(mapPoint); 20 } 21 22 //鼠标移开事件隐藏 infoWindow 23 private function maouseOutHandler(event:MouseEvent):void 24 { 25 myMap.infoWindow.hide(); 26 } 10.完成所有的功能运行测试效果。 (九)ArcGIS.Server.9.3 和 ArcGIS API for Flex 在 MapTips 显示饼图数据统计 1.ArcGIS API for Flex 实现在 MapTips 中显示饼图进行数据统计展示,在本例子中可以 点击城市的 MapTip 后显示详细人口年龄段的统计饼图的功能。 准备工作: 1.在 ArcGIS.Server.9.3发布一个叫 California 的 Map Service,并且把这个 Service 启动起来, 这次需要一些数据用来进行图表显示了,California 的数据比较齐全了所以本例采用这个数 据。 2. 底图的话采用 Esri 在线数据 http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer 完成后的效果图: 开始: 1.启动 Flex Builder3新建工程以及引入1.0正式版的 ArcGIS API for Flex library 的开发包。 2. 新建 chartInfowindow.mxml 页面,添加 Map 、 ArcGISTiledMapServiceLayer 、 ArcGISDynamicMapServiceLayer、GraphicsLayer 等。具体代码如下: 1 2 3 4 5 6 7 8 1 9 10 11 12 13 14 3.上面的代码以 ESRI_StreetMap_World_2D 的 ArcGISTiledMapServiceLayer 为底图。在 底图上只显示 California 的 Cities 的点图层,具体看 ArcGISDynamicMapServiceLayer 部分的 设置。添加了一个 GraphicsLayer 用来显示 MapTip 了,同时设置了以 California 的范围为当 前底图的 Extent。 4.接下来需要用 esri:InfoSymbol 来实现 mapTip,代码如下: 1 2 3 4 5 6 .InfoCloseButton 7 { 8 disabledSkin: Embed(source=”assets/skins.swf”,symbol=”Callout_closeButtonDisabledSkin”); 9 downSkin: Embed(source=”assets/skins.swf”,symbol=”Callout_closeButtonDownSkin”); 10 overSkin: Embed(source=”assets/skins.swf”,symbol=”Callout_closeButtonOverSkin”); 11 upSkin: Embed(source=”assets/skins.swf”,symbol=”Callout_closeButtonUpSkin”); 12 } 13 .InfoExpandButton 14 { 15 disabledSkin: Embed(source=”assets/skins.swf”,symbol=”Callout_expandButtonDisabledSkin”); 16 downSkin: Embed(source=”assets/skins.swf”,symbol=”Callout_expandButtonDownSkin”); 17 overSkin: Embed(source=”assets/skins.swf”,symbol=”Callout_expandButtonOverSkin”); 18 upSkin: Embed(source=”assets/skins.swf”,symbol=”Callout_expandButtonUpSkin”); 19 } 20 21 22 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 5.上面的代码有点多了但是并不复杂了,整个代码就是定义一个 id 为 ifs 的 esri:InfoSymbol,主要部分为 TitleState 和 DetailState 的2种视图状态的设置和鼠标移上去的 rollOverHandler 方法、鼠标移开的 rollOutHandler 方法、鼠标点击的 clickHandler 方法定义。 6.完成上面的工作后,接下来要做的就是在地图上显示 MapTip 了,这里就去部分的 California 的 Cities 的点图层数据了,在 2 600"; 7 //返回 Geometry 8 query.returnGeometry = true; 9 //设置返回字段 10 query.outFields = ["AREANAME","AGE_UNDER5","AGE_5_17","AGE_18_21","AGE_22_29","AGE_30_39"," AGE_40_49","AGE_50_64","AGE_65_UP"]; 11 //进行查询 12 queryTask.execute(query, new AsyncResponder( onResult, onFault )); 13 //查询成功后执行方法 14 function onResult( featureSet : FeatureSet, token : Object = null ) : void 15 { 16 for each ( var myGraphic : Graphic in featureSet.features ) 17 { 18 //设置显示的 symbol 19 myGraphic.symbol = ifs; 20 //添加到 GraphicsLayer 中进行显示 21 myGraphicsLayer.add( myGraphic ); 22 //属性数组 23 var object : ArrayCollection = new ArrayCollection 24 ([ 25 {AREANAME : myGraphic.attributes.AREANAME,AGE : " 年龄低于5岁" , VALUE : myGraphic.attributes.AGE_UNDER5}, 26 {AREANAME : myGraphic.attributes.AREANAME,AGE : " 年龄5-17岁", VALUE : myGraphic.attributes.AGE_5_17}, 27 {AREANAME : myGraphic.attributes.AREANAME,AGE : " 年龄18-21岁",VALUE : myGraphic.attributes.AGE_18_21}, 28 {AREANAME : myGraphic.attributes.AREANAME,AGE : " 年龄22-29岁",VALUE : myGraphic.attributes.AGE_22_29}, 29 {AREANAME : myGraphic.attributes.AREANAME,AGE : " 年龄30-39岁",VALUE : myGraphic.attributes.AGE_30_39}, 30 {AREANAME : myGraphic.attributes.AREANAME,AGE : " 年龄40-49岁",VALUE : myGraphic.attributes.AGE_40_49}, 31 {AREANAME : myGraphic.attributes.AREANAME,AGE : " 年龄50-64岁",VALUE : myGraphic.attributes.AGE_50_64}, 32 {AREANAME : myGraphic.attributes.AREANAME,AGE : " 年龄65岁以上",VALUE : myGraphic.attributes.AGE_65_UP} 33 ]); 34 //设置属性 35 myGraphic.attributes = object; 36 } 37 } 38 //查询失败后执行方法 39 function onFault( info : Object, token : Object = null ) : void 40 { 41 Alert.show(info.toString()); 42 } 43 ]]> 44 7.这样就完成的功能的开发,这个例子的代码相对简单了主要的是 esri:InfoSymbol 的定 义以及 mx:PieChart 控件的使用。 7.这样就完成的功能的开发,这个例子的代码相对简单了主要的是 esri:InfoSymbol 的定义以 及 mx:PieChart 控件的使用。 (十)ArcGIS.Server.9.3 和 ArcGIS API for Flex 的 GeometryService 和 buffer 分析 2009年09月11日 7:27 上午 | 分类:Flex 目的: 1.ArcGIS API for Flex 用 GeometryService 实现点、线、面的 buffer 分析。 准备工作: 1.在 ArcGIS.Server.9.3发布一个叫 USA 的 Map Service。 2.在 ArcGIS.Server.9.3发布一个叫 Geometry 的 Geometry Service,默认设置就可以了。 完成后的效果图: 开始: 0.首先介绍一下 Geometry Service,Geometry Service 是给程序提供几何计算如 buffering, simplifying, calculating areas 、lengths, projecting 等功能,Geometry Service 可以用来代替 ArcObjects 或 geoprocessing service 等做的这些几何计算,它是 ArcGIS Server 9.3提供的新 功能,本篇就是用它来实现 buffer 的分析。 1.启动 Flex Builder3新建工程以及引入1.0正式版的 ArcGIS API for Flex library 的开发包。 2.新建 bufferTest.mxml 页面,添加 Map、ArcGISDynamicMapServiceLayer、GraphicsLayer 等。具体代码如下: 1 2 3 4 5 6 3. 然后在 Map 控件的右边在添加一个 Grid 用来显示 buffer 分析后的数据,代码如下: 1 2 4.这里既然是用 Geometry Service 实现 buffer 的当然还需要添加 esri:GeometryService 控 件,它的 url 属性就是上面发布的叫 Geometry 的 Geometry Service 的地址,代码如下: 1 5.这里采用在地图上画点、线、面然后根据画的几何图进行 buffer,所以还需要 ToggleButtonBar 按钮组控件、Draw 控件以及图形显示样式的定义,具体代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 6.point、polyline、polygon 的 icon 定义如下: 1 2 17 7.进行 buffer 后得到的图形然后用来查询相关结果了所以还需要添加 IdentifyTask 控件, 代码如下: 1 8.接下来开始编写功能代码,过程首先是用 Draw 工具在 GraphicsLayer 上画几何图形, 然后用GeometryService对几何图形进行buffer,然后用分析得到的结果图形进行IdentifyTask 出结果显示在 DataGrid 中。 9.按照上面的过程首先添加 ToggleButtonBar 的 itemClick 事件方法 itemClickHandler(event), 代码如下: 1 private function itemClickHandler(event:ItemClickEvent):void 2 { 3 switch(event.index) 4 { 5 case 0: 6 { 7 drawToolbar.activate(Draw.MAPPOINT); 8 break; 9 } 10 case 1: 11 { 12 drawToolbar.activate(Draw.POLYLINE); 13 break; 14 } 15 case 2: 16 { 17 drawToolbar.activate(Draw.POLYGON); 18 break; 19 } 20 } 21 } 10.接着是 Draw 控件的 drawEnd 时间方法 drawEndHandler(event),代码如下: 1 private function drawEndHandler(event:DrawEvent):void 2 { 3 var myGraphic:Graphic=event.graphic; 4 //设置 buffer 参数 5 var bufferParameters : BufferParameters = new BufferParameters(); 6 bufferParameters.features=[myGraphic]; 7 //buffer 距离半径 8 bufferParameters.distances = [100000]; 9 //buffer 单位 10 bufferParameters.unit = BufferParameters.UNIT_METER; 11 //buffer 空间参照系,102113为 WKID 是 REST API 定义好的空间参照 系的 id 12 bufferParameters.bufferSpatialReference = new SpatialReference(102113); 13 //添加 BUFFER_COMPLETE 监听 14 myGeometryService.addEventListener(GeometryServiceEvent.BUFFER_COMPLETE, bufferCompleteHandler); 15 //进行 buffer 分析 16 myGeometryService.buffer( bufferParameters ); 17 } 11.上面的代码中用 GeometryService 进行 buffer 已经有详细注释了,执行 buffer 方法后会 执行 bufferCompleteHandler 方法,代码如下: 1 //buffer 完成后调用方法 2 private function bufferCompleteHandler( event : GeometryServiceEvent ) : void 3 { 4 myGraphicsLayer.clear(); 5 //移除 BUFFER_COMPLETE 监听 6 myGeometryService.removeEventListener(GeometryServiceEvent.BUFFER_COMPLETE,buffer CompleteHandler); 7 //获取 buffer 结果 Graphic 8 for each (var graphic : Graphic in event.graphics ) 9 { 10 //设置显示样式 11 graphic.symbol = sfs; 12 //添加到 GraphicsLayer 进行显示 13 myGraphicsLayer.add( graphic ); 14 15 var identifyParams:IdentifyParameters=new IdentifyParameters(); 16 //查询结果需要返回 Geometry 17 identifyParams.returnGeometry=true; 18 //查询冗余范围 19 identifyParams.tolerance=1; 20 //宽 21 identifyParams.width = myMap.width; 22 //高 23 identifyParams.height = myMap.height; 24 //设置查询的 Geometry 25 identifyParams.geometry=graphic.geometry; 26 //从 ComboBox 获取选择的图层 index 设置要查询的图层 27 //查询图层 id 为2的图层,就是 States 层 28 identifyParams.layerIds=[2]; 29 //查询可见图层 30 //identifyParams.layerOption=IdentifyParameters.LAYER_OPTION_VISIBLE; 31 identifyParams.mapExtent=myMap.extent; 32 //进行查询 33 identifyTask.execute(identifyParams); 34 } 35 } 12.上面的代码中在最后执行了 IdentifyTask 的 execute 方法进行 Identify 查询,查询结束 后会调用 identifyCompleteHandler 方法把结果显示在 DataGrid 中,代码如下: 1 //查询完成后执行的事件 2 private function identifyCompleteHandler(event:IdentifyEvent):void 3 { 4 myNav.activate(Navigation.PAN); 5 var datas:Array=new Array(); 6 //myGraphicsLayer.clear(); 7 //遍历查询结果把查询到的 feature 添加到 GraphicsLayer 进行高亮显 示 8 //同时把查询到的元素的名称添加到 datas 对象数组用来 DataGrid 显 示用 9 for each (var result:IdentifyResult in event.identifyResults) 10 { 11 myGraphicsLayer.add(result.feature); 12 //datas.push(result.feature.attributes); 13 datas.push( {“value“:result.value}); 14 } 15 //设置 mx:DataGrid 的数据源 16 datalist.dataProvider=datas; 17 } 13.这样就完成了 buffer 的功能,运行测试效果。 (十一)ArcGIS.Server.9.3和ArcGIS API for Flex 的 GeometryService 和量算距离面 积 1.ArcGIS API for Flex 用 GeometryService 实现量算距离和面积,本例子主要包含 GeometryService 的 project、simplify、lengths、areasAndLengths 等实现。 准备工作: 1.在 ArcGIS.Server.9.3发布一个叫 USA 的 Map Service。 2.在 ArcGIS.Server.9.3发布一个叫 Geometry 的 Geometry Service,默认设置就可以了。 完成后的效果图: 开始: 0.关于 Geometry Service 的介绍前面一篇已经有说明了这里就不在做作说明了,本例子由于 地图数据是采用 Geographic Coordinate Systems (地理坐标系)所以在距离和面积的量算之 间需要进行地图投影也就是 project 操作,对于面积的量算还需要先进行 simplify 操作。 1.启动 Flex Builder3新建工程以及引入1.0正式版的 ArcGIS API for Flex library 的开发包。 2.新建 measureTest.mxml 页面,添加 Map、ArcGISDynamicMapServiceLayer、GraphicsLayer、 Label 等并且设置相应的属性。具体代码如下: 1 2 3 4 5 6 7 8 9 10 3.这样当然还需要 Draw、ToggleButtonBar 等,相应代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 4.最后还需要添加 GeometryService,代码如下: 1 2 5.这样界面以及控件都已经设置完毕了,开始编写代码首先是 GraphicsLayer 控件的 symbolFunction,就设置 GraphicsLayer 控件中绘图的显示样式,这个前面几个例子已经用到 过多次了就不做详细说明了,代码如下: 1 private function mySymbolFunction(graphic:Graphic):Symbol 2 { 3 var result:Symbol; 4 //根据元素的类型进行显示样式的设定 5 switch(graphic.geometry.type) 6 { 7 case Geometry.MAPPOINT: 8 { 9 result=sms; 10 break; 11 } 12 case Geometry.POLYLINE: 13 { 14 result=sls; 15 break; 16 } 17 case Geometry.POLYGON: 18 { 19 result=sfs; 20 break; 21 } 22 } 23 return result; 24 } 6.接下来按照事件的执行顺序来说明代码,首先是执行ToggleButtonBar控件的itemClick 的事件方法 itemClickHandler(event): 1 //ToggleButtonBar 的按钮点击事件用设置 drawToolbar 操作类型 2 private function itemClickHandler(event:ItemClickEvent):void 3 { 4 switch(event.index) 5 { 6 case 0://画线 7 { 8 drawToolbar.activate(Draw.POLYLINE); 9 break; 10 } 11 case 1://画面 12 { 13 drawToolbar.activate(Draw.POLYGON); 14 break; 15 } 16 } 17 } 7.接着是 Draw 控件的 drawEnd 事件方法 drawEndHandler(event): 1 //画图操作完成后执行的事件 2 private function drawEndHandler(event:DrawEvent):void 3 { 4 //为 GeometryService 添加 PROJECT_COMPLETE 完成后监听事件 5 geometryService.addEventListener(GeometryServiceEvent.PROJECT_COMPLETE,projectComp leteHandler); 6 //进行 project 操作 7 geometryService.project([event.graphic], new SpatialReference(32618)); 8 9 } 8.上面的代码中是进行 GeometryService 的 project 操作,为 GeometryService 控件添加了 PROJECT_COMPLETE 的完成后监听事件,所接着是 projectCompleteHandler 方法: 1 private function projectCompleteHandler(event:GeometryServiceEvent):void 2 { 3 //去除 GeometryService 的 PROJECT_COMPLETE 完成后监听事件 4 geometryService.removeEventListener(GeometryServiceEvent.PROJECT_COMPLETE,projectC ompleteHandler); 5 if(event.graphics[0].geometry.type==“esriGeometryPolygon“) 6 { 7 //如果是面就为 GeometryService 添加 SIMPLIFY_COMPLETE 完 成后监听事件 8 geometryService.addEventListener(GeometryServiceEvent.SIMPLIFY_COMPLETE,simplifyCo mpleteHandler); 9 //进行 simplify 操作 10 geometryService.simplify(event.graphics); 11 } 12 else if(event.graphics[0].geometry.type==“esriGeometryPolyline“) 13 { 14 //如果是线就为 GeometryService 添加 LENGTHS_COMPLETE 完 成后监听事件 15 geometryService.addEventListener(GeometryServiceEvent.LENGTHS_COMPLETE,lengthsCom pleteHandler); 16 //进行 lengths 操作 17 geometryService.lengths(event.graphics); 18 } 19 } 9.在上面的代码中判定是线还是面然后在分别执行不同的方法和添加监听事件,这里首 先说面的情况下是进行 simplify 操作并且添加了 SIMPLIFY_COMPLETE 完成监听事件方法 simplifyCompleteHandler: 1 //simplify 完成后执行的事件调用 areasAndLengths 方法 2 private function simplifyCompleteHandler(event : GeometryServiceEvent):void 3 { 4 geometryService.removeEventListener(GeometryServiceEvent.SIMPLIFY_COMPLETE,simplify CompleteHandler); 5 geometryService.addEventListener(GeometryServiceEvent.AREA_LENGTHS_COMPLETE,area slengthsCompleteHandler); 6 var geometry:Geometry=event.graphics[0].geometry; 7 var newGraphic:Graphic=new Graphic(geometry); 8 geometryService.areasAndLengths([new Graphic(geometry)]); 9 } 10.上面的代码中是进行面的 simplify 操作并且完成后执行 areasAndLengths 并且添加完 成后的监听事件 areaslengthsCompleteHandler: 1 //areasAndLengths 完成后执行的事件显示把面积显示在 Label 上 2 private function areaslengthsCompleteHandler(event : GeometryServiceEvent ) : void 3 { 4 geometryService.removeEventListener(GeometryServiceEvent.AREA_LENGTHS_COMPLETE, areaslengthsCompleteHandler); 5 minfo.text=“面积:“+event.arealengths.areas/1000000+”km2″; 6 } 11.回到第9步,当为线的情况就不做 simplify 操作直接进行 lengths 操作并且添加完成后 的监听方法 lengthsCompleteHandler: 1 //lengths 完成后执行的事件显示把线距离显示在 Label 上 2 private function lengthsCompleteHandler(event : GeometryServiceEvent):void 3 { 4 geometryService.removeEventListener(GeometryServiceEvent.LENGTHS_COMPLETE,lengths CompleteHandler); 5 minfo.text=“距离:“+event.lengths[0]/1000+”km”; 6 } 12.这样就完成了距离和面积的量算功能,这样要特别地图数据等情况进行 project、simplify 操作否则会得到不正确的结果。 (十二)ArcGIS.Server.9.3和 ArcGIS API for Flex 的 GeoprocessingServices 和服务区 分析 .ArcGIS API for Flex 用 GeoprocessingServices 实现网络分析中的服务区分析,本 例子根据 driveTimes 值分析出在指定时间内的区域范围情况,效果图中有内到外分别是1 分钟、2分钟、3分钟的行车区域范围情况。 准备工作: 1. 本 来 例 子 采 用 的 数 据 是 SanFrancisco 数据(ArcTutor\GP Service Examples\DriveTimePolygons),在 ArcGIS.Server.9.3发布一个叫 SanFranciscoBasemap 的 Map Service(SanFranciscoBasemap.mxd)。 2.在 ArcGIS.Server.9.3发布一个叫 DriveTimePolygonsService 的 Geoprocessing Service,关于 Geoprocessing 模 型 的 制 作 以 及 Geoprocessing Service 的发布设置请参考 http://webhelp.esri.com/arcgisserver/9.3/java/index.htm#geoprocessing/guide_-1963186772.htm 页面中的 Example 了,讲述的很详细了。 完成后的效果图: 开始: 1.首先对 Geoprocessing Service 进行 一下介 绍,从 ags9.2开始 可以将 ArcTool 做为 GeoProcessing service 发布,在 ArcGIS Server 中使用,这样就能借助 ArcTool 为 ags 提供非 常强大简单好用的功能,如 buffer 分析、网络分析、数据裁剪….等等。Geoprocessing Service 发布后可以提供给不同的客户端使用如 Web Mapping Applications, ArcGIS Explorer, and ArcGIS Desktop,在 ags9.3中 GeoProcessing service 也同时通过 rest api 的方式提供给客户端 进行编程使用,在 flex api、javascript api 中由于不能直接像 Web Mapping Applications 一样 直接通过调用 Ao 的方法实现复杂的功能,这样 GeoProcessing service 就显得非常的有用了, 它为 flex api、javascript api 提供了实现复杂功能的途径如 buffer 分析、网络分析等,当然 buffer 分析可以还可以用 GeometryService 实现了前几篇中有详细的讲解了。 2.介绍完启动GeoProcessing service 的概念接下来用GeoProcessing service 实现网络分析中的 服务区分析为实例来讲解 GeoProcessing service 在 flex api 中的应用。 3.启动 Flex Builder3新建工程以及引入1.0正式版的 ArcGIS API for Flex library 的开发包。 4.新建 ServiceAreaGP.mxml 页面,添加 Map、ArcGISDynamicMapServiceLayer、GraphicsLayer 等并且设置相应的属性。具体代码如下: 5.接下来添加 ToggleButtonBar 用来进行地图漫游和点点击服务器分析功能之间的切换: 6.添加图形显示样式定义,包括点样式以及3种颜色不同的面样式: 7.当然还需添加 esri:Draw 控件了,进行服务区分析时先在地图上画一个点用的: 8.最后当然是本例子的主角 esri:Geoprocessor 控件了,它的 url 值填写我们上面发布的 DriveTimePolygonsService 的 Geoprocessing Service 的 rest 地址: 9.在完成界面的显示代码后开始在 mx:Script 中编写功能代码,首先是 GraphicsLayer 的 symbolFunction=”mySymbolFunction”,这个是对添加到 GraphicsLayer 的元素进行样式设置 的方法: private function mySymbolFunction(graphic:Graphic):Symbol { var result:Symbol; switch(graphic.geometry.type) { case Geometry.MAPPOINT: { result=sms; break; } case Geometry.POLYGON: { var toBreak:Number= graphic.attributes.ToBreak; if(toBreak==1) { result=rFill; } else if(toBreak==2) { result=gFill; } else { result=bFill; } } } return result; } 10.接下来按照事件执行顺序说明代码,ToggleButtonBar 控件的 itemClick 事件的 itemClickHandler(event)方法: private function itemClickHandler(event:ItemClickEvent):void { switch(event.index) { case 0: { drawToolbar.deactivate(); break; } case 1: { drawToolbar.activate(Draw.MAPPOINT); break; } } } 11.然后是 Draw 控件的 drawStart 事件的 drawStartHandler(event)方法: private function drawStartHandler(event:DrawEvent):void { myGraphicsLayer.clear(); } 12.然后是 Draw 控件的 drawEnd 事件的 drawEndHandler(event)方法: private function drawEndHandler(event:DrawEvent):void { var mapPoint:MapPoint=event.graphic.geometry as MapPoint; //调用服务区分析的方法 serviceArea(mapPoint); } 13.然后是 serviceArea 方法: //进行服务区分析 private function serviceArea(mapPoint:MapPoint ):void { var graphic:Graphic=new Graphic(mapPoint); var featureSet:FeatureSet = new FeatureSet([graphic]); var driveTimes:String = “1 2 3“; //关于 params 要根据具体的 GPServer 所需要的参数进行设置 var params:Object = { “InputFacilities“:featureSet, “Drive_Time_Values“:driveTimes }; //执行服务区分析 gp.execute(params, new AsyncResponder(onResult,onFault)); } 14.在上面的 serviceArea 方法执行后最终根据成功与否分别调用 onResult 和 onFault 方 法: //Geoprocessor 成功把结果添加到 myGraphicsLayer 进行显示 private function onResult(gpResult:ExecuteResult,token:Object = null):void { var pv : ParameterValue = gpResult.parameterValues[0]; var fs : FeatureSet = pv.value as FeatureSet; myGraphicsLayer.graphicProvider = fs.features; } //Geoprocessor 失败显示失败信息 private function onFault(info:Object, token:Object = null):void { Alert.show(info.toString()); } 15.这样通过 Geoprocessing Service 相当简单的完成了一个服务区分析的例子。 (十三)ArcGIS.Server.9.3 和 ArcGIS API for Flex 的 GeoprocessingServices 和最短路 径分析 1.ArcGIS API for Flex 用 GeoprocessingServices 实现网络分析中的最短路径分析, 本例子根据在地图上指定 Stops 点和 Barriers 点然后进行最短路径的分析并且把路径分析 结果显示在地图中同时在右边的 DataGrid 中现在最短路径的行车方法。 准备工作: 1. 本 来 例 子 采 用 的 数 据 是 SanFrancisco 数据(ArcTutor\GP Service Examples\DriveTimePolygons),在 ArcGIS.Server.9.3发布一个叫 SanFranciscoBasemap 的 Map Service(SanFranciscoBasemap.mxd)。 2.在 ArcGIS.Server.9.3发布一个叫 GPRouteA 的 Geoprocessing Service,关于 Geoprocessing 模 型 的 制 作 以 及 Geoprocessing Service 的 发 布 设 置 请 参 考 http://webhelp.esri.com/arcgisserver/9.3/java/index.htm#geoprocessing/guide_-1963186772.htm 页面中的 Example 了,讲述的很详细了。 完成后的效果图: 开始: 1.关于 Geoprocessing Service 的介绍见 http://www.gisbing.com/index.php/archives/189.html。 2.启动 Flex Builder3新建工程以及引入1.0正式版的 ArcGIS API for Flex library 的开发包。 3.新建 GPRoute.mxml 页面,添加 Map、ArcGISTiledMapServiceLayer、GraphicsLayer 等并 且设置相应的属性。具体代码如下: 4.上面的代码包含了一个 ArcGISTiledMapServiceLayer 和二个 GraphicsLayer,ruteGraphicsLayer 用来显示分析后的路 径,myGraphicsLayer 用来显示 stops、Barriers 点。 5.接着在 Map 控件的上方添加 ToggleButtonBar 和 Button 控件,ToggleButtonBar 控件用来实 现地图漫游、添加 stops、添加 Barriers 的功能切换,Button 为进行最短路径分析的按钮。在 Map 控件的右边添加一个 DataGrid 用来显示行车走法,代码: 6.接下来添加 Draw 控件以及点、线的样式设定: .ns { color: #ff0000; fontSize: 12; fontWeight: bold; } 7.对于上面中比较复杂的是 InfoSymbol 的样式设置,这个在前面的文章中也有用到了具体参 考:ArcGIS.Server.9.3和 ArcGIS API for Flex 在 MapTips 显示饼图数据统计(九) 8.接下来还有本篇的主角 Geoprocessor 了,它的 url 地址是我们上面发布的 GPRouteA 的 Geoprocessing Service 的 rest 地址: 9.最后还需要添加一个 HTTPService 的控件,这个是用来获取路径分析后生成的 DIRECTIONS 的 xml 文件的,关于 HTTPService 的控件可以搜索网络上了非常重要的一个 控件。代码: 10.完成界面的代码后接下来开始介绍具体的功能代码,按照事件的执行顺序首先是 ToggleButtonBar 的 itemClick 的事件方法 itemClickHandler(event),代码很简单了不作解释了: private function itemClickHandler(event:ItemClickEvent):void { switch(event.index) { case 0: { drawToolbar.deactivate(); break; } case 1: { drawToolbar.activate(Draw.MAPPOINT); isStops=true; break; } case 2: { drawToolbar.activate(Draw.MAPPOINT); isStops=false; break; } } } 11.接下来是 Draw 控件的 drawStart 事件的 drawStartHandler(event)方法,在方法是对前 面一次的分析结果显示进行清除操作: private function drawStartHandler(event):void { //清除前一次的路径分析以及点的显示 if(p==0) { ruteGraphicsLayer.clear(); myGraphicsLayer.clear(); } } 12.接下来是 myGraphicsLayer 的 graphicAdd 事件的 graphicAddHandler(event)方法,这 个方法是保存 stops 点和 Barrier 点 : private function graphicAddHandler(event:GraphicEvent):void { switch(event.graphic.geometry.type) { case Geometry.MAPPOINT: { if(isStops)//保存 Stop 点 { p=p+1; var object :String = new String(p); event.graphic.attributes=object; event.graphic.symbol=ifs; var graphic:Graphic=new Graphic(event.graphic.geometry); plist.push(graphic); } else//保存 Barrier 点 { event.graphic.symbol=sms; var graphic:Graphic=new Graphic(event.graphic.geometry); blist.push(graphic); } break; } } } 13.接下来是 Button 控件的 click 事件的 doShortestRoute()方法,这个方法就是进行路径 分析: //进行路径分析 private function doShortestRoute():void { if(plist.length>1 && blist.length>0) { //设置光标状态 CursorManager.setBusyCursor(); //Stops 参数 var featureSet:FeatureSet = new FeatureSet(plist); //Barriers 参数 var featureSet2:FeatureSet = new FeatureSet(blist); var params:Object = { “Input_locations“:featureSet,“InputBarriers“:featureSet2 }; //进行分析成功调用 onResult 方法,失败调用 onFault 方法 gp.execute(params, new AsyncResponder(onResult,onFault)); } else { Alert.show(“至少需要2个 Stop 点和1个 Barrier 点!“); } } 14.对于上面的这段代码主要就是设置 Geoprocessor 的输入参数了,这个根据具体的 model 进行设置了,本例的最短路径的 model 有2个输入参数分别是用来输入 stops 点和 Barrier 点: Parameter: Input_locations Data Type: GPFeatureRecordSetLayer Display Name: Input locations Direction: esriGPParameterDirectionInput Default Value: Geometry Type: esriGeometryPoint Parameter: InputBarriers Data Type: GPFeatureRecordSetLayer Display Name: InputBarriers Direction: esriGPParameterDirectionInput Default Value:Geometry Type: esriGeometryPoint 15.在执行完成 doShortestRoute()方法后成功调用 onResult 方法,失败调用 onFault 方法: //成功后结果显示包括路径显示以及用 HTTPService 去获取分析生成的 DIRECTIONS 的 xml 用来显示行车走法 private function onResult(gpResult:ExecuteResult,token:Object = null):void { //取消光标忙碌显示 CursorManager.removeBusyCursor(); //获取路径进行显示 var pv : ParameterValue = gpResult.parameterValues[0]; var fs : FeatureSet = pv.value as FeatureSet; ruteGraphicsLayer.graphicProvider = fs.features; //获取 DIRECTIONS 的 xml 路径 var pv2 : ParameterValue = gpResult.parameterValues[1]; var url:String=pv2.value.url as String; feedRequest.url=url; //请求 xml feedRequest.send(); } //Geoprocessor 失败显示失败信息右边的 DataGrid 中 private function onFault(info:Object, token:Object = null):void { CursorManager.removeBusyCursor(); Alert.show(info.toString()); } 16.在上面的 onResult 方法中获取分析结果,本例子 model 有2个输出参数分别为最多路 径的图形以及 DIRECTIONS 的 xml 文件: Parameter: Routes Data Type: GPFeatureRecordSetLayer Display Name: Routes Direction: esriGPParameterDirectionOutput Default Value: Geometry Type: esriGeometryPolyline Parameter: Text_Directions Data Type: GPDataFile Display Name: Text Directions Direction: esriGPParameterDirectionOutput 17. onResult 方法最后会调用 HTTPService 控件获取 DIRECTIONS 的 xml 文件把内容显示在右 边的 DataGrid 中: //获取 DIRECTIONS 的 xml 文件内容后显示在 private function resultHandler(event: ResultEvent ):void { var rlist:ArrayCollection=new ArrayCollection(); if(plist.length>2) { var nlist:ArrayCollection= event.result.DIRECTIONS.ROUTE.PATH; for(var i:int=0;i
还剩72页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 15 金币 [ 分享pdf获得金币 ] 9 人已下载

下载pdf

pdf贡献者

pyrming

贡献于2011-07-21

下载需要 15 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf