OpenLayers项目分析——(九)控件

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/giser_whu/article/details/45748507

You may also like...