OpenLayers项目分析——（九）控件

（九）OpenLayers中的控件

<?XML:NAMESPACE PREFIX = O />

 

　　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/limina/article/details/2768487