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对象同样需要进行相应的调整。

/**
 * 可以通过事先创建一个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);
		}
	}
});

评论

1 楼 wqrtx 2012-05-17  

为什么不行啊。。。。this.map.render(this.body.dom);  好像没执行