2009-11-25 Ext.Panel 集成OpenLayers.Map

2009-11-25
Ext.Panel 集成OpenLayers.Map
在使用Extjs开发的时候，比较喜欢自己扩展一个类，将自己需要做的操作，已经定义等等都放在这一个类里面。那需要集成OpenLayers的地图的话，自然也想扩展一个类来集成地图。那么是做一个Ext.Panel的插件呢？还是就扩展一个Ext.Panel呢？这个主要看以后想怎么用Map对象。怎么做都是无所谓的。



扩展Ext.Panel来自定一个MapPanel试试看。

1.可以由先建立一个OpenLayers.Map对象传给MapPanel来使用，也可以由MapPanel自己来创建一个OpenLayers.Map对象，然后在通过MapPanel来添加图层。

2.建立Map对象之后将Map对象与MapPanel所管理的dom关联。

3.当MapPanel调整大小或状态之后Map对象同样需要进行相应的调整。
Java代码
/** 
* 可以通过事先创建一个OpenLayers.Map对象给本类，或者不建立，由iniComponent函数来创建 
*/ 
Vgs.MapPanel = Ext.extend(Ext.Panel, {  
    map : null,  
    layers : null,  
    /** 
     * 实例化函数，在次判断所需的成员变量是否符合要求 
     */ 
    initComponent : function() {  
        if (this.map == null || !(this.map instanceof OpenLayers.Map))  
            this.map = new OpenLayers.Map();  
        Vgs.MapPanel.superclass.initComponent.call(this);  
    },  
    /** 
     * 将Map对象与Panel所依托的dom div 节点相关联。 
     */ 
    afterRender : function() {  
        Vgs.MapPanel.superclass.afterRender.apply(this, arguments);  
        if (this.map != null) {  
            this.map.render(this.body.dom);  
        }  
    },  
    // 处理响应Panel的resize事件，然后调整地图的大小  
    onResize : function() {  
        Vgs.MapPanel.superclass.onResize.apply(this, arguments);  
        if (this.map && this.map.updateSize)  
            this.map.updateSize();  
    },  
    // 当Panel关闭或删除的时候需要删除在initComponent 函数中新建的Map对象，避免内存溢出  
    beforeDestroy : function() {  
        // 判断Panel成员变量是由配置文件中传入的还是在initComponent  
        // 函数中新建，如果为后种情况，则需要将map对象delete.  
        if (!this.initialConfig.map  
                || !(this.initialConfig.map instanceof OpenLayers.Map)) {  
            if (this.map && this.map.destroy) {  
                this.map.destroy();  
            }  
        }  
        delete this.map;  
        Vgs.MapPanel.superclass.beforeDestroy.apply(this, arguments);  
    },  
    /**向地图中添加地图图层 
     *  
     * @param {} lyr 地图图层对象 为OpenLayers.Layer或其子类的实例 
     */ 
    addLayer:function(lyr)  
    {  
        if(lyr instanceof OpenLayers.Layer && this.map instanceof OpenLayers.Map)  
        {  
            this.map.addLayer(lyr);  
        }  
    }  
});