（九）OpenLayers中的控件

　　OpenLayers中的控件，是通過加載到地圖上而起作用的，也算地圖表現(xiàn)的一部分。同時，控件需要對地圖發(fā)生作用，所以每個控件也持有對地圖（map對象）的引用。

　　前面說過，控件是于事件相關(guān)聯(lián)的。具體的說就是控件的實現(xiàn)是依賴于事件綁定的，每個OpenLayers.Control及其子類的實例都會持有一個handler的引用的。

　　那么，怎么來創(chuàng)建并添加一個控件呢？用下面的語句：

　　//實例化一個控件

　　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基類的實現(xiàn)過程，再選擇幾個典型的子類分析一下。

　　OpenLayers. Control：

　　//設(shè)置控件的map屬性，即控件所引用的地圖

    setMap: function(map) {

        this.map = map;

        if (this.handler) {

            this.handler.setMap(map);

        }

    }

　　//drew方法，當(dāng)控件準備顯示在地圖上是被調(diào)用。當(dāng)然，這個方法只對有圖標的控件起　

　　//作用。

    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的引用的，因為每個控件起作用時，鼠標事件都是不一樣的，這需要動態(tài)的綁定和接觸綁定。在OpenLayers.Control中是通過active和deactive兩個方法實現(xiàn)，就是動態(tài)的激活和注銷。

　　//激活方法

    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：

　　“鷹眼”實際上也是地圖導(dǎo)航的一種形式，在外部形態(tài)上跟圖層開關(guān)控件有點兒像。

添加鷹眼控件的語句：

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

　　在它實現(xiàn)的成員函數(shù)中，draw函數(shù)是核心，繼承基類OpenLayers.Control，在地圖中顯示這個控件。

　　此控件關(guān)聯(lián)了一些瀏覽器事件，比如

    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./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);