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这个风格的网络服务制作，还需要进一步的接触与探索，总之，学无止境。
升级会员 