[Users] Two TreeLoader for the same TreePanel?

gbrun gbrun at myopera.com
Fri Jul 15 13:59:46 CEST 2011


It took me some time to clean my code, as it was a rough code! ;)

Here is my WMS TreeLoader, inspired by the  
GeoExt.tree.WMSCapabilitiesLoader.js file:

wms_loader = new Ext.tree.TreeLoader({
             url:  
'http://192.168.168.199:81/geoserver/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities&namespace=wms',
             layerOptions: {buffer: 0, singleTile: true, ratio: 1},
             layerParams: {'TRANSPARENT': 'TRUE'},
	    requestMethod: 'GET',
	    getParams: function(node) {
		  return {'service': 'WMS', 'request': 'GetCapabilities'};
	    },
			
	    processResponse : function(response, node, callback, scope){
			var capabilities = new  
OpenLayers.Format.WMSCapabilities().read(response.responseXML ||  
response.responseText);
			this.processWMSlayer(capabilities.capability,  
capabilities.capability.request.getmap.href, node);
			if (typeof callback == "function") {
				callback.apply(scope || node, [node]);
			}
	    },
			
	    createWMSLayer: function(layer, url) {
			if (layer.name){
				return new OpenLayers.Layer.WMS(layer.title, url,
					OpenLayers.Util.extend(
						{formats: layer.formats[0],
						layers: layer.name},
					this.layerParams),
					OpenLayers.Util.extend(
						{minScale: layer.minScale,
						queryable: layer.queryable,
						maxScale: layer.maxScale,
						metadata: layer},
					this.layerOptions)
				);
			} else {
				return null;
			}
	     },
			
	     processWMSlayer: function(layer, url, node){
	 		   Ext.each(layer.layers, function(layers){
			    Ext.each(layers.keywords, function(keywords) {
						var k = this.createNode(
							{text: keywords.value,
							nodeType: 'node',
							leaf: false}
						);
						var test = true;
						for (var i = 0, l = root.childNodes.length; i < l; i++){
							var currentNode = root.childNodes[i];
							if (k.text == currentNode.text){
								test = false;
							};
						};
						var n = this.createNode(
							{text: layers.title,
							// use nodeType 'node' so no AsyncTreeNodes are created
							nodeType: 'node',
							layer: this.createWMSLayer(layers, url),
							leaf:true
						});
						if(test == true){
							root.appendChild(k);
							k.appendChild(n);
						}else{
							currentNode.appendChild(n);
						}
				}, this);
		    }, this);
	    },
				
             // customize the createNode method to add a checkbox to nodes
             createNode: function(attr) {
                 attr.checked = attr.leaf ? false : undefined;
                 return  
GeoExt.tree.WMSCapabilitiesLoader.prototype.createNode.apply(this, [attr]);
             }
});


Here is my WFS TreeLoader, inspired by the precedent code and the  
GeoExt.data.WMSReader.js file


wfs_loader = new Ext.tree.TreeLoader({
             url:  
'http://192.168.168.199:81/geoserver/wfs?SERVICE=WFS&VERSION=1.0.0&REQUEST=GetCapabilities&namespace=wfs',
	    requestMethod: 'GET',
	    getParams: function(node) {
		  return {'service': 'WFS', 'request': 'GetCapabilities'};
	    },			

	    processResponse : function(response, node, callback, scope){
			var data = new  
OpenLayers.Format.WFSCapabilities().read(response.responseXML ||  
response.responseText);
			this.processWFSlayer(data, node);
			if (typeof callback == "function") {
				callback.apply(scope || node, [node]);
			}
	    },
			
	    createWFSLayer: function(data, featureType) {
				var layerOptions, protocolOptions;
				protocolOptions = {
					url: data.capability.request.getfeature.href.post,
					featureType: featureType.name,
					featureNS: featureType.featureNS,
					outputFormat: "json",
					readFormat: new OpenLayers.Format.GeoJSON()
				};
				layerOptions = {
					protocol: new OpenLayers.Protocol.WFS(protocolOptions),
					strategies: [new OpenLayers.Strategy.Fixed()]
				};
				return  new OpenLayers.Layer.Vector(
					featureType.title || featureType.name,
					layerOptions
				);
	    },
			
	    processWFSlayer: function(data, node){
				var featureTypes = data.featureTypeList.featureTypes;
				var featureType;

				for(var i=0, lenI=featureTypes.length; i<lenI; i++) {
					featureType = featureTypes[i];
					Ext.each(featureType.keywords, function(keywords) {
						var k = this.createNode({text: keywords,
							nodeType: 'node',
							leaf: false
						});
						var test = true;
						for (var i = 0, l = root.childNodes.length; i < l; i++){
							var currentNode = root.childNodes[i];
							if (k.text == currentNode.text){
								test = false;
							};
						};
						var n = this.createNode({text: featureType.title,
							// use nodeType 'node' so no AsyncTreeNodes are created
							nodeType: 'node',
							layer: this.createWFSLayer(data, featureType),
							leaf:true
						});
						if(test == true){
							root.appendChild(k);
							k.appendChild(n);
						}else{
							currentNode.appendChild(n);
						}
					}, this);
				  }
	    }
	
             // customize the createNode method to add a checkbox to nodes
             ,createNode: function(attr) {
                 attr.checked = attr.leaf ? false : undefined;
                 return  
GeoExt.tree.WMSCapabilitiesLoader.prototype.createNode.apply(this, [attr]);
             }
});


Here is my TreePanel's RootNode which contains the WMS TreeLoader:

	var root = new Ext.tree.AsyncTreeNode({
			expanded: true,
			text: 'Couches en WFS',
			loader: wms_loader
	});

Here is an AsyncNode which contains the WFS TreeLoader. At this moment, it  
is not implemented in my current code:

	var root2 = new Ext.tree.AsyncTreeNode({
		        expanded: true,
			text: 'Couches en WMS',
			loader: wfs_loader
	});

Here is my general TreePanel:

	var tree_catalog = new Ext.tree.TreePanel({
		title: "Couches Disponibles",
		anchor: '100% 50%',
		collapsible: true,
		collapsed: false,
		titleCollapse: true,
		autoScroll: true,
		split: true,
		//enableDD: true,
		lines: false,
		rootVisible: true,
		root: root,
		listeners: {
             // Add layers to the map when ckecked, remove when unchecked.
             // Note that this does not take care of maintaining the layer
             // order on the map.
             'checkchange': function(node, checked) {
                 if (checked === true) {
                     mapPanel.map.addLayer(node.attributes.layer);
                 } else {
                     mapPanel.map.removeLayer(node.attributes.layer);
                 }
             }
         };


So, at this moment, there are few commentaries. If you need some  
precisions, please ask me. What I think to do now: I will create a quite  
normal root node in my TreePanel, but nothing will be loaded trough this  
one. Then, I will create children, which will load new nodes on the root  
node (and not on themselves). These children will be "phantom" nodes: they  
will be empty. It's not fine to do like this, but I'm looking for  
something that works! ;)

Best regards,

Geoffrey



On Fri, 15 Jul 2011 12:47:43 +0200, Robert Buckley  
<robertdbuckley at yahoo.com> wrote:

> Could you send some code please,
>
> cheers,
>
> Robert
>
>
>
>
>
> ________________________________
> Von: gbrun <gbrun at myopera.com>
> An: users at geoext.org
> Gesendet: Freitag, den 15. Juli 2011, 11:04:53 Uhr
> Betreff: [Users] Two TreeLoader for the same TreePanel?
>
> Hi!
>
> I'm a little bit confused. I want to mix WMS and WFS layers in the same
> TreePanel. To request these layers, I personalized a kind of
> WMSCapabilitiesLoader in my web application and created a similar  
> function
> to load WFS layers in a three. But now, my problem is to load these both
> TreeLoader in the same TreePanel. In fact, it's possible to load them in
> two separate AsyncNodes, but it's not what I want to do: I want an only
> root node, which contains multiple nodes loaded by my both WMS and WFS
> loaders. So I need to specify two loaders in my TreePanel, or two loaders
> in the root AsyncNode from my TreePanel, or combine my two TreeLoader in
> only one TreeLoader! But none of these solutions are working...
>
> Does anyone has an idea?
>
> Geoffrey
> _______________________________________________
> Users mailing list
> Users at geoext.org
> http://www.geoext.org/cgi-bin/mailman/listinfo/users


-- 
Using Opera's revolutionary email client: http://www.opera.com/mail/


More information about the Users mailing list