在html view中实现圆查询

来源：互联网发布：android语音助手源码编辑：程序博客网时间：2024/04/29 18:29

由arcims design所创建的客户端程序，只有框选的查询，并没有圆选，然而圆选在应用程序当中甚为普遍，虽然个人私低下认为圆选跟框选没什么区别，只不过给客户的感觉好像是多了一个功能和选择。

需要即合理，只好自己想办法实现。

在html view中实现圆查询有三个问题：

1、如何用js在客户端画圆。

2、由于arcims不支持圆查询，只支持多边形，所以需要转换成多边形，也就是按一定距离，取得圆周上的点。

3、组织成arcxml语句。

详细说明和相关js代码如下：

第一、采用js代码在客户端画圆：

本人初学js，所以知道凭自己的脑瓜子是想不出来滴，幸亏是生在互联网的时代，什么问题，只要你有耐心和毅力，总能够在网上挖出答案来。挖出来的宝不敢独吞，链接地址如下：http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm,可有示例代码，并可下载js文件。

如果要实现随着鼠标的移动，动态的画出圆，则需要自己编写鼠标响应事件，代码:

  //结束画圆
  function drawMouseUp()
  {
   if(selectCircle)
   {

    drawCircle=false;
   }
  }

在此遇到一个问题，写完代码后进行测试，并不能顺利的画出圆来，我检查了代码，并没有发现什么错误，后来把代码移到html文件中的<body></body>标记之中就可以了，本人对js不熟，不知道其中有何奥妙，如有路过的兄弟知道原委，还烦请留言告知。

另外一个需要注明的是drawSpace常量，刚开始没有这个常量的，结果用鼠标画圆的时候很不流畅，估计事件太频繁，机子反应不过来了。所以设置了这个参数，间隔一定距离才刷新圆。不知道是否还有其他更好的方式。

不知道是否还有其他更好的绘圆方式，比如，用透明的圆图片来代替，鼠标拉开距离就放大这个图片，否则就缩小，如同java view中一样流畅平滑,不知道能否用js来实现。

第二、取得圆上的点，并组织成arcXML查询语句。

var theString = '<ARCXML version="1.1">/n<REQUEST>/n'
theString += '<GET_FEATURES outputmode="xml" geometry="false" envelope="true" checkesc ="true"';

theString += ' featurelimit="' + maxFeaturesReturned + '" beginrecord="' + queryStartRecord + '">/n';
theString += '<LAYER id="' + LayerID[layerIndex] + '" />/n';

   theString += '<SPATIALQUERY subfields="' + '">';
   theString += '<SPATIALFILTER relation="area_intersection">/n';
   theString += circlePointString;
   theString += '</SPATIALFILTER>/n';
   theString += '</SPATIALQUERY>/n';

theString += '</GET_FEATURES>/n';
theString += '</REQUEST>/n';
theString += '</ARCXML>';

function getCirclePoint(x0,y0,r)//writed by xucj on 2006-06-29
{

pixelX = xDistance / iWidth;
pixelY = yDistance / iHeight;
circlePointString='<POLYGON>/n';
circlePointString+='<RING>/n';

for (var i = 0; i < 360; i = i + 1)
{

var tx = x0 + r * Math.cos((Math.PI / 180) * i);

var ty = y0 + r * Math.sin((Math.PI / 180) * i);

  var theY = iHeight - ty;

  var ly = pixelY * theY + eBottom;

  var lx=pixelX * tx + eLeft;

  circlePointString+='<POINT x="'+lx+'" y="'+ly+'" />/n';

}
circlePointString+='</RING>/n';
circlePointString+='</POLYGON>/n';

}