webgis应用开发(附源码).doc

另辟渠道的webgis应用开发（附源码）在用ARCIMS开发webgis中小型应用程序的时候,我相信很多人和我一样,就是如何将保存在简单数据库（如ACCESS）里的一些专题点信息该如何体现在地图上,这些点多则有3000,4000,另外还可通过地图操作（添加，平移）进行专题点编辑。如果直接用HTML VIEWER，这可是个不大不小的难题。一开始，我们使用了ACETATELAYER方式进行处理，效果不甚理想，在局域网中多用户并发访问时就有明显的速度瓶颈，更何况INTERNET上。如下代码就是在此问题上做出的一种解决方案尝试，即部分地图信息客户端化。目前我正在开发，只是部分调试仅在局域网中通过，并没有完全成熟，在线面上还是处理开发阶段。现在介绍一下代码的基本思想，希望大家能够加以讨论。该代码使用JAVASCRIPT开发，它以基础图层地图图片为底图，在此之上进行图层扩展，客户端形成一套小型的webgis，与ARCIMS同步刷新，形成无缝整合，给人感觉就是一个整体的webgis系统。该代码在对象层次关系上模拟ACTIVEX CONNECTOR的重点对象。通过不同refresh函数与基础图层同步更新（为提高客户端速度，开放了很多refresh方式，即只refresh发生改变的对象坐标位置，当然放大缩小平移之类的操作就需要整个客户端refresh，因为每个点都发生了位置变化）。之所以如此层次化，一方面是为了增强代码的可读性和可维护性，另一方面通过封装具体VML代码实现来简化开发过程。这样一来，可以大大减轻服务端的处理，客户端和服务端同时处理，提高地图的运行速度。我想重点说明的是，如果将部分地图信息移到客户端，必然需要自主开发一些原本集成好的功能（比如说在FeatureLayer中的WHEREEXPRESSION,BUFFER等功能）用于客户端。以BUFFER为例，圆形如何画，必然是vml的 oval，可以把它作为一个特殊地图图层来看待，它是一个圆，而不是点，线，区(折线)，这就是图层类型扩展。同样的道理还用在监控（关于监控的需求可查看/bbs/dispbbs.asp?BoardID=23&ID=14998），它是一种特殊的点层，它具体表现内容更丰富，所以也可以把它看成一种图层类型。当然，之所以费尽心思放在客户端做，还有个很重要的目的就是为了解决地图特殊信息的可编辑。首先说明，此方法对基础图层的属性是无能为力的，它仅是用于在客户端生成的专题信息。以本代码为例，客户端添加一个新点则需要先在相关对象中add，还需要通过数据库的方式将点保存。如果移动某客户端生成点，则显示客户端的移动过程，然后更改该对象的left和top到XY即可。另外要注意的是，客户端gismap对象中的所有涉及点的坐标都是地图坐标，所以经常需要屏幕坐标和地图坐标之间的转换，以前我说过，现在就不多说了，代码也体现比较明显。 以下是未完成代码的详细内容，以后会将很多实现补充上来，希望给有此需求的人员带来启示，并欢迎大家跟贴讨论，恭请候教。function GisMap()var i ;this.control = drawonmap ; /控件名称this.visible = true ;/是否显示this.mapXMin = 0 ;/地图最小Xthis.mapYMin = 0 ;/地图最小Ythis.mapXMax = 0 ;/地图最大Xthis.mapYMax = 0 ;/地图最大Ythis.layers = 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.mapXMin);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;ithis.layers.count+1;i+)this.drawLayer(this.layers.item(i) ;/this.control.innerHTML =this.stringBuilder.toString() ;/绘制指定层this.drawLayer=function(layerObject)switch (layerObject.type)case tail : drawTailLayer(layerObject) ; break;case denamic :drawDynamicLayer(this.control,layerObject) ;break; case point :drawPointLayer(this.control,layerObject) ;break; case line :break; case polygon :break; ;/绘制监控层function drawTailLayer(layerObject) var sHTML ; var tailObject = eval(div_tail) ; var arr0 ; for (i=1;ilayerObject.count+1;i+)sHTML = ;arr0 = layerObject.item(i).content.split(,) ;if (arr0.length0)sHTML+= ;sHTML+= ;sHTML+= ;sHTML+= ;sHTML+= ;sHTML+= ;for (j=0;jarr0.length;j+) sHTML+= + arr0j + ;sHTML+= ;sHTML+= ;sHTML+= ;sHTML+= ;tailObject.innerHTML+= sHTML ;/绘制点层function drawPointLayer(parentObject,layerObject) var i ; var oSB = new StringBuilder(); if (layerObject.symbol!=null) for (i=1;i=layerObject.count;i+) /oSB.append(setPointVML(layerObject.item(i),layerObject.symbol) ; setPointVML(parentObject,layerObject.item(i),layerObject.symbol) ; else for (i=1;i=layerObject.count;i+) /oSB.append(setPointVML (layerObject.item(i) ;setPointVML (layerObject.item(i) ; return oSB ; /绘制线层 function drawLineLayer(layerObject) for (i=0;ilayerObject.count;i+) if (layerObject.symbol!=null)else /绘制区层function drawPolygonLayer(layerObject)var sHTML ;for (i=0;ilayerObject.count;i+) if (layerObject.symbol!=null)else /绘制动态图层 function drawDynamicLayer(layerObject) var sHTML ; sHTML = ; for (i=0;ilayerObject.count;i+)if (layerObject.item(i).type = point) else if (layerObject.item(i).type = line) else if (layerObject.item(i).type = polygon) /客户端绘图更新/在此处,更新的含义更多体现为更改各要素在屏幕的坐标,即left和topthis.refresh=function() var obj ; var i,j ; for (i=1;ithis.layers.count+1;i+)switch (this.layers.item(i).type) case tail:for (j=1;jthis.layers.item(i).count+1;j+) /alert(i + , + j) ; obj = eval(this.layers.item(i).item(j).id) ;obj.style.left = getScrX(this.layers.item(i).item(j).x) ;/alert(i+& + j + : + this.layers.item(i).item(j).x + , + obj.style.left) ;obj.style.top = getScrY(this.layers.item(i).item(j).y) ;/alert(i+& + j + : + this.layers.item(i).item(j).y + , + obj.style.top) ; break; case point: for (j=1;ithis.layers.item(i).count+1;j+)obj = eval(this.layers.item(i).item(j).id) ;obj.style.left = getScrX(this.layers.item(i).item(j).x) ;alert(obj.style.left) ;obj.style.top = getScrY(this.layers.item(i).item(j).y) ;break; case : /画点对象function setPointVML(parentObject,pointObject,symbolObject)var sHTML = ;switch (symbolObject.style) /圆形 case 0 :sHTML+=0) if (pointObject.y!=)sHTML+= top: + (parseInt(pointObject.y)+symbolObject.size/2) + ; ; if (pointObject.x!=)sHTML+= left: + (parseInt(pointObject.x)+symbolObject.size/2) + ; ; sHTML+= width: + symbolObject.size + ; ; sHTML+= height: + symbolObject.size + ; ;if (symbolObject.color!=) sHTML+= fillcolor= +symbolObject.color + ;if (symbolObject.border0) sHTML+= strokeWeight= + symbolObject.border + ; if (symbolObject.bordercolor0)sHTML+= strokeColor= + symbolObject.bordercolor + ;sHTML+= ;break; /矩形 case 1 :sHTML+=0) if (pointObject.y!=) sHTML+= top: + String(parseInt(pointObject.y)+symbolObject.size/2) + ; ; if (pointObject.x!=)sHTML+= left: + (parseInt(pointObject.x)+parseInt(symbolObject.size/2) + ; ; sHTML+= width: + symbolObject.size + ; ; sHTML+= height: + symbolObject.size + ; ;if (pointObject.color!=) sHTML+= fillcolor= +symbolObject.color + ;if (pointObject.border0) sHTML+= strokeWeight= + symbolObject.border + ; if (symbolObject.bordercolor0)sHTML+= strokeColor= + symbolObject.bordercolor + ;sHTML+= ;break; /图片 case 10 :sHTML+= ;break;var newPoint = document.createElement(sHTML) ;parentObject.insertBefore(newPoint) ;/layers集合function Layers()var pri_LayerArray = new Array() ; this.count=pri_LayerArray.length ; this.item=function(index)return pri_LayerArrayindex-1 ;this.add=function(layer)pri_LayerArraypri_LayerArray.length = layer ;this.count=pri_LayerArray.length ;this.remove=function(index)var i ;for (i=index;ipri_LayerArray.length;i+) pri_LayerArrayindex-1 = pri_LayerArrayindex ;pri_LayerArraypri_LayerArray.length-1 = null ;this.count=pri_LayerArray.length ;/自我约束的layer模式,点线面图层需谨慎使用/使用错误则不能自我判别function LayerObject(layerid,layername)var pri_objArray =new Array();this.id = layerid ; = layername ;this.visible = true ;this.type = dynamic ;this.symbol = null ;this.count = pri_objArray.length ;this.add=function(object)pri_objArraypri_objArray.length = object ;this.count = pri_objArray.length ; ;this.item = function(index)return pri_objArrayindex-1 ;this.remove=function(index)for (i=index;ithis.count;i+) pri_objArrayindex-1 = pri_objArrayindex ;pri_objArraypri_objArray.length-1 = null ;this.count = pri_objArray.length ;this.setSymbol=function(object)if (this.type = dynamic) return null ;else this.symbol = object ; /symbol赋值/PolyLine对象function PolyLineObject()var pri_PolyLine = null;var pri_Stroke = null ;this.parent = null ;this.id = ;this.Points = new Points() ;this.filled = false ;this.startArrow = ;this.endArrow = ;this.dashStyle = ;/点集合function Points()var pri_Points = new Array() ;this.count = pri_Points.length ;this.item=function(index)return p_Pointsindex-1 ;this.add=function(pointObject)p_Pointsp_Points.length = pointObject ;this.count = getLength() ;this.remove=function(index)var i ;for (i=index;ithis.count;i+) pri_Pointsindex-1 = pri_Pointsindexpri_Pointspri_Points.length-1 = null ;this.count = getLength() ;function getLength()return p_Points.length ;/线对象function LineObject()var line = null ;this.parent = null ;this.id = ;this.fromX = 0 ;this.fromY = 0 ;this.toX = 0 ;this.toY = 0 ;this.symbol = new LineSymbol() ;/点对象function PointObject(id,name,code,x,y)this.id = id ; = name ;this.code = code ;this.x = x ;this.y = y ;this.symbol = null ;/监控对象function TailObject()this.id = ;this.id = ;this.x = ;this.y