WebGIS原理与实践.ppt

WebGIS原理与开发技术 Ajax与WebGIS 上 侯景伟houjingwei2005 hjwei2005 Tel 15121888067宁夏大学资源环境学院 2012 主要内容 基于Ajax的Web应用模型什么是AjaxxmlHttprequest对象基于Ajax的Web地图模型地图的异步请求与响应服务器端接口 基于Ajax的Web应用模型 传统Web应用主要依靠表单来实现客户端与服务器端的通信 这是一种同步通信模式 主要两个问题 1 客户等待延迟 2 整个网页刷新 传统的Web应用模型 基于Ajax的Web应用模型 AjaxWeb应用模型 什么是Ajax Ajax实际上是多种技术的结合体 包括JavaScript CSS DOM XMLHttpRequest XML XSLT XHTML等 其主要技术特点是通过CSS XHTML DOM来表现网页的内容和样式 通过xmlHttpRequest对象进行客户端与服务器端异步数据通讯 通过JavaScript处理相关业务逻辑 这种在设计和编程上将内容 表现 业务和数据分层的开发模式 带来的是一种全新的用户交互体验和Web应用性能的提高 xmlHttprequest对象 XmlHttpRequest是Web客户端通过Javascript VbScript Jscript等脚本语言向Web服务器请求和处理XML格式或其他格式的数据的一组API XmlHttp提供了客户端同http服务器通信的协议 可实现同步和异步的交互 XMLHttpRequest是Ajax异步通讯技术得以实现的最主要对象 使用xmlHttpRequest对象的最大的好处是可以更新网页的部分内容而不需要刷新整个页面 现在的绝对多数浏览器都增加了对XMLHttpRequest的支持 xmlhttpRequest对象的主要属性 xmlhttpRequest对象的主要方法 如何使用xmlhttprequest对象 functiongetXHR varA null if A 如何使用xmlhttprequest对象 functiontestXHR varxhr getXHR if xhr xhr onreadystatechange function if xhr readyState 4 varodiv document getElementById test odiv innerHTML unescape xhr responseText xhr Open get test txt true xhr Send null 客户端MVC开发模式 MVC是模型 视图 控制开发模式的简称 它是一种将用户交互和业务逻辑进行分离的一种程序开发方式 MVC通常用于大规模的应用开发中 在我们这个实习中 我们通过DOM来实现地图页面布局 通过CSS来定义地图的外观和交互样式 以XMLHttpRequest对象为客户端与服务器端通讯协议 通过JavaScript实现客户端的地图交互逻辑和通信控制 服务器端ASP脚本专注于服务器端地图服务功能实现 不参与客户端地图的行为 客户端MVC开发模式 基于Ajax的Web地图模型 主要特点 1 客户端代码与服务器端代码完全分离 客户端AjaxMap html主要用来实现地图表现以及与用户的交互 2 客户端通过XmlHttpRequest对象 而不是表单 向服务器进行异步地图数据请求 从而实现了页面的部分更新 同时减少了网络的延迟 因而有更好的用户体验 3 利用来组织地图 并进行地图交互 从而可以实现一些特殊的效果如拉框放大 平移等地图交互功能 4 利用客户端JavaScript来控制系统交互的流程 地图视图设计 地图视图设计 代码示例 你好 AJAX地图全图放大缩小漫游 定义地图的外观 部分样式 以下css只定义了部分内容 mapview width 610px height 400px position relative margin autoauto overflow hidden border ccaa881pxsolid basemap position absolute top 0px left 0px z index 1 rubble overflow hidden filter Alpha opacity 50 opacity 0 50 moz Opacity 0 50 visibility hidden display inline block mapImage position absolute 详细代码及说明请参考教材和实习光盘 地图交互流程 客户端地图交互的内容包括用户选择地图工具如放大 缩小和平移等 用户在地图上用相应的工具进行放大 缩小和平移操作如拉框放大 拉框缩小和拖动地图等 客户端地图交互的主要流程如图所示 地图交互流程 初始化地图 当客户第一次载入地图时 调用init 方法初始化地图 这里定义全局变量functioninit varmapview document getElementById mapview rubble document getElementById rubble mapImage document getElementById mapImage mapview onmousedown MouseDownEvt mapview onmousemove MouseMoveEvt mapview onmouseup MouseUpEvt setMapTool ZoomAll window onload init 地图交互流程 设置地图工具 当用户选择地图工具按钮时 调用setMapTool 函数 setMapTool 的一个主要功能是给全局变量curTool赋值 同时修改鼠标光标的样式 以用于后续的拉框缩放或平移地图等操作 functionsetMapTool value if value value ZoomAll curtool value toLowerCase switch curtool case zoomin case zoomout basemap style cursor crosshair break case pan basemap style cursor move break case zoomall basemap style cursor default RequestMap break default basemap style cursor default document getElementById tooltip innerHTML 当前地图工具 value 地图交互设计 MouseDown 缩放和拖动地图涉及到三个鼠标事件 MouseDown MouseMove和MouseUp 在MouseDown事件中记下了一些很必要的初始状态 包括 1 鼠标的位置startX和startY 2 橡皮拉框 rubbleDiv 用来进行拉框缩放地图 的初始位置rblLeft和rblTop 3 地图图片的初始位置imgLeft和imgTop以及地图视图的位置等 地图交互设计 MouseDown functionMouseDownEvt event startX event clientX startY event clientY rblLeft event offsetX rblTop event offsetY imgTop delPx mapImage style top imgLeft delPx mapImage style left mapViewLeft event clientX event offsetX document body scrollLeft mapViewTop event clientY event offsetY document body scrollTop if curtool pan dragging trueelseif curtool zoomin curtool zoomout zooming true 地图交互设计 MouseMove 在MouseMove事件中 我们先判断当前鼠标位置是否超出地图视图的边界 然后我们计算相对于MouseDown事件的鼠标的偏移量 dltx event clientX startX dlty event clientY startY 如果是平移地图操作 则根据鼠标的偏移量修改地图图片的当前位置 从而实现图片的移动效果 mapImg top imgTop dlty mapImg left imgLeft dltx 如果是拉框缩放地图操作 我们需要修改rubbleDiv的位置和大小属性 地图交互设计 MouseUp 鼠标弹起时 我们要做两件事 一件事是结束当前对地图的平移或拉框缩放操作 另一件事是根据操作结果请求地图 对于第一件事件我们通过设置两个状态变量的值为false即可 dragging false zooming false rubble style visibility hidden 第二件事我们通过调用RequestMap 函数来实现 另外还需要记下鼠标弹起时的坐标endX和endY 至此完成了一个完整的地图交互过程 地图的请求与响应 RequestMap 当用户完成地图的交互后就转入向服务器请求地图并处理请求结果的过程 这个过程由RequeMap 函数共同实现 RequestMap 先调用calcReqParams 函数收集和计算请求地图时相应的参数 然后后调用xhrRequest reqParams 向服务器请求地图 functionRequestMap varmapParams calcReqParams if mapParams xhrRequest mapParams 地图的请求与响应 reqParams mapTool curTool null 地图的请求与响应 xhrRequest functionxhrRequest reqParams varxhr getXMLHTTP if xhr varmapImg document getElementById mapImage xhr onreadystatechange function if xhr readyState 4 if xhr status 200 if mapImg mapImg src xhr responseText mapImg style left 0 mapImg style top 0 varstamp newDate getTime varmapURL mapsvr asp reqParams 地图的请求与响应 对服务器返回的结果的处理是通过onreadystatechange句柄实现 在该函数中 如果获取到服务器返回的地图图片 图片的URL包含在xhr的responseText中 就修改mapImg元素的URL xhr onreadystatechange function if xhr readyState 4 if xhr status 200 if mapImg mapImg src xhr responseText mapImg style left 0 mapImg style top 0 onreadystatechange AjaxMap示例 服务器端接口设计 服务器端代码与客户端代码是完全独立的 这意味着只要保持地图请求的参数形式不变 即接口不变 客户端代码的修改不会影响地图服务器的正确响应 Ajax地图的服务器端代码MapSvr asp与HelloMap asp相比主要作了以下修改 一是在调用流程中增加了一个向Web客户端返回地图图片的URL的语句Response Write getMapImage ifnotHasAMapObjthenInitMapEngineendififHasAMapObjthenAjustMapResponse Write getMapImage endif 服务器端接口 另外一个比较大的改动是对AjustMap 函数的修改 主要用来计算由拉框缩放或平移地图后地图的zoom值和中心点的坐标 基本原理如下 如果是拉框缩放地图操作 先获取 橡皮 框的中心点坐标 sx sy 以及高度和宽度 dlty dlyx 这些都是屏幕坐标 sx ScreenX1 ScreenX2 2sy ScreenY1 ScreenY2 2dltx ScreenX2 ScreenX1dlty ScreenY2 ScreenY1 服务器端接口 计算缩放比例 缩放比例的计算需要同时考虑橡皮框的宽度和高度与地图视图的宽度和高度的比值 原则是取比值较小的一个值 以避免过分放大或缩小地图而产生的意料之外的结果 nScale 1 0ifdltx 2thennscale abs mapWidth dltx ifdlty 2thenifabs 500 dlty nscalethennscale abs mapHight dlty endifendif如果是平移操作 需要先计算出平移后地图中心点的位置 屏幕坐标 sx mapWidth 2 dltx sy mapHeight 2 dlty 服务器端接口 AjustMap selectcasegetMapTool case zoomin Session MapObj screen2WorldExsx sy fMapX fMapYfNewZoom fZoom nScalecase zoomout Session MapObj screen2WorldExsx sy fMapX fMapYfNewZoom fZoom nScalecase pan Session MapObj screen2WorldExcx dltx cy dlty fMapX fMapYfNewZoom fZoomcaseelsefNewZoom fZoomendselect ifgetMapTool zoomall thenSession MapObj ZoomTofMapX fMapY fNewZoomelseSession MapObj ZoomTosession x0 session y0 session z0 endif 思考题 重新设计一个基于Ajax的Info查询其他技术Html5与Canvas使用Iframe或标签实现异步请求