OpenLayers中的控件，是通過加載到地圖上而起作用的，也算地圖表現的一部分。同時，控件需要對地圖發生作用，所以每個控件也持有對地圖（map對象）的引用。
前面說過，控件是於事件相關聯的。具體的說就是控件的實現是依賴於事件綁定的，每個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);
