jQuery集成多源地图服务进行线缓冲区分析

jQuery集成多源地图服务进行线缓冲区分析

董志

1引言

当今，互联网资源丰富，有许多WebGIS开发商在Internet 上提供了地图服务，这些地图服务特点各异、各有千秋。WebGIS的开发者可以利用这些网络地图资源，将它们进行集成，从而实现各种基于Web的GIS应用。本文所实现的方法是基于jQuery框架，利用本地Web Services，集成Google Maps与MapABC地图服务进行线缓冲区分析，查询缓冲区内的POI(Point of Interest，即兴趣点)。本地Web Services负责缓冲区边界的生成，Google Maps地图服务负责地址解析与半径的地理坐标长度比计算，MapABC地图服务负责提供地理信息的可视化表达和缓冲区多边形内的POI查询;而jQuery框架将这些服务串联，并将分析结果用数据列表的形式呈现出来，设计思路如图1所示。

以下分别简单介绍一下jQuery、Google Maps API、MapABC API与缓冲区分析。

jQuery是一个快速、简单的JavaScript library，是轻量级的JS库（比ExtJS轻）。它简化了Web开发的事件处理、动画、Ajax互动，兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+, Safari2.0+,Opera9.0+），从而方便了Web应用的开发。jQuery 能够使用较少的代码实现更多的功能。

Google Maps API是Google提供的一组电子地图服务，用户可通过这些服务将地图、地址解析和其他来自Google的内容加入到应用的网页中。

MapABC API也是一组地图功能服务（注册后使用），由北京图盟科技有限公司发布，提供了丰富的地图API和搜索API，其中地图API采用Flash地图展现，为用户封装了JavaScript地图调用接口，能够在HTML中方便地构建Flash地图应用；而搜索API是基于JavaScript的地图数据检索计算接口，所有搜索结果都可以展现在Flash地图上。开发者可以根据自己的技术架构进行选择，创建各种地图应用。

缓冲区分析属于地理信息空间几何关系分析，地理信息空间几何关系分析主要包括邻近度(proximity)分析、叠加分析、网络分析等。缓冲区分析是邻近度分析的一种。缓冲区是

摘要：介绍了利用本地Web Services通过jQuery集成互联网地图服务，实现地理空间线缓冲区分析功能。利用jQuery装载MapABC地图数据，使用户在Web环境的电子地图中进行缓冲区中心线的绘制，调用Google Maps API接口计算缓冲区半径，将参数传入到Web Services生成缓冲区边界坐标，根据生成的边界坐标向MapABC Map服务获取POI数据并装载到jQuery UI的DataGrid组件中去。

关键词：jQuery框架；MapABC API地图数据；Google Maps API接口；地图服务组合；空间分析；线缓冲区分析

图1技术路线图2城市择房的交通噪音分析

为了识别某一地理实体或空间物体对其周围地物的影响度而在其周围建立具有一定宽度的带状区域，可应用到道路、河流、环境污染源、居民点、辐射源等的空间分析，为某种应用目的提供科学依据，另外，结合不同的专业模型，可以在生活、军事、城乡规划等领域发挥重要的作用。例如，要分析因道路拓宽而需拆除的建筑物和需搬迁的居民，需进行线缓冲区分析;如在城市进行择房，进行交通噪音情况的线缓冲区分析（购房的房间离主要交通要道200m之外，可以减少噪音污染，如图2所示）。

为了保证程序中地图数据的现势性，Web程序中使用的是在线地图数据和POI数据，数据获取于MapABC服务；程序也使用到了Google Map API的远程电子地图服务接口；线缓冲区边界坐标串的生成由本地服务器的Web Services完成，程序流程如图3所示。2本地服务器端线缓冲区边界的生成

基于线要素的缓冲区，通常是以线为中心轴线，距中心轴线一定距离的平行条带多边形。对于一个给定的对象A，它的缓冲区可以定义为：P={x|d(x,A)<=r}（d一般是指欧式距离，也可以是其他的距离，其中r为邻域半径或缓冲区建立的条件，如图4所示）。

本程序的线缓冲区边界方法是凸角圆弧法，其顾名思义，即是在转角外侧用圆弧来代替尖角，内侧仍然使用尖角的方法，生成缓冲区主要步骤：（1）直线性判断，判断相邻3点是否在同一直线上；（2）折点凸凹性判断，确定转角的地方哪侧使用直线求交，哪侧使用圆弧连接；（3）凸点圆弧的嵌入，即将转角外侧形成的圆弧和两边的线段相连，内侧则用尖角联接。在实现本算法的关键点是判断特征点的凸凹性，实质是判断矢量的方向问题。文中的线缓冲区边界算法根据文献3进行了改写和部分代码的修正而实现。

2.1矢量数学计算方法

public class MathTool

{

public static double GetQuadrantAngle(double px2, double px1,double py2,double py1)

{

//获取由两个点所形成的向量的象限角度

double x=px2-px1;

double y=py2-py1;

double theta=Math.Atan(y/x);

if(x>0&&y>0)return theta;

if(x>0&&y<0)return Math.PI*2+theta;

if(x<0&&y>0)return theta+Math.PI;

if(x<0&&y<0)return theta+Math.PI;

//注意两点可能在数轴上的情况处理

if(x==0&&y>0)return Math.PI/2;

if(x<0&&y==0)return Math.PI;

if(x==0&&y<0)return Math.PI*3/2;

if(x>0&&y==0)return0;

return theta;

}

public static double GetQuadrantAngle(Coordinate pointA,Coordinate pointB)

{

return MathTool.GetQuadrantAngle(pointB.x,pointA. x,pointB.y,pointA.y);

}

public static double GetIncludedAngel(Coordinate pointA,Coordinate pointB,Coordinate pointC)

{//获取由相邻的三个点所形成的两个向量之间的夹角double x1=pointA.x;

double x2=pointB.x;

double x3=pointC.x;

构造Jquery UI框架

开始

集成调用Google Map和MapABC 接口加载地图

根据用户操作向电子地图添加polyLine对象

响应ADD_OVERLAY 事件，收集多边形点信

根据多边开空间信息调用Google Map 服务接口计算经纬度长度比

根据经纬坐标及转换后经纬度距离调用缓冲区加界生成Webservice

根据缓冲区边界调用MapABC多边形查询服务搜索区域内POI

是否查询到

POI结果

是

否

根据查询结果解析

成JSON对象，并创

建Marker对象添加

到地图中

根据JSON对象创建JQuery的dataGrid对象的查询结果列表

结束

图3线缓冲区分析程序的流程图图4线缓冲区的定义

double y1=pointA.y;

double y2=pointB.y;

double y3=pointC.y;

double innerProduct=(x2-x1)*(x3-x2)+(y2-y1)*(y3-y2);

double mode1=Math.Sqrt(Math.Pow((x2-x1), 2.0)+Math.Pow((y2-y1),2.0));

double mode2=Math.Sqrt(Math.Pow((x3-x2), 2.0)+Math.Pow((y3-y2),2.0));

return Math.Acos(innerProduct/(mode1*mode2));

}

}

public class PointBuffer

{

public static string GetBufferEdgeCoords(Coordinate pointA,double radius)

{//根据线上的点及缓冲半径产生点缓冲区

double x0=pointA.x;

double y0=pointA.y;

string sufferResult="";

double xx=pointA.x+radius;

double yy=pointA.y;

int n=12;

double step=Math.PI/12;

for(int i=0;i

{

double xa=x0+radius*Math.Cos(i*step);

double ya=y0+radius*Math.Sin(i*step);

if(sufferResult.Length>0)

{

sufferResult+=","+xa.ToString()+","+ya.ToString();

}

else

{

sufferResult=xa.ToString()+","+ya.ToString();

}

}

return sufferResult;

}

}

}

2.2缓冲区生成主程序

[WebMethod]

public string GetBuffer(string coords,string radius)

{

return PolylineBuffer.GetBufferEdgeCoords(coords,radius);

}

……

public class PolylineBuffer

{

public static string GetBufferEdgeCoords(string strPolyLineCoords,string radius)

{

return GetBufferEdgeCoords(strPolyLineCoords, Convert.ToDouble(radius));

}

///

///根据给定的一系列有顺序的坐标，逆时针生成缓///冲区的边界坐标。

///

///一系列有顺///序的坐标

///缓冲区半径

///缓冲区的边界坐标

public static string GetBufferEdgeCoords(string strPolyLineCoords,double radius)

{

//参数处理

if(strPolyLineCoords.Trim().Length<1)return"";

string[]strCoords=strPolyLineCoords.Split(',');

Listcoords=new List();

for(int i=0;i

{

coords.Add(new Coordinate(strCoords[i],strCoords[i+1]));

i++;

}

//分别生成左侧和右侧的缓冲区边界点坐标串string leftBufferCoords=GetLeftBufferEdgeCoords (coords,radius);

coords.Reverse();

string rightBufferCoords=GetLeftBufferEdgeCoords (coords,radius);

return""+leftBufferCoords+","+ rightBufferCoords+"";

}

……

3客户端jQuery的初始化

jQuery的特点或者说是优点有许多，例如：提供强大的功能函数，使代码简洁；解决跨浏览器问题；友好的UI界面与特效，如渐变弹出,图层移动等动画效果如此等等。在本程序客户端的地图数据交互代码的实现中，会体现这些优点。

要在网页上显示MapABC地图，必须在html网页中为地图留出一个容器。在本程序中，创建一个id为“map_canvas”的div 元素，而这个div元素也是基于jQuery框架的。html如下所示：

空间分析之缓冲区分析

缓冲半径: 米

画线并进行缓冲区分析

window.onload=function(){

window.moveTo(0,0);

window.resizeTo(screen.availWidth,screen.availHeight);

}

jQuery在html文档就绪时的入口函数如下：

$(function(){

setPageLayout();//设置界面

bindEvent();//捆绑事件

loadMap();//根据Google Map API解析地址装载

//MapABC地图

createResultWindow();//创建jQuery的DataGrid对象})

函数setPageLayout功能为设置界面，程序用到了jQuery

的选择器。在Dom编程中开发者使用有限的函数根据id或者TagName获取Dom对象，而在jQuery中则完全不同，jQuery 提供了异常强大的选择器用来帮助开发者获取页面上的对象,并且将对象以jQuery包装集的形式返回。本程序中常用选择器有3种：元素选择器,如$('#map-layout');jQuery属性选择器,如$("div[region='north']");jQuery CSS选择器,如$("div [region='east']").css("background-color",$("div[region= 'center']").css("background-color"))，该函数具体代码如下：function setPageLayout(){

$('#map-layout').layout();//布局

$("div[region='north']:first-child").css("text-align"," center").css("vertical-align","middle");

$("div[region='north']").css("text-align","center").css(" vertical-align","middle");

//去掉文本框的边框

var inputObj=$('#searchTable');

inputObj.css('border-width','0');

//设置文本框中字体的大小

inputObj.css("font-size","16px");

var panelSearch=$("#panelSearch");

$("div[region='north']").css("background-color",$("div [region='center']").css("background-color"));

$("div[region='east']").css("background-color",$("div [region='center']").css("background-color"))

.css("right",$("#searchTable").width());

$("#panelSearch").width($("#searchTable").width())

.css("right",$("#searchTable").width());

$("#btnEp").attr("icon","icon-ok")

$('#map-layout').layout("collapse","east");

}

函数bindEvent功能为设置在电子地图上进行画折线操作：function bindEvent(){

$("#btnEp").click(function(){drawLine();});//设置画折//线操作

}

函数loadMap功能为利用MapABC API将地图服务装载到“map_canvas”，在装载前使用google.maps.Geocoder对地址进行解析，得到坐标后初始化地图，具体代码如下：

function loadMap(){

var geocoder=new google.maps.Geocoder();

geocoder.geocode({'address':"武汉光谷广场"},function (results,status){

if(status==google.maps.GeocoderStatus.OK){

var mapOptions=new MMapOptions();//构建地图辅助类mapOptions.zoom=14;//要加载的地图的缩放级别mapOptions.toolbar=DEFAULT;//设置地图初始化工具条mapOptions.toolbarPos=new MPoint(15,15);

//设置工具条在地图上的显示位置

mapOptions.center=new MLngLat(results[0]. geometry.location.lng(),results[0]https://www.360docs.net/doc/a07153244.html,t());

//要加载的地图的中心点经纬度坐标

mapOptions.overviewMap=HIDE;//设置鹰眼地//图的状态，SHOW:显示，HIDE:隐藏（默认）

mapOptions.scale=SHOW;//设置地图初始化比

//例尺状态，SHOW:显示（默认），HIDE:隐藏。

mapOptions.returnCoordType=COORD_ TYPE_OFFSET;//返回数字坐标

mapOptions.zoomBox=true;

//鼠标滚轮缩放和双击放大时是否有红框动画效果。

mapObj=new MMap("map_canvas", mapOptions);//地图初始化

mapObj.addEventListener(mapObj,ADD_OVERLAY, addOverlayEvent);

}

else{

alert(str+"无法解析地址");

}

});

}

以上函数loadMap使用了google.maps中的Geocoder对象进行了“武汉光谷广场”的地址解析，以便确定电子地图的中心位置。

$(function(){})在远程调用google Map与MapABC的服务装入地图数据的同时，还同时进行了jQuery框架的构建、调整了线缓冲区分析主界面，并捆绑了相应的响应事件，主函数运行后效果如图5所示。

4jQuery AJAX调用地图服务及地图数据的表示

本程序需要用户基于网络电子地图进行缓冲区中心线及缓冲半径的输入，得到参数以调用本地服务生成缓冲区边界坐标串，然后根据边界坐标串调用MapABC的多边形查询接口，将查询到的POI结果装载到jQuery UI的DataGrid控件中。

响应“画线”按钮事件，进行画中心线操作，并得到折线坐标串：

//响应按钮事件

function drawLine(){

mapObj.removeOverlaysByType(MOverlay.TYPE_ POLYGON);

mapObj.removeOverlaysByType(MOverlay.TYPE_MARKER);

radius=$("#txtSufferDistancePanel").val();

mapObj.setCurrentMouseTool(DRAW_LINE);

addOverlayEventParam=null;

isEdit=1;

if($('#drawInfo').length<=0){

$("div[region='north']").append("在地图双击左键结束画线，陏后开始进行缓冲区查询（沿着道路中心线两侧POI较多）。");//动态创建提示信息

}

}

//响应添加polyLine事件

function addOverlayEvent(param){

if(isEdit==0)

return;

if(param==null||param==""){

$.messager.alert('警告对话框','请完成画线!在地图上双击即可结束画线。','warning');

}

if(radius==null||radius==""){

$.messager.confirm('Confirm','缓冲半径为0，是否设置缓冲半径?',function(r){

if(r){

$("#txtSufferDistancePanel").focus();

}

});

}

//获取中心线并进行坐标获取

var overlayPolygon=mapObj.getOverlayById(param.overlayId);

if(overlayPolygon.TYPE=="Polyline"){

mapObj.removeOverlayById(regionId);

regionId=param.overlayId;

var coords="";

for(var i=0;i

if(coords.length<=0){

coords=overlayPolygon.lnglatArr[i].lngX+"," +overlayPolygon.lnglatArr[i].latY;

}

else{

coords+=","+overlayPolygon.lnglatArr[i]. lngX+","+overlayPolygon.lnglatArr[i].latY;

}

}

mapObj.setCurrentMouseTool(MConstants.

PAN_WHEELZOOM);

isEdit=0;

dealLineBuffer(coords,radius);

}

}

接下来整理中心线坐标，利用google Map服务计算经纬度的半径距离，得到这两个参数后使用jQuery Ajax调用本地服务资源，代码如下：

//通过google.maps.geometry接口获取的地图长度坐标比function dealLineBuffer(coords,radius){

图5jQuery的Layout对象加载MapABC地图数据

var points=coords.split(",");

var x1,y1,x2,y2;

for(var i=0;i

if(points[i+1]&&points[i+2]&&points[i+3])

if(Math.abs(points[i+2]-points[i])>

0.000000001&&Math.abs(points[i+3]-points[i+1])> 0.000000001){

x1=points[i];

y1=points[i+1];

x2=points[i+2];

y2=points[i+3];

break;

}

}

if(x1&&y1&&x2&&y2){

var destinationA=new https://www.360docs.net/doc/a07153244.html,tLng(y1,x1);

var destinationB=new https://www.360docs.net/doc/a07153244.html,tLng(y2,x2);

var templateDistance=google.maps. https://www.360docs.net/doc/a07153244.html,puteDistanceBetween(destinationA, destinationB);

var latlngDist=Math.sqrt(Math.pow((points[0]-points[2]),2)+Math.pow((points[1]-points[3]),2));

var k=templateDistance/latlngDist;

radius=radius/k;

getLineBuffer(coords,radius);

}

}

//根据中心线调用本地服务产生缓冲区边界

function getLineBuffer(coords,radius){

var serverUrl="WebService.asmx/";

var url=serverUrl+"GetBuffer";

xmlPara="coords="+coords+"&radius="+radius;

$.ajax({

type:"POST",

url:url,

data:xmlPara,

success:function(result){

mapObj.setCurrentMouseTool(PAN_WHEELZOOM);

docSubmit=new ActiveXObject("Microsoft. XMLDOM");

docSubmit.async=false;

docSubmit.loadXML(result.xml.replace(/</g,"<"). replace(/>/g,">"));

var lineBuffer=docSubmit.documentElement. getElementsByTagName("lineBuffer");

var lineSufferPoints=lineBuffer[0].childNodes[0].text;

var resultlineBuffer=new geoElement();;

https://www.360docs.net/doc/a07153244.html,="缓冲面";

resultlineBuffer.coords=lineSufferPoints;

resultlineBuffer.type=2;

ElementToMap(resultlineBuffer,true,2);

getPOIbyLineBuffer(lineSufferPoints);

bufferCoords=lineSufferPoints;

}

});

}

//将生成的缓冲区多边形添加到地图中

function ElementToMap(geoElement,changeCenter,index) {

mapObj.removeOverlaysByType(MOverlay. TYPE_POLYGON);

var arr=new Array();//由多边形顶点组成的经纬度数组

var points=geoElement.coords.split(",");

for(i=0;i

arr.push(new MLngLat(points[i++],points[i++]));

var linestyle=new MLineStyle();//创建线样式对象

linestyle.thickness=3;//线的粗细度，默认为2

linestyle.color=0x0000ff;//线的颜色，16进制整数，默认//为0x005890（蓝色）

var fillstyle=new MFillStyle();//创建填充样式对象

fillstyle.color=0xf5deb3;//面的填充颜色，16进制整数。

fillstyle.alpha=0.5;//填充面的透明度，范围0~1，0为透//明，1为不透明（默认）

var areastyle=new MAreaStyle();//创建面样式对象

areastyle.borderStyle=linestyle;//面的边框风格。

areastyle.fillStyle=fillstyle;//面的填充风格。

var tipoption=new MTipOptions();//添加信息窗口

tipoption.title="信息窗口标题";//信息窗口标题

tipoption.content="信息窗口内容";//信息窗口内容

var labeloption=new MLabelOptions();//添加标注

labeloption.content="缓冲区多边形";//标注的内容

//设置标注左上角相对于面对象中心的锚点。标注左上角//与面对象中心重合时，像素坐标原点(0,0)

https://www.360docs.net/doc/a07153244.html,belPosition=new MPoint(10,10);

var areaopt=new MAreaOptions();//构建一个名为//areopt的面选项对象。

areaopt.areaStyle=areastyle;//设置面的风格areaopt.tipOption=tipoption;//设置面的信息窗口参数选项areaopt.canShowTip=true;//设置面是否显示信息窗口

areaopt.isEditable=false;//设置面是否为可编辑状态，//true，可编辑；false，不可编辑（默认）

https://www.360docs.net/doc/a07153244.html,belOption=labeloption;//设置面的标注选项参数var polygon=new MPolygon(arr,areaopt);//通过经纬度数//组及参数选项构建多边形对象

mapObj.addOverlay(polygon,true);//向地图添加覆盖物}

程序将得到的缓冲区多边形边界传入MapABC的MPoiSearch

服务接口查询缓冲区内的POI，在获取POI后根据查询结果创

建JSON对象供DataGrid使用，并在地图上显示POI（如图6

所示）。具体代码如下：

//通过远程MapABC服务查询缓冲区边界内的POI

var recordsPerPage=20;//每页显示的POI数量

var pageNum=1;//当前页号

function getPOIbyLineBuffer(coords){

var MSearch=new MPoiSearch();

var opt=new MPoiSearchOptions();

if(pageNum==null)

pageNum=1;

opt.recordsPerPage=recordsPerPage;//每页返回数据//量，默认为10

opt.pageNum=pageNum;//当前页数。

opt.dataType="";//数据类别，该处为分词查询，只需要相//关行业关键字即可

opt.dataSources=DS_BASE_ENPOI;//数据源，基础+企//业地标数据库（默认）

var arr1=coords.split(",");

var arr=new Array();

for(var i=0;i<=arr1.length-2;){

var mll=new MLngLat(arr1[i],arr1[i+1]);

arr.push(mll);

i=i+2;

}

var multiXY=new MLngLats(arr);

MSearch.setCallbackFunction

(searchSearchresult_CallBack);//设置回调函数

MSearch.poiSearchByRegion(MOverlay.TYPE_POLYGON, multiXY,"",opt);//传递参数并查询多边形面内POI

showCue();

}

//回调函数-①根据返回结果生成JSON字符串；②在地图上//创建Marker.

function searchSearchresult_CallBack(data){

var resultStr="";

mapObj.setCurrentMouseTool(PAN_WHEELZOOM);

mapObj.removeOverlaysByType(MOverlay. TYPE_MARKER);

if(data.error_message!=null){

resultStr="查询异常！"+data.error_message;

}else{

switch(data.message){

case'ok':

if(data.searchresult.list){

var datagrid_data_json="{'total':"+data. searchresult.count+",'rows':[";

var rowsData="";

var marker=new Array();

resultCount=data.searchresult.list.length;

for(var i=0;i

markerOption.imageUrl="http://code. https://www.360docs.net/doc/a07153244.html,/images/lan_1.png";

var tipOption=new MTipOptions(); tipOption.title=(i+1)+"."+data.searchresult.list[i].name;

var tipC="
"+TipContents(data. searchresult.list[i].type,data.searchresult.list[i].address,data. searchresult.list[i].tel)

tipOption.content=tipC;//tip内容

tipOption.borderStyle.thickness=2;

tipOption.borderStyle.color=0x005cb5;

tipOption.borderStyle.alpha=1;

https://www.360docs.net/doc/a07153244.html,="Arial";

tipOption.titleFontStyle.size=12;

tipOption.titleFontStyle.color=0xffffff;

tipOption.titleFontStyle.bold=true;

https://www.360docs.net/doc/a07153244.html,="Arial";

tipOption.contentFontStyle.size=13;

tipOption.contentFontStyle.color=0x000000;

tipOption.contentFontStyle.bold=false;

tipOption.fillStyle.color=0xFFFFFF;//填充色

tipOption.fillStyle.alpha=1;

tipOption.titleFillStyle.color=0x005cb5;

tipOption.titleFillStyle.alpha=1;

markerOption.tipOption=tipOption;

markerOption.canShowTip=true;//创建marker对象

var mar=new MMarker(new MLngLat(data. searchresult.list[i].x,data.searchresult.list[i].y),markerOption);

mar.id=(i);

marker.push(mar);if(rowsData.length>0){

rowsData+=",";

}//1.根据返回结果生成JSON字符串

rowsData+="{'itemIndex':'"+(i+1)+" ','name':'"+data.searchresult.list[i].name.replace(/\'/g,"\\\'")+ "','city':'"+data.searchresult.list[i].citycode+"','address':'"+ data.searchresult.list[i].address+"','tel':'"+data. searchresult.list[i].tel+"','type':'"+data.searchresult.list[i]. type+"','x':'"+data.searchresult.list[i].x+"','y':'"+data. searchresult.list[i].y+"'}";

}

mapObj.addOverlays(marker,true);//2.在地图上创建Marker

datagrid_data_json+=rowsData+"]}";

createGrid(eval('('+datagrid_data_json+') '),pageNum,recordsPerPage);//根据字符串生成JSON对象，//并传入createGrid函数创建jQuery的DataGrid对象

}

else{

if(data.searchresult.count>0)

$.messager.alert('远程服务提示','网络忙!请重新尝试','warning');

}

break;

case'error':

resultStr='网络忙!请重新尝试';

break;

default:

resultStr='网络忙!请重新尝试';

}

}

hideCue();

if(resultStr.length>0)

$.messager.alert('远程服务提示',resultStr,

'warning');

}

//进行提示

function showCue(){

if($('#waitInfo').length<=0){

$("body").append("

");

$('#waitInfo').window({

width:180,

shadow:true,

maximizable:false,

minimizable:false,

closed:false,

draggable:false,

resizable:false,

modal:false

});

$('#waitInfo').append("正在缓冲区内进行空间搜索！< img title='正在执行查询，请稍等...'alt='正在执行查询，请稍等...'src='images/loading.gif'style='margin:0auto;display: block'/>");

}

else{

$('#waitInfo').window('open');

$("#tt").css('opacity',0)

.animate({'opacity':'1'},400)

}

}

//关闭提示

function hideCue(){

$('#waitInfo').window('close');

}

最后将查询到POI结果装载到DataGrid,DataGrid装载的是JSON数据，其格式如下：

{'total':43,'rows':[{'itemIndex':'1','name':'武汉大学资源与环境科学院','city':'027','address':'','tel':'','type':'科教文化服务;学校;高等院校','x':'x1','y':'y1'},{'itemIndex':'2','name':'华中师范大学(东北门)','city':'027','address':'珞喻路152号',

'tel':'','type':'科教文化服务;学校;高等院校','x':'x2','y':'y2'}, {'itemIndex':'3',''itemIndex':'2','name':'武汉大学信息学部(北一门)','city':'027','address':'','tel':'','type':'科教文化服务;学校;高等院校','x':'x3','y':'y3'},{'itemIndex':'4','name':'石林东路','city':'027','address':'','tel':'','type':'地名地址信息;交通地名;道路名','x':'x4','y':'y4'},{'itemIndex':'5','name':'中国地质大学机械与电子工程研究所','city':'027','address':'','tel':'',

'type':'科教文化服务;科研机构;科研机构','x':'x5','y':'y5'}]}。

程序中使用DataGrid装载POI数据。DataGrid支持数据的列表展示，支持排序、分页、自定义按钮、远程数据和本地数据装载等等功能，界面友好，功能强大。在createGrid函数中，DataGrid分页由记录总数total、当前页号pageNumber、每页显示记录数据pageSizeCount确定，total由JSON数据包含，具体代码如下：

//根据查询POI结果创建DataGrid对象

function createGrid(datagrid_data_json,pageNumber Count,pageSizeCount){

$('#tt').datagrid({

title:'缓冲区查询结果',

width:$("#panelSearch").parent().parent().width(),

height:$("div[region='east']")[0].parentNode. offsetHeight-$("#searchTable")[0].offsetHeight,

singleSelect:true,

striped:true,

pagination:true,

pageNumber:pageNumberCount,//页号

pageSize:pageSizeCount,//每页POI显示数量

columns:[[

{field:'itemIndex',title:'序号',width:80}, {field:'name',title:'名称',width:80,resizable:true}, {field:'city',title:'城市',width:80,align:'right'},

{field:'address',title:'地址',width:80,align:'right'}, {field:'tel',title:'电话',width:100},

{field:'type',title:'类型',width:60}

]],

onClickRow:function(rowIndex,rowData){//单击//一行POI数据，则在地图上设POI位置为当前中心并显示信//息窗体。

var s=mapObj.setCenter(new MLngLat (rowData.x,rowData.y));

var t=mapObj.openOverlayTip(rowIndex);

},

left:$("div[region='east']")[0].parentNode.offsetLeft-10, top:$("div[region='east']")[0].parentNode.offsetTop +$("#searchTable")[0].offsetHeight+10

});

//设置分页控件

var p=$('#tt').datagrid('getPager');

$(p).pagination({

代码为https://www.360docs.net/doc/a07153244.html, 中的cs 代码如下：

Response.Write(str);

运行结果如图1所示。

5结语

位运算实现DHTMLX 框架中树控件的多选操作，也可以

运用到MFC 、JSP 、https://www.360docs.net/doc/a07153244.html, 、PHP 等其他平台或框架的树形控件的多选操作中，这样，极大地简化了代码量，提高了代码的执行效率，并且也方便了代码的操作。另外，位运算其强大的运算能力不仅仅应用于此，还可以应该于其他地方的多情况组合运算和其他操作。

（收稿日期：2012-04-24）

图1程序运行结果

pageList:[pageSizeCount],//可以设置每页记录条

//数的列表

beforePageText:'第',//页数文本框前显示的汉字afterPageText:'页共{pages}页',

displayMsg:'当前显示{from}-{to}条记录共

{total}条记录',

onBeforeRefresh:function (pageNumber,pageSize){

reFreshBufferPoi(pageNumber,pageSize);},

onSelectPage:function (pageNumber,pageSize){reFreshBufferPoi(pageNumber,pageSize);}});

$("#tt").datagrid('loadData',datagrid_data_json);$('#tt').show();$('#w').show();

$('#w').window('show');

$("#w").slideDown("slow");//动画效果特效

$("#tt").datagrid('loadData',datagrid_data_json)//装载数据

.css('opacity',0)

.animate({'opacity':'1'},400);//透明变化特效}

//响应Refresh 按钮事件，刷新数据

function reFreshBufferPoi(pageNumber,pageSize){$("#tt").empty();

pageselectCallback(pageNumber,pageSize);}

//响应pageselect 按钮事件，刷新数据

function pageselectCallback(pageNumber,pageSize){if (bufferCoords.length >0){recordsPerPage =pageSize;pageNum =pageNumber;

getPOIbyLineBuffer(bufferCoords,pageNum);}

return false;}

5运行效果

图7是jQuery 集成多源地图服务进行线缓冲区分析的实

验结果（POI 结果分页显示）。

6结语

利用jQuery 库、本地Web Services 、MapABC API 、Google

Maps API ，笔者完成了具有地理空间线缓冲区分析功能的WebGIS 程序。

通过程序的运行情况可以看出，集成互联网多种资源和服务作为实现地理信息应用的一个手段是可行的，也是方便的。笔者认为在实际运行中，集成多种地图服务应该能够提高

WebGIS 开发效率，有效地利用Web 资源。目前，这个程序只

是Internet 地图服务上的互相集成，以后可以深入到有关地理信息语义网的数据集成方面，加强对于地理本体方面的功能。

参考文献

[1]董志，邹文明.电子地图的多源数据导入与坐标地址的自

编辑[J].测绘信息与工程，2009，34（4）：50-51.

[2]董志.C#集成Google Map API 进行地理空间的定位[J].

电脑编程技巧与维护，2011，(19)：47-53.

[3]https://www.360docs.net/doc/a07153244.html,/longshaoye112358/article/details/5355417.

（收稿日期：2012-06-05）

图7线缓冲区分析程序运行效果

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

（上接第55页）