OpenLayers项目分析[转]（九）：控件
（九）OpenLayers中的控件
为了让更多的人看到这篇好文章，我把它转载到这里，这篇文章转载自http://www.3snews.net/html/24/10624-17584.html，原文作者如觉得不妥，可联系我删除之。
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);
转载自：https://blog.csdn.net/suen/article/details/2416008
