资源描述:
《mapeasy中ajax技术的应用》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、Mapeasy中Ajax技术的应用
Mapeasy中Ajax技术的应用
关键词:MAPEASY;瓦片预生成技术;Ajax技术;xmlhttprequest对象
摘要:基于瓦片预生成技术和AJAX技术的GOOGLE地图服务在电子地图技术的实现领域带来了新的活力。Mapeasy是一个应用这两种技术实现电子地图的客户端JS开源类库,Mapeasy本身与后台数据库无关,本文主要介绍了在Mapeasy中应用AJAX技术的Xmlhttprequest对象实现异步数据请求的过程。
2、R> 一、引言
目前,电子地图的兴起和发展,特别是随着互联网的迅速发展和普及,GIS和INTERNET的结合(WEBGIS),让电子地图作为一种工具,与其他产业的发展应用相结合,已经成为人们一个常用工具。
说到WEBGIS,不得不想到以提供网络搜索服务为主的GOOGLE公司推出的地图服务GOOGLEMAPS和GOOGLEEARTH。它们的出现标志着互联网地图服务的兴起,其应用的地图瓦片预生成技术和Ajax技术相结合的网络地图模式,有效地减轻了服务器端的负载。鉴于这种模式的成功,出现了许多
3、比较优秀的类似技术的网络地图开源类库,比较著名的有Mapeasy,Openlayers。下面简单的介绍下Mapeasy。
二、Mapeasy
Mapeasy是一个基于地图瓦片预生成技术和AJAX技术的JS开源类库。严格地说来,它是一个网络地图客户端的应用程序接口,类似于GoogleMapAPI,能够简化基础网络地图的实现。并且它独立于具体的GIS技术和规范,还支持多种图片格式,并具有一些常规的GIS功能,如:定位,比例尺,标注等。它是一个纯粹的客户端JS库,不需要在客户端使用任何插件,并且
4、与后台数据的获取方式完全分离,因此可以在服务器端放置简单的图片,也可以在后台架构专业地图服务器(MapX,GeoServer等),更加易于各种环境下的部署和扩展。虽然是完全运用弱类型语言JavaScript编写的,但具有良好的面向对象方法设计和模式。
三、瓦片预生成技术
瓦片预生成技术的原理是预先将地图设定为多个比例尺,对每个比例尺提前将地图分成若干小图片(称为瓦片tile),预存在服务器上,瓦片是像素大小相同的图片。比如:在第一级比例尺上,是一个瓦片,而到了第二级就裂变成了四个瓦片,地图
5、放大一个固定比例,到第三级就裂变为十六个瓦片。依次类推,每放大一个级别上级的一个瓦片就裂变为四个,这样就构成了地图瓦片的金字塔模型。客户端通过计算电子地图显示区内的坐标范围和比例尺大小来索引合适的瓦片,把这些瓦片从服务器端下载到客户端拼接成无缝的电子地图显示出来。
四、Ajax技术的应用
(一)Ajax技术的概述
Ajax是AsynchronousJavaScriptAndXML的缩写,它并不是一门新的语言或技术,而是几项技术新的组合。
Ajax技术主要的功能和特点:<
6、BR> 1.使用了xmlhttprequest对象进行异步数据的读取。
2.使用documentobjectmodel(DOM)实现动态显示和交互。
3.使用xml和xstl进行数据的交换处理。
4.使用xhtml和css呈现标准化。
5.使用javascript对以上的技术进行数据的绑定处理。
Ajax最大的特点是使用了xmlhttprequest对象实现了服务器端和用户端的异步数据响应,改变了传统WEBGIS以提交表单的形式实现客户端和服务器端的同步。<
7、BR> (二)mapeasy中xmlhttprequest对象实现数据异步存取
在mapeasy中,应用Ajax技术的xmlhttprequest对象建立与后台数据库连接的步骤:
1.申请一个新的xmlhttprequest对象。
varrequest=newXMLHttpRequest();
2.xmlhttprequest对象向数据库发送数据请求。
this.getMarkerInfo=function(){//向服务器中的MarkerInfo.aspx
8、发出数据请求
varurl="MarkerInfo.aspx?";//给出数据的url
request.open("GET",url,true);//建立服务器的异步数据请求,第三个参数为true表示异步数据请求
request.onreadystatechange=this.updateMarkerInfo;//指定回调的方法
request.send(nu