[Commits] r2145 - in sandbox/bartvde/playground/geoext: examples lib lib/GeoExt/widgets

commits at geoext.org commits at geoext.org
Thu Apr 29 15:48:39 CEST 2010


Author: bartvde
Date: 2010-04-29 15:48:39 +0200 (Thu, 29 Apr 2010)
New Revision: 2145

Added:
   sandbox/bartvde/playground/geoext/lib/GeoExt/widgets/WMSPreviewPanel.js
Modified:
   sandbox/bartvde/playground/geoext/examples/wms-tree.html
   sandbox/bartvde/playground/geoext/examples/wms-tree.js
   sandbox/bartvde/playground/geoext/lib/GeoExt.js
Log:
started initial work on WMSPreviewPanel, needs more work

Modified: sandbox/bartvde/playground/geoext/examples/wms-tree.html
===================================================================
--- sandbox/bartvde/playground/geoext/examples/wms-tree.html	2010-04-29 11:11:09 UTC (rev 2144)
+++ sandbox/bartvde/playground/geoext/examples/wms-tree.html	2010-04-29 13:48:39 UTC (rev 2145)
@@ -2,10 +2,10 @@
     <head>
         <title>WMSLoader Example</title>
 
-        <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"></script>
-        <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js"></script>
-        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
-        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/examples/shared/examples.css" />
+        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/adapter/ext/ext-base.js"></script>
+        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/ext-all.js"></script>
+        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.0/resources/css/ext-all.css" />
+        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.0/examples/shared/examples.css" />
 
         <script src="http://www.openlayers.org/api/2.9/OpenLayers.js"></script>
         <script type="text/javascript" src="../lib/GeoExt.js"></script>

Modified: sandbox/bartvde/playground/geoext/examples/wms-tree.js
===================================================================
--- sandbox/bartvde/playground/geoext/examples/wms-tree.js	2010-04-29 11:11:09 UTC (rev 2144)
+++ sandbox/bartvde/playground/geoext/examples/wms-tree.js	2010-04-29 13:48:39 UTC (rev 2145)
@@ -1,11 +1,10 @@
-var tree, mapPanel;
+var tree, mapPanel, previewPanel;
 
 Ext.onReady(function() {
 
     tree = new Ext.tree.TreePanel(
         {
-            region: 'west',
-            width: 250,
+            flex: 1,
             loader: new GeoExt.tree.WMSLoader({
                 url: 'data/wmscap.xml',
                 layerOptions: {buffer: 0, singleTile: true, ratio: 1},
@@ -14,7 +13,8 @@
             listeners: {
                 'click': function(node) { 
                     if (node.attributes.layer !== null) {
-                        mapPanel.map.addLayer(node.attributes.layer); 
+                        previewPanel.showPreview(node.attributes.layer);
+                        //mapPanel.map.addLayer(node.attributes.layer); 
                     }
                 }
             }
@@ -39,22 +39,47 @@
         region: 'center'
     });
 
+    previewPanel = new GeoExt.WMSPreviewPanel(
+        {
+            title: 'Preview',
+            map: mapPanel.map,
+            height: 200
+        }
+    );
+
     new Ext.Viewport({
         layout: "fit",
         hideBorders: true,
         items: {
             layout: "border",
             deferredRender: false,
-            items: [mapPanel, tree, {
-                contentEl: "desc",
-                region: "east",
-                bodyStyle: {"padding": "5px"},
-                collapsible: true,
-                collapseMode: "mini",
-                split: true,
-                width: 200,
-                title: "Description"
-            }]
+            items: [{
+                    xtype: 'panel',
+                    layout: 'vbox',
+                    region: "west",
+                    layoutConfig: {
+                        align: 'stretch',
+                        pack: 'start'
+                    },
+                    items: [
+                        tree,
+                        previewPanel
+                    ],
+                    width: 250,
+                    split: true
+                }, 
+                mapPanel, 
+                {
+                    contentEl: "desc",
+                    region: "east",
+                    bodyStyle: {"padding": "5px"},
+                    collapsible: true,
+                    collapseMode: "mini",
+                    split: true,
+                    width: 200,
+                    title: "Description"
+                }
+            ]
         }
     });
 

Added: sandbox/bartvde/playground/geoext/lib/GeoExt/widgets/WMSPreviewPanel.js
===================================================================
--- sandbox/bartvde/playground/geoext/lib/GeoExt/widgets/WMSPreviewPanel.js	                        (rev 0)
+++ sandbox/bartvde/playground/geoext/lib/GeoExt/widgets/WMSPreviewPanel.js	2010-04-29 13:48:39 UTC (rev 2145)
@@ -0,0 +1,108 @@
+GeoExt.WMSPreviewPanel = function(config){
+    Ext.apply(this, config);
+    GeoExt.WMSPreviewPanel.superclass.constructor.call(this);
+};
+
+Ext.extend(GeoExt.WMSPreviewPanel, Ext.Panel, {
+
+    currentLayer: null,
+
+    initComponent: function() {
+        GeoExt.WMSPreviewPanel.superclass.initComponent.call(this);
+    },
+
+    afterRender: function() {
+        GeoExt.WMSPreviewPanel.superclass.afterRender.apply(this, arguments);
+        this.image = new Ext.BoxComponent({autoEl: {tag: 'img',
+            'class': this.imgCls, src: Ext.BLANK_IMAGE_URL,
+            width: this.getWidth(), height: this.getHeight()}});
+        this.add(this.image);
+        this.doLayout();
+    },
+
+    hideMask: function() {
+        if (this.mask) {
+            this.mask.hide();
+        }
+    },
+
+    showMask: function() {
+        if (!this.mask) {
+            this.mask = new Ext.LoadMask(this.getEl(), {
+                msg:  OpenLayers.i18n("WMSBrowserPreviewWaitMsg")});
+            Ext.EventManager.addListener(this.image.getEl(), 'load',
+                this.hideMask, this);
+            Ext.EventManager.addListener(this.image.getEl(), 'error',
+                this.hideMask, this);
+        }
+        this.mask.show();
+    },
+
+    calculateBBOX: function(layer) {
+        var bbox;
+        if (layer.metadata.llbbox) {
+            if (this.map.getProjection() !== 'EPSG:4326') {
+                // reproject the latlon boundingbox to the map projection
+                var llbounds = OpenLayers.Bounds.fromArray(layer.metadata.llbbox);
+                llbounds = llbounds.transform(new OpenLayers.Projection('EPSG:4326'),
+                    this.map.getProjectionObject() );
+                bbox = llbounds.toArray();
+            } else {
+                bbox = layer.metadata.llbbox;
+            }
+        } else {
+            bbox = this.map.maxExtent.toArray();
+        }
+        var center = OpenLayers.Bounds.fromArray(bbox).getCenterLonLat();
+        // change the bbox so that the WMS returns an image that is inside
+        // the scale-range of the layer
+        if (layer.minScale > 0) {
+            var midScale;
+            if (layer.maxScale > 0) {
+                midScale = (layer.maxScale + layer.minScale) / 2;
+            }
+            else {
+                // take less than 100%, because of small differences in
+                // calculating WMS scales
+                midScale = 0.9 * layer.minScale;
+            }
+            // determine the new bbox based on the center
+            // and scale range of the WMS Layer
+            var res = OpenLayers.Util.getResolutionFromScale(midScale,
+                this.map.units);
+            var dX = Math.round(res * this.getWidth());
+            var dY = Math.round(res * this.getHeight());
+            var cX = center.lon;
+            var cY = center.lat;
+            if (dX !== 0 && dY !== 0) {
+                bbox = [cX - 0.5*dX, cY - 0.5*dY, cX + 0.5*dX, cY + 0.5*dY];
+            }
+        }
+        return bbox.join(",");
+    },
+
+    showPreview : function (layer){
+        if (!layer) {
+            return;
+        }
+        this.showMask();
+
+        // if the layer has not been added to the map yet, we need to set its
+        // map property otherwise getFullRequestString will not work.
+        layer.map = this.map;
+
+        var url = layer.getFullRequestString({
+            BBOX: this.calculateBBOX(layer),
+            WIDTH: this.getWidth(),
+            HEIGHT: this.getHeight()
+        });
+
+        layer.map = null;
+
+        this.currentLayer = layer;
+        this.image.getEl().dom.src = url;
+    }
+
+});
+
+Ext.reg('gx_wmspreview', GeoExt.WMSPreviewPanel);

Modified: sandbox/bartvde/playground/geoext/lib/GeoExt.js
===================================================================
--- sandbox/bartvde/playground/geoext/lib/GeoExt.js	2010-04-29 11:11:09 UTC (rev 2144)
+++ sandbox/bartvde/playground/geoext/lib/GeoExt.js	2010-04-29 13:48:39 UTC (rev 2145)
@@ -109,6 +109,7 @@
             "GeoExt/widgets/VectorLegend.js",
             "GeoExt/widgets/LegendPanel.js",
             "GeoExt/widgets/ZoomSlider.js",
+            "GeoExt/widgets/WMSPreviewPanel.js",
             "GeoExt/widgets/grid/FeatureSelectionModel.js",
             "GeoExt/data/PrintPage.js",
             "GeoExt/data/PrintProvider.js",



More information about the Commits mailing list