webgis应用开发(附源码)

另辟渠道的webgis应用开发（附源码）

在用ARCIMS开发webgis中小型应用程序的时候,我相信很多人和我一样,就是如何将保存在简单数据库（如ACCESS）里的一些专题点信息该如何体现在地图上,这些点多则有3000,4000,另外还可通过地图操作（添加，平移）进行专题点编辑。如果直接用HTML VIEWER，这可是个不大不小的难题。一开始，我们使用了ACETATELAYER方式进行处理，效果不甚理想，在局域网中多用户并发访问时就有明显的速度瓶颈，更何况INTERNET上。

如下代码就是在此问题上做出的一种解决方案尝试，即部分地图信息客户端化。目前我正在开发，只是部分调试仅在局域网中通过，并没有完全成熟，在线面上还是处理开发阶段。现在介绍一下代码的基本思想，希望大家能够加以讨论。该代码使用JAVASCRIPT开发，它以基础图层地图图片为底图，在此之上进行图层扩展，客户端形成一套小型的webgis，与ARCIMS同步刷新，形成无缝整合，给人感觉就是一个整体的webgis系统。该代码在对象层次关系上模拟ACTIVEX CONNECTOR的重点对象。通过不同refres h函数与基础图层同步更新（为提高客户端速度，开放了很多refresh方式，即只refresh发生改变的对象坐标位置，当然放大缩小平移之类的操作就需要整个客户端refresh，因为每个点都发生了位置变化）。之所以如此层次化，一方面是为了增强代码的可读性和可维护性，另一方面通过封装具体VML代码实现来简化开发过程。这样一来，可以大大减轻服务端的处理，客户端和服务端同时处理，提高地图的运行速度。

我想重点说明的是，如果将部分地图信息移到客户端，必然需要自主开发一些原本集成好的功能（比如说在FeatureLayer中的WHEREEXPRESSION,BUFFER等功能）用于客户端。以BUFFER为例，圆形如何画，必然是vml的oval，可以把它作为一个特殊地图图层来看待，它是一个圆，而不是点，线，区(折线)，这就是图层类型扩展。同样的道理还用在监控（关于监控的需求可查看/bbs/disp bbs.asp?BoardID=23&ID=14998），它是一种特殊的点层，它具体表现内容更丰富，所以也可以把它看成一种图层类型。

当然，之所以费尽心思放在客户端做，还有个很重要的目的就是为了解决地图特殊信息的可编辑。首先说明，此方法对基础图层的属性是无能为力的，它仅是用于在客户端生成的专题信息。

以本代码为例，客户端添加一个新点则需要先在相关对象中add，还需要通过数据库的方式将点保存。如果移动某客户端生成点，则显示客户端的移动过程，然后更改该对象的left和top到XY即可。另外要注意的是，客户端gismap对象中的所有涉及点的坐标都是地图坐标，所以经常需要屏幕坐标和地图坐标之间的转换，以前我说过，现在就不多说了，代码也体现比较明显。

以下是未完成代码的详细内容，以后会将很多实现补充上来，希望给有此需求的人员带来启示，并欢迎大家跟贴讨论，恭请候教。

function GisMap()

{

var i ;

this.control = drawonmap ; //控件名称

this.visible = true ; //是否显示

this.mapXMin = 0 ; //地图最小X

this.mapYMin = 0 ; //地图最小Y

this.mapXMax = 0 ; //地图最大X

this.mapYMax = 0 ; //地图最大Y

yers = new Layers() ; //图层集合对象

///返回含屏幕坐标的point对象

this.fromMapPoint=function(mapX,mapY)

{

var point = new PointObject() ;

point.x = getJX(mapX) ;

point.y = getWY(mapY) ;

return point ;

};

///返回含地图坐标的point对象

this.toMapPoint=function(screenX,screenY)

{

var point = new PointObject() ;

point.x = getScrX(screenX) ;

point.y = getScrY(screenY) ;

return point ;

};

//获得地图坐标

function getJX(scrX)

{

return (this.mapXMin+parseInt(scrX)/(document.body.clientWidth/(this.mapXMax - this.mapXMi n)));

}

function getWY(scrY)

{

return (this.mapYMax-parseInt(scrY)/(document.body.clientHeight/(this.mapYMax-this.mapYMin))); }

//获得屏幕坐标

function getScrX(mapX)

{

return (mapX - this.mapXMin) * document.body.clientWidth/(this.mapXMax-this.mapXMin) ;

}

function getScrY(mapY)

{

return (this.mapYMax - mapY) * document.body.clientHeight/(this.mapYMax-this.mapYMin) ;

}

///画图

///在不同环境下可更改此函数的实现

this.draw=function()

{

for (i=1;i

{

this.drawLayer(yers.item(i)) ;

//this.control.innerHTML = this.stringBuilder.toString() ;

}

};

///绘制指定层

this.drawLayer=function(layerObject)