系统开发实习报告.docx

1、系统开发实习报告电 子 科 技 大 学UNIVERSITY OF ELECTRONIC SCIENCE AND TECHNOLOGY OF CHINA课程实习报告课程名称：信息系统设计与开发XX：20XX211XX10X实习内容作业1要求：基于CSS+DIV技术设计并制作一个精美的网页，并涉及部分javascript +DOM的应用机时：1-4软件：网页三剑客+浏览器实现图片切换的javascript代码如下：var inputs=document.getElementsByTagName(input);var changepic=document.getElementById(pic);fo

2、r(var i=0;iinputs.length;i+) /进行遍历，为每一个input添加单击事件inputsi.onclick=(function (a) /onclick只能等于一个事件return function()/返回一个无参数函数，传给onclickchangepic.src=images/+a+.jpg;/改变src值)(i+1);/*为每一个i都建立一个虚拟空间，在此处的i值和for循环的i值就没有关系了*/ 结果展示： 图1-1 网页制作效果图作业2要求：结合XX示例DEMO，设计并制作一个地图主页，包括地图窗口及查询功能机时：5-8软件：浏览器，DW XX地图API是为

3、开发者免费提供的一套基于XX地图服务的应用接口，包括JavaScript API、Web服务API、Android SDK、iOS SDK、定位SDK、车联网API、LBS云等多种开发工具与服务，提供基本地图展现、搜索、定位、逆/地理编码、路线规划、LBS云存储与检索等功能，适用于PC端、移动端、服务器等多种设备，多种操作系统下的地图应用开发。部分代码：var map = new BMap.Map(container);map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);var myDrag = new BMapLib.Rectangl

4、eZoom(map, followText: 拖拽鼠标进行操作);map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);map.addControl(new BMap.NavigationControl();map.addControl(new BMap.ScaleControl();map.addControl(new BMap.OverviewMapControl();map.addControl(new BMap.MapTypeControl();/搜索document.getElementById(areaSearch).oncl

5、ick = function () / 创建地址解析器实例map.addEventListener(click, function (e) document.getElementById(txtlatitude).value = e.point.lat;document.getElementById(txtLongitude).value = e.point.lng;map.clearOverlays();var pointMarker = new BMap.Point(e.point.lng, e.point.lat); / 创建标注的坐标addMarker(pointMarker);geo

6、codeSearch(pointMarker););function addMarker(point) var myIcon = new BMap.Icon(mk_icon.png, new BMap.Size(21, 25), offset: new BMap.Size(21, 21),imageOffset: new BMap.Size(0, -21);var marker = new BMap.Marker(point, icon: myIcon );map.addOverlay(marker);function geocodeSearch(pt) var myGeo = new BMa

7、p.Geocoder();myGeo.getLocation(pt, function (rs) var addComp = rs.addressComponents;document.getElementById(txtAreaCode).value = addComp.province + , + addComp.city + , + addComp.district;);var myDis = new BMapLib.DistanceTool(map);/ 测距功能实现，在firefox或者chrome下查看调试信息myDis.addEventListener(drawend, func

8、tion(e) console.log(drawend);console.log(e.points);console.log(e.overlays);console.log(e.distance););myDis.addEventListener(addpoint, function(e) console.log(addpoint);console.log(e.point);console.log(e.pixel);console.log(e.index);console.log(e.distance););myDis.addEventListener(removepolyline, func

9、tion(e) console.log(removepolyline);console.log(e);); 结果展示：图2-1 整体效果图图2-3 地图底图切换 图2-3 坐标定位及拉框放大功能作业3要求：结合Flex API sample code，设计并制作一个地图主页，要求能够较为灵活地应用Flex API机时：9-16软件：浏览器、flashbuilder4.6 ArcGIS API for Flex 可以实现ArcGIS Server 之上建立富互联网应用（RIA）。并能够通过使用 ArcGIS Server 资源 例如地图服务、 地址服务、要素服务和地理处理服务以及 Flex 的组

10、件，创建具有交互良好和体验丰富的web应用部分代码：private var infoWindowText:String; private var lastClick:MapPoint; private const projectionList:ArrayCollection = new ArrayCollection( data: 4326, label: GCS_WGS_1984 , data: 4269, label: GCS_North_American_1983 , data: 102113, label: WGS_1984_Web_Mercator , data: 102100, l

11、abel: WGS_1984_Web_Mercator_Auxiliary_Sphere , data: 102003, label: USA_Contiguous_Albers_Equal_Area_Conic , data: 102004, label: USA_Contiguous_Lambert_Conformal_Conic , data: 102005, label: USA_Contiguous_Equidistant_Conic , data: 3395, label: WGS_1984_World_Mercator , data: 54001, label: World_Pl

12、ate_Carree , data: 54004, label: World_Mercator , data: 54008, label: World_Sinusoidal , data: 54009, label: World_Mollweide , data: 102038, label: The_World_From_Space , data: 26985, label: NAD_1983_StatePlane_Maryland_FIPS_1900 , data: 26912, label: NAD_1983_UTM_Zone_12N ); private function myClic

13、kHandler(event:MapMouseEvent):void lastClick = event.mapPoint; var coordGraphic:Graphic = new Graphic(lastClick); myGraphicsLayer.clear(); myGraphicsLayer.add(coordGraphic); projectNow(); private function projectNow():void var outSR:SpatialReference = new SpatialReference(wkid.selectedItem.data); co

14、nst projectParameters:ProjectParameters = new ProjectParameters; projectParameters.geometries = lastClick as Geometry ; projectParameters.outSpatialReference = outSR; geometryService.project(projectParameters); infoWindowText = From wkid = + myMap.spatialReference.wkid + :nX: + lastClick.x + nY: + l

15、astClick.y; myMap.infoWindow.show(lastClick); private function projectCompleteHandler(event:GeometryServiceEvent):void try var pt:MapPoint = (event.result as Array)0as MapPoint; var textArea:TextArea = new TextArea(); textArea.editable = false; textArea.width = 170; textArea.height = 130; infoWindow

16、Text = infoWindowText.concat(rnTo wkid = + wkid.selectedItem.data + :n + X: + pt.x + n + Y: + pt.y); textArea.text = infoWindowText; myMap.infoWindow.label = Coordinates; myMap.infoWindow.content = textArea; catch (error:Error) Alert.show(error.toString(); protected function geometryService_faultHan

17、dler(event:FaultEvent):void Alert.show(event.fault.faultString + nn + event.fault.faultDetail, Geometry Service Error + event.fault.faultCode); protected function wkid_changeHandler(event:IndexChangeEvent):void if (lastClick) projectNow(); 结果展示：图3-1 编辑元素功能图3-2 指定位置拉框放大及切换底图图3-3 插入地标元素图3-4 删除地标元素作业4要

18、求：完成ArcGIS REST API的各种应用开发方法试验，如浏览器非编程，Javascript API编程 ，Flex API编程，以及不采用API直接编程的方法等机时：17-28软件：浏览器、ArcGIS_Server_9.3_REST中文基础教程 REST即表征状态转移。是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是RESTful。需要注意的是，REST是设计风格而不是标准。REST通常基于使用HTTP，URI，和XML（标准通用标记语言下的一个子集）以及HTML（标准通用标记语言下的一个应用）这些现有的广泛流行的协议和标准。REST 定义了一组体系架构原则，您可

19、以根据这些原则设计以系统资源为中心的 Web 服务，包括使用不同语言编写的客户端如何通过 HTTP 处理和传输资源状态。 如果考虑使用它的 Web 服务的数量，REST 近年来已经成为最主要的 Web 服务设计模式。 事实上，REST 对 Web 的影响非常大，由于其使用相当方便，已经普遍地取代了基于 SOAP 和 WSDL 的接口设计。作业4-1要求：浏览器非编程，通过地址栏输入URL地址实现服务实现过程：在浏览器地址栏查找ArcGIS的服务，将后缀改为?f=image就可显示相应的地图服务如下所示结果展示：作业4-2要求：使用ArcGIS Server的JavaScript API，创建地

20、图网站结果展示：图4-2-1 整体效果图作业4-3要求：使用ArcGIS Server的Flex API，创建网络地图服务结果展示：作业4-4要求：直接使用Javascript编程实现对REST API的调用使用部分代码： var request=null; /根据不同浏览器创建请求对象 function createRequest() try request=new XMLHttpRequest(); catch(trymicrosoft) try request = new ActiveXObject(Msxm12.XMLHTTP); catch(othermicrosoft) try r

21、equest = new ActiveXObject(Microsoft.XMLHTTP); catch(faild) request=null; if(request=null) alert(创建request对象失败); function sendRESTrequest() createRequest(); var restURL=http:/localhost/ArcGIS/rest/services/World/MapServer/0?f=json;/构建的REST URL request.open(GET,restURL,true);/请求对象初始化连接 request.onread

22、ystatechange=processResponse;/设置服务器响应请求后的回调函数 request.send(null);/向服务器发送请求 function processResponse() if(request.readyState=4) /ready state有4个值“1:连接刚被初始化； /2:正在处理请求；3:服务器快要完成请求；4:请求完成，浏览器得到响应” var response=eval(+request.responseText+);/返回的是一个文本，需要用eval函数转成json对象 alert(图层ID：+response.id+n+ 图层名：+respo

23、nse.name+n+ 图层的显示字段：+response.displayField); 结果展示：图4-4-1 发布地图服务图4-4-2 对图层URL访问结果展示作业4-5要求：直接使用Flex编程实现对REST API的调用及使用部分代码：private function doFind():void findTask.execute(myFindParams); private function executeCompleteHandler(event:FindEvent):void myGraphicsLayer.clear(); findsth.headerText = 查询结果：找到

24、 + event.findResults.length + 个; myGraphicsLayer.symbol = sfsFind; var resultCount:int = event.findResults.length; if (resultCount = 0) Alert.show(抱歉没有找到，请重新搜索); else for (var i:int = 0; i private function doPrint(myFlexPrintJobScaleType:String):void var myPrintJob:FlexPrintJob = new FlexPrintJob();

25、 if (myPrintJob.start() try map.zoomSliderVisible = false; myPrintJob.addObject(myPanel, myFlexPrintJobScaleType); map.zoomSliderVisible = true; catch (e:Error) Alert.show( e.toString() ); myPrintJob.send(); 结果展示：图4-5-1 修改并发布矢量图层图4-5-2 矢量图层发布结果图4-5-3 矢量地图调用图4-5-4 实现查询功能并高亮显示图4-5-6 打印地图功能总结与感悟 通过本学期上机实习，我充分的学习和了解了REST服务的相关概念，对URL的使用有了更近一步的了解。初步了解学习了Javascript的编程，以及各类地图API的调用方法。而对于REST这个风格的网络服务制作，还需要进一步的接触与探索，总之，学无止境。