系统开发实习报告.docx
- 文档编号:3848280
- 上传时间:2022-11-25
- 格式:DOCX
- 页数:20
- 大小:9.67MB
系统开发实习报告.docx
《系统开发实习报告.docx》由会员分享,可在线阅读,更多相关《系统开发实习报告.docx(20页珍藏版)》请在冰豆网上搜索。
系统开发实习报告
电子科技大学
UNIVERSITYOFELECTRONICSCIENCEANDTECHNOLOGYOFCHINA
课程实习报告
课程名称:
信息系统设计与开发
XX:
20XX211XX10X
实习内容
作业1
要求:
基于CSS+DIV技术设计并制作一个精美的网页,并涉及部分javascript+DOM的应用
机时:
1-4
软件:
网页三剑客+浏览器
实现图片切换的javascript代码如下:
varinputs=document.getElementsByTagName("input");
varchangepic=document.getElementById("pic");
for(vari=0;i inputs[i].onclick=(function(a){//onclick只能等于一个事件 returnfunction(){//返回一个无参数函数,传给onclick changepic.src="images/"+a+".jpg";//改变src值 } }) (i+1);/*为每一个i都建立一个虚拟空间,在此处的i值和for循环的i值就没有关系了*/ } 结果展示: 图1-1网页制作效果图 作业2 要求: 结合XX示例DEMO,设计并制作一个地图主页,包括地图窗口及查询功能 机时: 5-8 软件: 浏览器,DW XX地图API是为开发者免费提供的一套基于XX地图服务的应用接口,包括JavaScriptAPI、Web服务API、AndroidSDK、iOSSDK、定位SDK、车联网API、LBS云等多种开发工具与服务,提供基本地图展现、搜索、定位、逆/地理编码、路线规划、LBS云存储与检索等功能,适用于PC端、移动端、服务器等多种设备,多种操作系统下的地图应用开发。 部分代码: varmap=newBMap.Map("container"); map.centerAndZoom(newBMap.Point(116.404,39.915),12); varmyDrag=newBMapLib.RectangleZoom(map,{ followText: "拖拽鼠标进行操作" }); --varmap=newBMap.Map("container");--> map.centerAndZoom(newBMap.Point(116.404,39.915),12); map.addControl(newBMap.NavigationControl()); map.addControl(newBMap.ScaleControl()); map.addControl(newBMap.OverviewMapControl()); map.addControl(newBMap.MapTypeControl()); //搜索 document.getElementById("areaSearch").onclick=function(){ //创建地址解析器实例 map.addEventListener("click",function(e){ document.getElementById("txtlatitude").value=e.point.lat; document.getElementById("txtLongitude").value=e.point.lng; map.clearOverlays(); varpointMarker=newBMap.Point(e.point.lng,e.point.lat);//创建标注的坐标 addMarker(pointMarker); geocodeSearch(pointMarker); }); functionaddMarker(point){ varmyIcon=newBMap.Icon("mk_icon.png",newBMap.Size(21,25), {offset: newBMap.Size(21,21), imageOffset: newBMap.Size(0,-21) }); varmarker=newBMap.Marker(point,{icon: myIcon}); map.addOverlay(marker); } functiongeocodeSearch(pt){ varmyGeo=newBMap.Geocoder(); myGeo.getLocation(pt,function(rs){ varaddComp=rs.addressComponents; document.getElementById("txtAreaCode").value=addComp.province+","+addComp.city+","+addComp.district; }); } varmyDis=newBMapLib.DistanceTool(map); //测距功能实现,在firefox或者chrome下查看调试信息 myDis.addEventListener("drawend",function(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",function(e){ console.log("removepolyline"); console.log(e); }); 结果展示: 图2-1整体效果图 图2-3地图底图切换 图2-3坐标定位及拉框放大功能 作业3 要求: 结合FlexAPIsamplecode,设计并制作一个地图主页,要求能够较为灵活地应用FlexAPI 机时: 9-16 软件: 浏览器、flashbuilder4.6 ArcGISAPIforFlex可以实现ArcGISServer之上建立富互联网应用(RIA)。 并能够通过使用ArcGISServer资源—例如地图服务、地址服务、要素服务和地理处理服务以及Flex的组件,创建具有交互良好和体验丰富的web应用 部分代码: privatevarinfoWindowText: String; privatevarlastClick: MapPoint; privateconstprojectionList: ArrayCollection=newArrayCollection( [ {data: 4326,label: "GCS_WGS_1984"}, {data: 4269,label: "GCS_North_American_1983"}, {data: 102113,label: "WGS_1984_Web_Mercator"}, {data: 102100,label: "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_Plate_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"} ]); privatefunctionmyClickHandler(event: MapMouseEvent): void { lastClick=event.mapPoint; varcoordGraphic: Graphic=newGraphic(lastClick); myGraphicsLayer.clear(); myGraphicsLayer.add(coordGraphic); projectNow(); } privatefunctionprojectNow(): void { varoutSR: SpatialReference=newSpatialReference(wkid.selectedItem.data); constprojectParameters: ProjectParameters=newProjectParameters; projectParameters.geometries=[lastClickasGeometry]; projectParameters.outSpatialReference=outSR; geometryService.project(projectParameters); infoWindowText="Fromwkid="+myMap.spatialReference.wkid+": \nX: "+lastClick.x+"\nY: "+lastClick.y; myMap.infoWindow.show(lastClick); } privatefunctionprojectCompleteHandler(event: GeometryServiceEvent): void { try { varpt: MapPoint=(event.resultasArray)[0]asMapPoint; vartextArea: TextArea=newTextArea(); textArea.editable=false; textArea.width=170; textArea.height=130; infoWindowText=infoWindowText.concat("\r\nTowkid="+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()); } } protectedfunctiongeometryService_faultHandler(event: FaultEvent): void { Alert.show(event.fault.faultString+"\n\n"+event.fault.faultDetail,"GeometryServiceError"+event.fault.faultCode); } protectedfunctionwkid_changeHandler(event: IndexChangeEvent): void { if(lastClick) { projectNow(); } } 结果展示: 图3-1编辑元素功能 图3-2指定位置拉框放大及切换底图 图3-3插入地标元素 图3-4删除地标元素 作业4 要求: 完成ArcGISRESTAPI的各种应用开发方法试验,如浏览器非编程,JavascriptAPI编程,FlexAPI编程,以及不采用API直接编程的方法等 机时: 17-28 软件: 浏览器、ArcGIS_Server_9.3_REST中文基础教程 REST即表征状态转移。 是一组架构约束条件和原则。 满足这些约束条件和原则的应用程序或设计就是RESTful。 需要注意的是,REST是设计风格而不是标准。 REST通常基于使用HTTP,URI,和XML(标准通用标记语言下的一个子集)以及HTML(标准通用标记语言下的一个应用)这些现有的广泛流行的协议和标准。 REST定义了一组体系架构原则,您可以根据这些原则设计以系统资源为中心的Web服务,包括使用不同语言编写的客户端如何通过HTTP处理和传输资源状态。 如果考虑使用它的Web服务的数量,REST近年来已经成为最主要的Web服务设计模式。 事实上,REST对Web的影响非常大,由于其使用相当方便,已经普遍地取代了基于SOAP和WSDL的接口设计。 作业4-1 要求: 浏览器非编程,通过地址栏输入URL地址实现服务 实现过程: 在浏览器地址栏查找ArcGIS的服务,将后缀改为? f=image就可显示相应的地图服务如下所示 结果展示: 作业4-2 要求: 使用ArcGISServer的JavaScriptAPI,创建地图网站 结果展示: 图4-2-1整体效果图 作业4-3 要求: 使用ArcGISServer的FlexAPI,创建网络地图服务 结果展示: 作业4-4 要求: 直接使用Javascript编程实现对RESTAPI的调用使用 部分代码: varrequest=null; //根据不同浏览器创建请求对象 functioncreateRequest() { try{ request=newXMLHttpRequest(); } catch(trymicrosoft) { try{ request=newActiveXObject("Msxm12.XMLHTTP"); } catch(othermicrosoft) { try{ request=newActiveXObject("Microsoft.XMLHTTP"); } catch(faild) { request=null; } } } if(request==null) alert("创建request对象失败"); } functionsendRESTrequest() { createRequest(); varrestURL="http: //localhost/ArcGIS/rest/services/World/MapServer/0? f=json";//构建的RESTURL request.open("GET",restURL,true);//请求对象初始化连接 request.onreadystatechange=processResponse;//设置服务器响应请求后的回调函数 request.send(null);//向服务器发送请求 } functionprocessResponse() { if(request.readyState==4)//readystate有4个值“1: 连接刚被初始化; {//2: 正在处理请求;3: 服务器快要完成请求;4: 请求完成,浏览器得到响应” varresponse=eval('('+request.responseText+')');//返回的是一个文本,需要用eval函数转成json对象 alert("图层ID: "+response.id+"\n"+ "图层名: "+response.name+"\n"+ "图层的显示字段: "+response.displayField); } } 结果展示: 图4-4-1发布地图服务 图4-4-2对图层URL访问结果展示 作业4-5 要求: 直接使用Flex编程实现对RESTAPI的调用及使用 部分代码: privatefunctiondoFind(): void { findTask.execute(myFindParams); } privatefunctionexecuteCompleteHandler(event: FindEvent): void { myGraphicsLayer.clear(); findsth.headerText="查询结果: 找到"+event.findResults.length+"个"; myGraphicsLayer.symbol=sfsFind; varresultCount: int=event.findResults.length; if(resultCount==0) { Alert.show("抱歉没有找到,请重新搜索"); } else { for(vari: int=0;i { vargraphic: Graphic=FindResult(event.findResults[i]).feature; graphic.toolTip=event.findResults[i].foundFieldName+": "+event.findResults[i].value; myGraphicsLayer.add(graphic); }vargraphicProvider: ArrayCollection=myGraphicsLayer.graphicProviderasArrayCollection; vargraphicsExtent: Extent=GraphicUtil.getGraphicsExtent(graphicProvider.toArray()); map.extent=graphicsExtent.expand(1.4); } }]]> Script> privatefunctiondoPrint(myFlexPrintJobScaleType: String): void { varmyPrintJob: FlexPrintJob=newFlexPrintJob(); 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这个风格的网络服务制作,还需要进一步的接触与探索,总之,学无止境。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 系统 开发 实习 报告
![提示](https://static.bdocx.com/images/bang_tan.gif)