前面说过，控件是于事件相关联的。具体的说就是控件的实现是依赖于事件绑定的，每个OpenLayers.Control及其子类的实例都会持有一个handler的引用的。

　　那么，怎么来创建并添加一个控件呢？用下面的语句：

//实例化一个控件
　　var control1 = new OpenLayers.Control({div: myDiv})

//向地图中添加控件
　　var map = new OpenLayers.Map('map', { controls: [] });
　　map.addControl(control1 );

对一些常用的OpenLayers控件，项目本身都封装好了，用下面的语句添加：

    map.addControl(new OpenLayers.Control.PanZoomBar());
　　map.addControl(new OpenLayers.Control.MouseToolbar());
  　map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
  　map.addControl(new OpenLayers.Control.Permalink());
 　 map.addControl(new OpenLayers.Control.Permalink('permalink'));
 　 map.addControl(new OpenLayers.Control.MousePosition());
  　map.addControl(new OpenLayers.Control.OverviewMap());
    map.addControl(new OpenLayers.Control.KeyboardDefaults());

　　先看看OpenLayers. Control基类的实现过程，再选择几个典型的子类分析一下。

OpenLayers. Control：

//设置控件的map属性，即控件所引用的地图
    setMap: function(map) {
        this.map = map;
        if (this.handler) {
            this.handler.setMap(map);
        }
    }
　　//drew方法，当控件准备显示在地图上是被调用。当然，这个方法只对有图标的控件起　
　　//作用。
    draw: function (px) {
        if (this.div == null) {
            this.div = OpenLayers.Util.createDiv();
            this.div.id = this.id;
            this.div.className = this.displayClass;
        }
        if (px != null) {
            this.position = px.clone();
        }
        this.moveTo(this.position);        
        return this.div;
    }

　　前面说过，OpenLayers.Control及其子类的实例都是会持有一个handler的引用的，因为每个控件起作用时，鼠标事件都是不一样的，这需要动态的绑定和接触绑定。在OpenLayers.Control中是通过active和deactive两个方法实现，就是动态的激活和注销。

//激活方法
    activate: function () {
        if (this.active) {
            return false;
        }
        if (this.handler) {
            this.handler.activate();
        }
        this.active = true;
        return true;
    }
　　//注销方法
    deactivate: function () {
        if (this.active) {
            if (this.handler) {
                this.handler.deactivate();
            }
            this.active = false;
            return true;
        }
        return false;
    }

　　再来看OpenLayers.Control的子类，即各类“特色”控件。选鹰眼控件OpenLayers. Control. OverviewMap和矢量编辑工具条控件OpenLayers. Control. EditingToolbar来说。

　　顺便说一句，OpenLayers中的控件有些是需要图标的，像EditingToolbar，有些是不需要的，像OpenLayers. Control. DragPan。

OpenLayers. Control. OverviewMap：

　　“鹰眼”实际上也是地图导航的一种形式，在外部形态上跟图层开关控件有点儿像。

  　map.addControl(new OpenLayers.Control.OverviewMap());

　　在它实现的成员函数中，draw函数是核心，继承基类OpenLayers.Control，在地图中显示这个控件。

　　此控件关联了一些浏览器事件，比如

 rectMouseDown: function (evt) {
        if(!OpenLayers.Event.isLeftClick(evt)) return;
        this.rectDragStart = evt.xy.clone();
        this.performedRectDrag = false;
        OpenLayers.Event.stop(evt);
    }

OpenLayers. Control. EditingToolbar：

　　 OpenLayers从2.3版就对矢量编辑进行了支持，就是图上右上角几个图标。完成点、线、面的编辑功能。

　　同样，它也是用drew方法激活：

 draw: function() {
        Var　div　= OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
        this.activateControl(this.controls[0]);
        return div;
    }

下面的代码是使用此控件的具体过程：

var  map, layer;    
     map = new OpenLayers.Map( 'map', { controls: [] } );
     layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
             "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
     map.addLayer(layer);
 
     vlayer = new OpenLayers.Layer.Vector( "Editable" );
     map.addLayer(vlayer);
     map.addControl(new OpenLayers.Control.PanZoomBar());
     map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));
            
     map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);