webgis应用开发附源码.docx

webgis应用开发附源码.docx

《webgis应用开发附源码.docx》由会员分享，可在线阅读，更多相关《webgis应用开发附源码.docx（11页珍藏版）》请在冰豆网上搜索。

webgis应用开发附源码

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

      在用ARCIMS开发webgis中小型应用程序的时候,我相信很多人和我一样,就是如何将保存在简单数据库（如ACCESS）里的一些专题点信息该如何体现在地图上,这些点多则有3000,4000,另外还可通过地图操作（添加，平移）进行专题点编辑。

如果直接用HTMLVIEWER，这可是个不大不小的难题。

一开始，我们使用了ACETATELAYER方式进行处理，效果不甚理想，在局域网中多用户并发访问时就有明显的速度瓶颈，更何况INTERNET上。

      如下代码就是在此问题上做出的一种解决方案尝试，即部分地图信息客户端化。

目前我正在开发，只是部分调试仅在局域网中通过，并没有完全成熟，在线面上还是处理开发阶段。

现在介绍一下代码的基本思想，希望大家能够加以讨论。

该代码使用JAVASCRIPT开发，它以基础图层地图图片为底图，在此之上进行图层扩展，客户端形成一套小型的webgis，与ARCIMS同步刷新，形成无缝整合，给人感觉就是一个整体的webgis系统。

该代码在对象层次关系上模拟ACTIVEXCONNECTOR的重点对象。

通过不同refresh函数与基础图层同步更新（为提高客户端速度，开放了很多refresh方式，即只refresh发生改变的对象坐标位置，当然放大缩小平移之类的操作就需要整个客户端refresh，因为每个点都发生了位置变化）。

之所以如此层次化，一方面是为了增强代码的可读性和可维护性，另一方面通过封装具体VML代码实现来简化开发过程。

这样一来，可以大大减轻服务端的处理，客户端和服务端同时处理，提高地图的运行速度。

    我想重点说明的是，如果将部分地图信息移到客户端，必然需要自主开发一些原本集成好的功能（比如说在FeatureLayer中的WHEREEXPRESSION,BUFFER等功能）用于客户端。

以BUFFER为例，圆形如何画，必然是vml的oval，可以把它作为一个特殊地图图层来看待，它是一个圆，而不是点，线，区（折线），这就是图层类型扩展。

同样的道理还用在监控（关于监控的需求可查看

    当然，之所以费尽心思放在客户端做，还有个很重要的目的就是为了解决地图特殊信息的可编辑。

首先说明，此方法对基础图层的属性是无能为力的，它仅是用于在客户端生成的专题信息。

    以本代码为例，客户端添加一个新点则需要先在相关对象中add，还需要通过数据库的方式将点保存。

如果移动某客户端生成点，则显示客户端的移动过程，然后更改该对象的left和top到XY即可。

另外要注意的是，客户端gismap对象中的所有涉及点的坐标都是地图坐标，所以经常需要屏幕坐标和地图坐标之间的转换，以前我说过，现在就不多说了，代码也体现比较明显。

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

functionGisMap（）

{

  vari;

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

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

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

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

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

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

  this.layers=newLayers（）;      //图层集合对象

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

  this.fromMapPoint=function（mapX,mapY）

  {

    varpoint=newPointObject（）;

    point.x=getJX（mapX）;

    point.y=getWY（mapY）;

    returnpoint;

  };

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

  this.toMapPoint=function（screenX,screenY）

  {

    varpoint=newPointObject（）;

    point.x=getScrX（screenX）;

    point.y=getScrY（screenY）;

    returnpoint;

  };

  //获得地图坐标

  functiongetJX（scrX）

  {

    return（this.mapXMin+parseInt（scrX）/（document.body.clientWidth/（this.mapXMax-this.mapXMin）））;  

  }

  functiongetWY（scrY）

  {

    return（this.mapYMax-parseInt（scrY）/（document.body.clientHeight/（this.mapYMax-this.mapYMin）））;

  }

  //获得屏幕坐标

  functiongetScrX（mapX）

  {

    return（mapX-this.mapXMin）*document.body.clientWidth/（this.mapXMax-this.mapXMin）;

  }

  functiongetScrY（mapY）

  {

    return（this.mapYMax-mapY）*document.body.clientHeight/（this.mapYMax-this.mapYMin）;

  }

  ///画图

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

  this.draw=function（）

  {

    for（i=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;

    }

  };

  //绘制监控层

  functiondrawTailLayer（layerObject）

  {

    varsHTML;

    vartailObject=eval（"div_tail"）;

    vararr0;

    for（i=1;i

    {

      sHTML='

      sHTML+='style="position:

absolute;z-index:

3;left:

'+getScrX（layerObject.item（i）.x）+';top:

'+getScrY（layerObject.item（i）.y）+'">';

      arr0=layerObject.item（i）.content.split（","）;

      if（arr0.length>0）

      {

        sHTML+='

9pt">';

        sHTML+='';

        sHTML+='';

        sHTML+='';

        sHTML+='';

        sHTML+='';

        for（j=0;j

        {

          sHTML+='

white;font-size:

9pt">'+arr0[j]+'';

        }

        sHTML+='';

        sHTML+='';

        sHTML+='';

      }

      sHTML+='