WebGIS原理与实践11-6.ppt

WebGIS原理与开发技术——Ajax与WebGIS(上) 侯景伟 houjingwei2005@ hjwei2005@163.com Tel宁夏大学资源环境学院，2012 主要内容 基于Ajax的Web应用模型 什么是Ajax xmlHttprequest对象 基于Ajax的Web地图模型 地图的异步请求与响应 服务器端接口 基于Ajax的Web应用模型 基于Ajax的Web应用模型 什么是Ajax xmlHttprequest对象 xmlhttpRequest对象的主要属性 xmlhttpRequest对象的主要方法 如何使用xmlhttprequest对象 如何使用xmlhttprequest对象 客户端MVC开发模式 客户端MVC开发模式 基于Ajax的Web地图模型 地图视图设计 地图视图设计——代码示例 定义地图的外观（部分样式） 地图交互流程 地图交互流程——初始化地图 地图交互流程——设置地图工具 地图交互设计-- MouseDown 地图交互设计-- MouseDown 地图交互设计-- MouseMove 地图交互设计-- MouseUp 地图的请求与响应——RequestMap 地图的请求与响应 地图的请求与响应——xhrRequest 地图的请求与响应 AjaxMap示例 服务器端接口设计 服务器端接口 服务器端接口——计算缩放比例 服务器端接口——AjustMap() 思考题 重新设计一个基于Ajax的Info查询 其他技术 Html5与Canvas 使用Iframe或script标签实现异步请求 缩放比例的计算需要同时考虑橡皮框的宽度和高度与地图视图的宽度和高度的比值，原则是取比值较小的一个值，以避免过分放大或缩小地图而产生的意料之外的结果： nScale=1.0 if dltx2 then nscale=abs(mapWidth/dltx) if dlty2 then if abs(500/dlty)nscale then nscale= abs(mapHight/dlty) end if end if 如果是平移操作，需要先计算出平移后地图中心点的位置（屏幕坐标）： sx=mapWidth/2-dltx; sy=mapHeight/2-dlty; select case getMapTool() case zoomin Session(MapObj).screen2WorldEx sx, sy, fMapX, fMapY fNewZoom=fZoom/nScale case zoomout Session(MapObj).screen2WorldEx sx, sy, fMapX, fMapY fNewZoom=fZoom*nScale case pan Session(MapObj).screen2WorldEx cx-dltx, cy-dlty, fMapX, fMapY fNewZoom=fZoom case else fNewZoom=fZoom end select ‘… … if getMapToolzoomall then Session(MapObj).ZoomTo fMapX, fMapY, fNewZoom else Session(MapObj).ZoomTo session(x0), session(y0), session(z0) end if * * 传统Web应用主要依靠表单来实现客户端与服务器端的通信，这是一种同步通信模式。 主要两个问题:（1）客户等待延迟；（2）整个网页刷新。 传统的Web应用模型 Ajax Web应用模型 Ajax实际上是多种技术的结合体，包括JavaScript，CSS，DOM，XMLHttpRequest，XML，XSLT，XHTML等。其主要技术特点是通过CSS，XHTML、DOM来表现网页的内容和样式；通过xmlHttpRequest对象进行客户端与服务器端异步数据通讯；通过JavaScript处理相关业务逻辑。 这种在设计和编程上将内容、表现、业务和数据分层的开发模式，带来的是一种全新的用户交互体验和Web应用性能的提高。 XmlHttpRequest是Web客户端通过Javascript、VbScript、Jscript等脚本语言向Web服务器请求和处理XML格式或其他格式的数据的一组API。 XmlHttp提供了客户端同http服务器通信的协议，可实现同步和异步的