JavaScript客户端接口之SuperMap.Handler

JavaScript客户端接口之SuperMap.Handler

作者：Hyacinth

       接触过SuperMap iClient for JavaScript的朋友，想必对SuperMap.Control—控件类都不会感到陌生吧。比如，开发过程中，经常使用的DrawFeature、Navigation、SelectFeature等。而接下来我们要讲的并非Control，而是Control的事件处理器–SuperMap.Handler。
       SuperMap.Handler用于处理Control事件的事件处理器。 事件处理器(Handler)内部封装了浏览器事件监听及其相应的处理方法，当一个事件处理器被激活时, Handler中定义的浏览器事件监听及其相应的方法被注册到浏览器监听器，在浏览器事件被触发之后， 首先会调用Handler中处理该浏览器事件的方法来做事件的确认和信息封装，然后才再传递给Control等做具体响应处理。当一个处理器被注销，这些方法在事件监听器中也会相应的被取消注册。事件处理器通过 active和 deactive 两个方法，实现动态的激活和注销。一个控件被激活时，其对应的事件处理器会被激活， 相应的浏览器事件被触发之后，通过事件处理器(Handler)来监听、处理和响应这些事件； 同样，当一个控件被注销时，其相应的处理器也会被注销。 包括了Box、Click、Drag、Feature、Hover、Keyboard、 MouseWheel、Path、Pinch、Point、Polygon、RegularPolygon等几种类型的事件处理器。
       这时你可能会说，能够想到比较易懂的控件可能会有哪些事件处理器，如DrawFeature,在初始化的时候就会定义Handler类型，而其他的就不太清楚了，类参考里也没有做详细的介绍，那怎么能够清楚的知道各个Control所对应的事件处理器类型呢？其实这个比较好解决，大家在做b/s开发时，都会通过浏览器的开发者工具(按F12键)来进行代码的调试，这里以firebug为例进行说明，你可在控制台里输入map.controls，获取到加载在地图上的所有控件，如下图所示

      以Navigation为例，由下图可以看到有一个handlers的属性，里面就包含了控件所对应的事件处理器为SuperMap.Handler.Click和SuperMap.Handler. MouseWheel。

       除了这里可以通过调试来查看，其实还有很多的情况，都可以用这种方式。比如你想知道某个接口除了类参考里所列举的属性和方法，是否还存在其他的。熟练使用浏览器的开发工具，对你的开发也是很有帮助的。
       上面有关handler介绍，读起来可能有点抽象，那下面我们用实际的例子来具体展现实际开发中怎么去使用handler。
       一种情况，在使用DrawFeature控件绘制线要素或者面要素的时候，默认的情况是单击开始，只有在双击结束绘制时，才能够触发featureadded事件对绘制的要素进行操作，那如果想要每点击一次添加点的时候就触发事件，该怎么弄呢？这里以SuperMap.Handler.Path为例简单进行说明下。
       首先，我们通过下面的图表来了解一下Path构造函数的参数，回调函数的类型及其参数。

       接下来，我们就以point回调函数为例，编写在绘制线对象的时候，每添加一个节点，就在该点上放置一个图标，先看下效果截图吧。

//初始化绘制控件时，就可以直接添加point回调函数
drawLine = new SuperMap.Control.DrawFeature(lineLayer, SuperMap.Handler.Path, {callbacks:{point:addPoint}});
var i=1;
//回调函数接收点的几何对象作为参数
function addPoint (point){
//这里需要注意的是，不能够直接将point加以使用，需通过获取点的坐标，重新封装为点对象
             var x=point.x;
             var y=point.y;
             var imagerUrl="../theme/images/"+i+".png";
             var point1=new SuperMap.Geometry.Point(x,y);
             var pointFeature=new SuperMap.Feature.Vector(point1);
             pointFeature.style={
                 externalGraphic:imagerUrl,
                 graphicWidth:32,
                 graphicHeight:32,
                 graphicXOffset:-16,
                 graphicYOffset:-32
             }
             lineLayer.addFeatures(pointFeature);
             i++;
     };

以此类推，其他的handler类型以及modify等回调函数都可以根据实际需求进行相应的编写。除此之外，你还可以根据自己的需求利用handler去自定义控件。