GIS课程实习报告

《GIS综合实习》实习报告XX综合系统美工设计与实现PAGE1第17页、《GIS综合实习》实习报告XX综合系统美工设计与实现Version1AllRightsReserved目录TOC\o"1-2"\h\z145011.概述 132011.1选题的目的与任务 1270091.2国内外现状与水平 196591.3实习主要工作 283392.系统界面的设计与美化 3260872.1设计系统的布局 3263712.2利用CSS实现页面美工 4226133.基于ArcGISAPIforFlex开发的简单GIS系统 9119383.1发布ArcGISServer服务 9216023.2在Flex工程中加载ArcGIS组件 10130213.3添加ArcGIS控件 1028563.4加载发布的地图文档 11159373.5设置地图漫游工具条 13275073.6添加图层控制工具条 15248563.7Identify功能图查属性 17221233.8FindTask属性查图 19189133.9面积量算 21129573.10成果展示 22140144.ArcGISAPIforFlex学习经验小结 2462194.1ArcGISAPIforFlex组件简介 25284214.2ArcGISAPIforFlex1.3在线帮助文档的使用 26269164.3其他学习方法 26283065.结论 27304215.1主要成果 27308725.2存在问题 27141015.3进一步工作建议 2713822参考文献 2714614实习报告评审表 29概述选题的目的与任务目的是系统界面的设计与美化以及初步掌握基于Flex、ArcGISServer的WebGIS开发技术，能够独立完成简单的地理信息系统基本功能的实现。系统界面的设计与美化：系统基础管理模块中用户管理、角色管理、应用程序管理、资源管理、日志管理等界面，基础信息平台模块中污染源分布页面的设计及美化。基于Flex、ArcGISServer的简单WebGIS的基本功能的实现：地图数据的加载；不同数据集和数据源的读取；地图的放大、缩小、漫游等功能；图查属性、属性查图；几何图元编辑；基本的空间分析；基本的空间数据管理。任务是更加熟练掌握网页美工、CSS样式的使用以及基本掌握基于Flex、ArcGISServer的WebGIS开发技术，开发出一个简单的WebGIS系统。进一步学习CSS样式调整；了解Flex开发方法；学习基于Flex、ArcGISServer的WebGIS开发的基本技术；开发出一个简单的GIS系统。国内外现状与水平Flex是一项由FlashPlayer9或者AdobeAIR提供的客户端技术。这就意味着应用程序的开发人员现在可以将使用ArcGISServer开发的基于地理信息系统的网络服务同其它网络内容进行联合，而且显示速度更快、视觉表达更丰富的地图发布应用程序可以在网络或者桌面版上发布。ArcGISFlex应用程序接口充分利用了ArcGIS服务中的强大的制图、地理编码和地理处理功能。应用程序的最终用户只要点击程序中的一个按钮，就可以实现如在交互式地图中发布本地数据、搜索和显示GIS数据的要素和属性、定位、识别要素以及执行复杂的空间分析等功能。开发人员不必在机器上安装ArcGISServer，只要通过URL访问到ArcGISServer就使用ArcGISFlex应用程序接口来编程。因为这个应用程序接口是基于AdobeFlex架构的，开发人员可以将Flex的组件，比如数据网格、目录结构、面板、图表等，整合进自定义的应用程序当中。ArcGISFlex应用程序接口和ArcGISServer的一个早期使用者是马萨诸塞州的波士顿市。他们最近刚刚发布了名为“光能波士顿”的应用程序。这是一个面向公众的网络地图发布程序，用于显示可持续更新的能源设施。该程序允许用户通过屋顶的面积和周围建筑的遮挡情况，来计算屋顶上潜在的光电能量。可见，ArcGISFlex在国外的发展相对于我国而言已经达到一个比较成熟的阶段。实习主要工作工作内容继续学习网页美工、CSS语言与网页布局；学习基于FlexForGIS二次开发的基本技术开发一个简单GIS系统。工作方法主要通过阅读相关资料，自主学习C#、Flex以及ArcGISServer的相关内容，必要时请教老师和同学。工作过程在本次实习中，我的工作过程主要分为以下几个阶段：1.选题阶段：综合分析，选定题目；2.资料搜集阶段：继续进行学习资料的搜集与整理工作；3.系统页面设计与实现阶段：设计湘江流域水环境重金属污染监测系统页面的设计与实现；3.模仿学习阶段：根据学习资料上面提供的方法，使用Flex技术建立简单的WebGIS系统；4.理论学习阶段：学习WebGIS开发的一些理论基础；5.整合学习成果阶段：把已学习到的功能，在一个小型的GIS系统中实现；6.实习报告撰写阶段：整理在实习阶段完成的代码，完成实习报告的书写。工作量与成果在本次实习中，只要完成XX系统页面设计与美工，使用CSS语言对网页进行布局与美化。学习基于FlexForGIS二次开发的基本技术、根据自己学到的东西开发一个简单GIS系统。系统界面的设计与美化针对XX相关系统需求，对系统基础管理模块中用户管理、角色管理、应用程序管理、资源管理、日志管理等界面，基础信息平台模块中污染源分布页面的设计及美化。设计系统的布局根据系统的需求，设计了一个初步的布局方案页脚(960px*30px)子菜单栏（树型结构）(200px*500px)菜单栏(960px*30px)网页页眉（960px*60px）收缩栏子菜单中对应的信息（表格或地图）(740px*500px)页脚(960px*30px)子菜单栏（树型结构）(200px*500px)菜单栏(960px*30px)网页页眉（960px*60px）收缩栏子菜单中对应的信息（表格或地图）(740px*500px)图2.1.1系统页面布局利用CSS实现页面美工在网页页面中，利用设置每个控件、div、table的样式，将设置好的样式存储在css文件中，通过他们各自的id可以设置不同风格的样式。基于ArcGISAPIforFlex开发的简单GIS系统发布ArcGISServer服务在为应用程序编写代码之前，先在ArcGISServer中将需要使用的图层数据changsha地图文档以mxd格式发布服务，使得自动形成一个虚拟网址，以便在Flex开发中应用。在Flex工程中加载ArcGIS组件打开FlexBuilder，创建一个Flex工程，将ArcGISAPIforFlexlibrary的开发包中agslib-1.2-2009-05-15.Swc程序包加载到建立的工程中，这样就可以对FlexforGIS进行二次开发。添加ArcGIS控件在你能够访问每个控件的事件、属性和方法之前，需要将控件嵌入到MXML中。一旦将控件嵌入页面内，它们将图形化应用程序的用户界面。1．在设计模式下打开页面；2．将工具箱标签栏中的Map地图控件、GraphicsLayer绘图控件、QueryTask查询控件和FindTask查找控件添加到页面中；3.在页面上添加ActionScript脚本语言，引用命名空间： importcom.esri.ags.geometry.Polygon; importcom.esri.ags.geometry.Polyline; importcom.esri.ags.geometry.MapPoint; importcom.esri.ags.tasks.FeatureSet; importmx.rpc.AsyncResponder; importcom.esri.ags.Graphic; importcom.esri.ags.symbol.Symbol; importcom.esri.ags.geometry.Geometry; importmx.events.ListEvent; importcom.esri.ags.tasks.QueryTask; importcom.esri.ags.tasks.Query; importmx.controls.Alert;加载发布的地图文档地图（Map）在ArcGISAPIforFlex中负责对layer进行组织，在逻辑上Map可以包含任意多个layer。在ArcGISAPIforFlex中，主要包括以下几种layer：ArcGISDynamicMapServiceLayer：用户通过ArcGISServerRESTAPI以动态地图服务的形式对数据进行访问。ArcGISImageServiceLayer：用户通过ArcGISServerRESTAPI以影像服务的形式对数据进行访问。ArcGISTiledMapServiceLayer：用户通过ArcGISServerRESTAPI以影像服务的形式对数据进行访问。ArcIMSMapServiceLayer：用户可以访问ArcIMSimageservice提供的数据。GraphicsLayer：用于显示用户在客户端绘制的图形要素的图层，该图层可以包含一个或多个图形要素。ArcGISDynamicMapServiceLayer图层是平常发布的一般动态地图，ArcGISTiledMapServiceLayer图层是特殊的需要制作的切片式地图，切片式地图可以在ArcGISServer中自动形成，具体方法如下所示：图3.4.1在ArcGISServer中创建切片式地图形成的切片式地图，其实是将各个不同比例尺的地图数据切成几块以图片格式如PNG、JPEG形式存储在缓存中，切片式地图不能随着原来地图的改变而改变。在MXML中将命名空间设为xmlns:esri="/2008/ags"，添加Map控件，在Map标签中定义对象，并设置Map相关属性、Map的消息以及消息响应函数。<esri:Mapwidth="100%"height="50%"id="EsriMap"resize="EsriMapResize(event);"extentChange="ESRIMapExtentChange(event);"mouseMove="OnDrawMouseMove(event)"/>Map创建好之后，使用layer把需要访问的数据加载到map上,在<esri:Map>标签下面创建<esri:ArcGISTiledMapServiceLayer>子标签。<esri:ArcGISTiledMapServiceLayer>标签定义一个layer对象，如下：<esri:ArcGISTiledMapServiceLayerurl="http://XXX/ArcGIS/rest/services/XXX/MapServer"/>同时，对于Map控件中还能控制地图显示加载时显示的范围，在<esri:Map>标签下创建<esri:extent>标签即可。使用<esri:extent>标签来定义一个范围对象：<esri:extent><esri:Extentxmin="-126"ymin="24"xmax="-67"ymax="50"><esri:SpatialReferencewkid="4326"/></esri:Extent></esri:extent>设置地图漫游工具条在ArcGISAPIforFlex中提供了地图浏览的工具，通过简单的调用，就能够实现放大、缩小、平移、复位等地图浏览操作。使用<esri:Navigation>标签定义地图浏览控件：<esri:Navigationid="navToolbar"map="{myMap}"/>map属性绑定需要进行浏览操作的地图。Navigation对象创建后，使用Navigation的activate方法来激活需要的工具进行浏览。例如放大操作：activate(Navigation.ZOOM_IN)；释放浏览工具，调用Navigation对象的deactivate()函数即可。<esri:Navigationid="navToolbar"map="{myMap}"/><mx:ToggleButtonBarid="toolbar1"creationComplete="initToolbar1()"itemClick="itemClickHandler(event)"iconField="icon"horizontalCenter="-163"verticalCenter="-151"> <mx:dataProvider> <mx:Array> <mx:Objecticon="{ZoomIn}"/> <mx:Objecticon="{ZoomOut}"/> <mx:Objecticon="{Pan}"/> </mx:Array> </mx:dataProvider> </mx:ToggleButtonBar> <mx:Buttonicon="{Back}"click="navToolbarExtent('Prev')"enabled="{!navToolbar.isFirstExtent}"horizontalCenter="-70"verticalCenter="-151"/> <mx:Buttonicon="{Forward}"click="navToolbarExtent('Next')"enabled="{!navToolbar.isLastExtent}"horizontalCenter="-21"verticalCenter="-151"/><mx:Buttonicon="{FullExt}"click="navToolbarExtent('Full')"horizontalCenter="25"verticalCenter="-151"/>ActionScript脚本： privatefunctionitemClickHandler(event:ItemClickEvent):void { switch(event.index) { case0://选择为ZoomIn { //激活navToolbar的ZOOM_IN navToolbar.activate(Navigation.ZOOM_IN); break; } case1://选择为ZoomOut { //激活navToolbar的ZOOM_OUT navToolbar.activate(Navigation.ZOOM_OUT); break; } case2://选择为Pan { //激活navToolbar的PAN navToolbar.deactivate(); break; } } }添加图层控制工具条ArcGISAPIforFlex组件中没有提供现成的图层控制TOC控件，但是图层控制TOC控件实际上和树控件类似，因此可以在Flex提供的Tree控件的基础上实现图层控制。在src目录下新添加一个叫uc的目录，然后在uc下新建TreeToc.mxml文件用来实现Toc功能的。Toc控件这里是用Flex提供的Tree控件的基础上实现的。这个Tree控件获取Layers数据作为数据源进行绑定显示，同时提供了显示图层隐藏图层等方法。最后这个Tree添加了一个叫uc.TreeRenderer的itemRenderer（项渲染器），也就是说Tree的每一个节点都是由这个itemRenderer来负责显示。在uc目录下新增加TreeRenderer.mxml的文件，这个因为是itemRenderer所以需implements="mx.controls.listClasses.IDropInListItemRenderer"。在uc.TreeToc中引用命名空间： importmx.collections.ArrayCollection; importcom.esri.ags.layers.ArcIMSMapServiceLayer; importcom.esri.ags.layers.ArcGISDynamicMapServiceLayer; importcom.esri.ags.events.LayerEvent; importcom.esri.ags.layers.Layer; importcom.esri.ags.layers.LayerInfo; importmx.utils.ObjectUtil;将Tree控件绑定数据源：privatefunctionsetDataProvider():void{if(layerisArcGISDynamicMapServiceLayer){layerInfos=ArcGISDynamicMapServiceLayer(layer).layerInfos;}elseif(layerisArcIMSMapServiceLayer){layerInfos=ArcIMSMapServiceLayer(layer).layerInfos;}registerClassAlias("com.esri.ags.layers.LayerInfo",LayerInfo);//ObjectUtil.copy方法接受一个对象作为参数而返回一个在内存的新位置的此对象的深度拷贝，类似克隆layerInfos=ObjectUtil.copy(layerInfos)asArray;dataProvider=layerInfos;}设置显示图层与隐藏图层方法，在uc.uc.TreeRenderer中实现checkbox的响应事件：privatefunctionclickHandler(event:MouseEvent):void{varlayerInfo:LayerInfo=LayerInfo(data);if(cb.selected){layerInfo.defaultVisibility=true;//调用TreeTOC显示图层方法TreeTOC(listData.owner).showLayer(layerInfo);}else{layerInfo.defaultVisibility=false;//调用TreeTOC隐藏图层方法TreeTOC(listData.owner).hideLayer(layerInfo);}}在主页面中加载自制控件TreeTOC <uc1:TreeTOClayer="{myDynamicService}"height="300"width="300"borderThickness="3"verticalCenter="19"horizontalCenter="400"/>Identify功能图查属性在ArcGISAPIforFlex中，使用IdentifyTask来实现Identify的功能。使用<esri:IdentifyTask>标签来定义一个IdentifyTask对象，如下面代码：<esri:IdentifyTaskid="identifyTask"identifyComplete="identifyCompleteHandler(event)"url="http://XXX/ArcGIS/rest/services/XXX/MapServer"/>执行Identify，需要定义一个IdentifyParameters对象。在界面上使用鼠标交互来完成Identify：首先，定义一个draw控件：<esri:Drawid="drawToolbar"map="{map}"graphicsLayer="{myGraphicsLayer}"drawEnd="drawEndHandler(event)">drawEnd事件绑定到drawEndHandler(event)函数，这个事件会在绘制完成后触发。使用ActionScript脚本实现drawEndHandler和identifyCompleteHandler函数：首先，引入命名空间：importcom.esri.ags.Graphic;importcom.esri.ags.events.DrawEvent;importcom.esri.ags.events.IdentifyEvent;importcom.esri.ags.geometry.Geometry;importcom.esri.ags.symbol.Symbol;importcom.esri.ags.tasks.IdentifyParameters;importcom.esri.ags.tasks.IdentifyResult;importcom.esri.ags.toolbars.Draw;其次，定义并实现drawEndHandler()函数：privatefunctiondrawEndHandler(event:DrawEvent):void{vargeometry:Geometry=event.geometry;varidentifyParams:IdentifyParameters=newIdentifyParameters();identifyParams.returnGeometry=true;identifyParams.tolerance=3;identifyParams.width=600;identifyParams.height=550;identifyParams.geometry=geometry;identifyParams.layerOption=IdentifyParameters.LAYER_OPTION_ALL;identifyParams.mapExtent=map.extent;identifyTask.execute(identifyParams);}在drawEndHandler()函数中定义了一个identifyParams，每次调用drawEndHandler的时候，identifyTask都会把identifyParams作为传入参数调用execute方法去执行。执行完成后会响应identifyCompleteHandler()函数。定义并实现identifyCompleteHandler()函数：privatefunctionidentifyCompleteHandler(event:IdentifyEvent):void{foreach(varresult:IdentifyResultinevent.identifyResults){myGraphicsLayer.add(result.feature);switch(result.feature.geometry.type){caseGeometry.MAPPOINT:{varmp:MapPoint=result.feature.geometryasMapPoint;vartxt:Text=newText();txt.text="Point";myMWindow.content=txt;myMWindow.show(mp);break;}caseGeometry.POLYLINE:{varlin:Polyline=result.feature.geometryasPolyline;vartxt:Text=newText();txt.text="Line";myMWindow.content=txt;myMWindow.show(lin.extent.center);break;}caseGeometry.POLYGON:{varpgn:Polygon=result.feature.geometryasPolygon;vartxt:Text=newText();txt.text="polygon";myMWindow.content=txt;myMWindow.show(pgn.extent.center);break;}}}}在identifyCompleteHandler()函数中，遍历identifyResults，将identifyResults添加到GraphicsLayer上。、FindTask属性查图在ArcGISAPIforFlex中执行Find任务，需要使用FindTask。使用<esri:FindTask>标签定义一个FindTask对象，如下面的代码：<esri:FindTaskid="findTask"executeComplete="executeCompleteHandler(event)"url="http://XXX/ArcGIS/rest/services/XXX/MapServer/find"/>使用FindTask，还需要一个FindParameters对象来指定查找的参数。<esri:FindParametersid="myFindParams"returnGeometry="true"contains="true"searchText="{fText.text}"layerIds="[2]"searchFields="['STATE_ABBR','STATE_NAME']"/>定义好FindTask和FindParameters之后，在界面上定义一个文本输入框和一个button来完成Find功能的调用工作。<mx:HBoxwidth="100%"height="40"backgroundColor="0xDDDDFF"paddingTop="10"horizontalAlign="center"><mx:Texttext="SearchfornamesofStates"/><mx:TextInputmaxWidth="400"id="fText"enter="doFind()"text="NEW"/><mx:Buttonlabel="Find"click="doFind()"/></mx:HBox>文本输入框用来输入查找的内容，button用来执行查询的动作。实现Find功能：首先，使用import指令引入需要的命名空间：importcom.esri.ags.events.FindEvent;其次，定义doFind()函数：PrivatefunctiondoFind():void{findTask.execute(myFindParams);}在doFind()函数中FindTask对象直接调用了execute方法，并把FindParameters对象做为传入参数。下面实现executeCompleteHandler()函数，这个函数在定义FindTask的时候被指定为响应executeComplete事件的函数，即当Find任务完成的时候会响应executeCompleteHandler()函数，Find得到的结果将在这个函数里进行处理。privatefunctionexecuteCompleteHandler(event:FindEvent):void{myGraphicsLayer.clear();vargraphic:Graphic;resultSummary.text="Found"+event.findResults.length+"results.";for(vari:Number=0;i<event.findResults.length;i++){graphic=event.findResults[i].feature;graphic.toolTip=event.findResults[i].foundFieldName+":"+event.findResults[i].value;myGraphicsLayer.add(graphic);}}在executeCompleteHandler函数中遍历Find的结果，给每一个graphic添加一个toolTip，显示该结果对应的字段名和字段值。同时把查询到的结果显示到DataGrid中：<mx:DataGriddataProvider="{findTask.executeLastResult}"scroll="true"width="100%"height="40%"><mx:columns><mx:DataGridColumndataField="layerId"headerText="LayerID"width="70"/><mx:DataGridColumndataField="layerName"headerText="LayerName"/><mx:DataGridColumndataField="foundFieldName"headerText="FoundFieldName"/><mx:DataGridColumndataField="value"headerText="FoundFieldValue"/></mx:columns></mx:DataGrid>最后只要把DataGrid的dataProvider绑定到findTask.executeLastResult就可以了。面积量算地图数据是采用GeographicCoordinateSystems（地理坐标系）所以在距离和面积的量算之间需要进行地图投影也就是project操作，对于面积的量算还需要先进行simplify操作。由于涉及到地图投影，所以在加入Map控件时，需要设置投影属性：<esri:Mapid="myMap"extent="{newExtent(575803.655454411,3079499.42312319,830790.103001739,3178635.28608872,newSpatialReference(102113))}"load="drawToolbar.activate(Draw.POLYGON)">面积量算设计到地图投影，首先进行GeometryService的project操作，为GeometryService控件添加了PROJECT_COMPLETE的完成后监听事件，然后实现projectCompleteHandler方法，然后进行simplify操作并且添加了SIMPLIFY_COMPLETE完成监听事件方法simplifyCompleteHandler,之后对所选中的区域进行面积量算。privatefunctionsimplifyCompleteHandler(event:GeometryServiceEvent):void{vargeometry:Geometry=event.graphics[0].geometry;//weonlydrawoneareatatimevarnewGraphic:Graphic=newGraphic(geometry);newGraphic.addEventListener(MouseEvent.CLICK,graphicClicked);geometryService.areasAndLengths([newGraphic(geometry)]);}privatefunctionareaslengthsCompleteHandler(event:GeometryServiceEvent):void{result.text="Thisareais"+myNumberFormatter.format(event.arealengths.areas/1000000)+"km2.\n";}成果展示将所有的功能整合在一起，效果图如下：图3.10.1最终成果效果图一（在浏览器中）图3.10.2最终成果效果图二（在FlashPlayer）图3.10.3通过图查属性图3.10.4通过属性查图ArcGISAPIforFlex学习经验小结由于基础、学习能力以及学习条件的限制，在本次学习中我遇到了很多困难，但是同时也总结了一些经验。本实习报告书写的顺序，其实也大致是我的学习过程，先是简单的在Flex中加载地图，使得地图在浏览器中显示，然后接着实现地图漫游、图层控制、简单的地图图文互查等功能，这样我对基于ArcGISAPIforFlex的二次开发基础便有了一个初步的感性认识，之后我阅读了一些介绍ArcGISAPIforFlex二次开发的书籍以及相关网站，对其有了更进一步的理性认识，本部分内容主要介绍在学习ArcGISAPIforFlex过程中，我认为比较重要的理论知识和一些学习方法与资料。ArcGISAPIforFlex组件简介Map组件：Map组件是ArcGISFlexAPI中唯一的可视化组件，ArcGISFlexAPI中所有的操作和功能都会在Map中进行，Map中的Layer有两种，一种是对应某个地图服务的MapServiceLayer、一种是用以绘制自定义要素的GraphicLayer。Map有很灵活的可配置性，各种元素的外观也很容易定制，如果有特殊的需要，Map也可以通过隐藏所有元素，同时可以在此基础上加上自己的内容。Navigation工具：提供了对Map进行导航的诸多功能，可以实现漫游、拉框放大、拉框缩小等类似ADF中Tool的功能和前一视图、后一视图、全图等类似ADF中Command的功能，它并不是一个工具条，而是提供了一些功能，可以把Flex组件绑定到Navigation的功能上。Navigation中漫游、拉框放大、拉框缩小等功能和工具条按钮的绑定，同时借助Flex中的ToggleButtonBar作为这些功能的宿主。Draw工具：Draw工具提供了在客户端绘制各种几何对象的功能，用一个ToggleButtonBar去绑定Draw工具的功能。InfoWindow窗口：InfoWindow窗口主要提供在Map上弹出信息提示的功能，定义一个Map的时候，Map会生成一个自带的InfoWindow并放置在自己的infoWindow属性中。InfoWindow使用的重点在于其content属性，它是InfoWindow窗口中的信息内容，它对应一个DisplayObject的对象，任何Flex中的可视组件都可以放置于其中。QueryTask：QueryTask是一个