On Sep 2, 2010, at 09:04 , Robert Buckley wrote: > I am quite new to Geoext and unfortunately am struggling with the programming > side of things. > > I have made a small project using Geoserver to serve shapefiles as vector > layers > in Openlayers. The project shows Wind turbines, Biogas plants, and > Hydroelectric > power for a region of Germany. > > http://www.rbuckley.com:8080/geoserver/www/zgb_energie/zgb_energie.html > > > For each layer I have a grid populated with the attributes from the vector > layers. If I knew how to do it as wms I would, but I started playing with the > vector layers and this is how it ended up. > > The problems I am faced with are .... > > 1. Loading time: Although it is a small project It takes about 30 seconds to > load. Is this because of the vector geometries, the Ext/Geoext script files, > my > HTML file or the server?
Too many vector feautures / geometries. Consider using a BBOX strategy rather than Fixed, and configure it with a ratio of 1 and a resFactor of 1 to make sure that only features of the visible extent are loaded, and new features are fetched when the zoom level changes. The side effect of this will be that your grid only shows the features of the visible extent. Also, consider only loading the layer for the currently selected grid. Look at the TabPanel's tabchange event. > 2. GeoExt: When I start the project the grid is not populated. I have to > first > click on the tab to populate the grid! With only one grid it is populated > immediately For your TabPanel, configure an activeTab (e.g. 0 for the WEA tab). > 3. GeoExt: I can´t click on the points until a grid has been loaded This is because the SelectFeature control that you need for clicking on the points is initialized with the grid. With the above two hints, you should get a nice behavior. > 4. GeoExt: If I want to click on a different type of point e.g Biogas, It > doesn´t work until I turn off the other point layers in the Openlayers > switcher > control. The SelectFeature control that a grid configures can only work if the layer is on top. Consider removing the layer switcher and control the visible layer by tab switching, as explained in my previous hint. > 5. The loading panel is not centered in the map panel. Probably a css positioning issue (look at your .olControlLoadingPanel style). Consider using Ext's LoadMask instead of the LoadingPanel. > 6. Should I do this as a wms layer instead? If you want the synchronisation with the grid, you have to stick with WFS. Otherwise WMS would be better, especially if the number of features on your vector layers is going to increase. > 7. The points are always set with opacity, even though I have commented out > the > opacity property! Do not comment it out, otherwise you will get the default opacity. Also, remove the rotation as long as you use a circle as symbol! This will make rendering in IE *much* slower. Regards, Andreas. > > > Eventually, I would like to get the tree working on the left, and possibly of > few other functions, but not until I have sorted out the generally usability. > I > > > I would be most gratefull for any feedback, comments or help regarding my > problems, > > Yours, > > Robert Buckley > www.zgb.de > > > > CODE: > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" > "http://www.w3.org/TR/html4/strict.dtd";> > <html> > <head> > <title>GeoExt WFS Editor</title> > > <script > src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAFZSQ3NR3Cl-3OnEoy3lKgBRbhyBMJEtuX3l0PdRNiVPZvVRhahQOwezuVBkWmV2CGfQHLHxeP-CjSQ'></script> > > > > <script type="text/javascript" > src="../ext/adapter/ext/ext-base.js"></script> > <script type="text/javascript" src="../ext/ext-all.js"></script> > <link rel="stylesheet" type="text/css" > href="../ext/resources/css/ext-all.css" /> > <script src="http://openlayers.org/api/OpenLayers.js";></script> > > <script type="text/javascript" src="../geoext/lib/GeoExt.js"></script> > <script src="../LoadingPanel.js"></script> > > <script type="text/javascript"> > > Ext.BLANK_IMAGE_URL = "../ext/resources/images/default/s.gif"; > > Ext.onReady(function() { > > // create Google layer > var gsat = new OpenLayers.Layer.Google( > "Google Satellite", > {type: G_SATELLITE_MAP, sphericalMercator: true}, > {isBaseLayer: false, opacity: 0.8} > ); > > > var layer_zgbgrenze = new OpenLayers.Layer.Vector("Landkreisgrenzen", { > styleMap: new OpenLayers.StyleMap({ > "default": new > OpenLayers.Style(OpenLayers.Util.applyDefaults({ > fillColor: "none", > strokeColor: "#0F0F0F", > strokeWidth: 2 > }, OpenLayers.Feature.Vector.style["default"])) > > }), > strategies: [new OpenLayers.Strategy.Fixed()], > protocol: new OpenLayers.Protocol.WFS({ > url: "/geoserver/ows", > version: "1.1.0", > featureType: "Grenzen_wgs84", > featureNS: "http://zgb.energie.de";, > srsName: "EPSG:900913" > > }) > }); > > > var layer_wea = new OpenLayers.Layer.Vector("Windenergieanlagen", { > styleMap: new OpenLayers.StyleMap({ > "default": new > OpenLayers.Style(OpenLayers.Util.applyDefaults({ > graphicName: "circle", > fillColor: "#F4F6D0", > strokeColor: "#F4F6D0", > strokeWidth: 2, > // graphicOpacity: 1, > rotation: -45, > pointRadius: 4 > }, OpenLayers.Feature.Vector.style["default"])), > "select": new > OpenLayers.Style(OpenLayers.Util.applyDefaults({ > graphicName: "circle", > fillColor: "#55FF7F", > strokeColor: "red", > strokeWidth: 2, > // graphicOpacity: 1, > rotation: 45, > pointRadius:9 > }, OpenLayers.Feature.Vector.style["select"])) > }), > strategies: [new OpenLayers.Strategy.Fixed()], > protocol: new OpenLayers.Protocol.WFS({ > url: "/geoserver/ows", > version: "1.1.0", > featureType: "WEA_wgs84", > featureNS: "http://zgb.energie.de";, > srsName: "EPSG:900913" > }) > }); > > var layer_biogas = new OpenLayers.Layer.Vector("Biogasanlagen", { > styleMap: new OpenLayers.StyleMap({ > "default": new > OpenLayers.Style(OpenLayers.Util.applyDefaults({ > graphicName: "circle", > fillColor: "#E2C22C", > strokeColor: "#E2C22C", > strokeWidth: 2, > // graphicOpacity: 1, > rotation: -45, > pointRadius: 4 > }, OpenLayers.Feature.Vector.style["default"])), > "select": new > OpenLayers.Style(OpenLayers.Util.applyDefaults({ > graphicName: "circle", > fillColor: "#D38F57", > strokeColor: "red", > strokeWidth: 2, > // graphicOpacity: 1, > rotation: 45, > pointRadius:9 > }, OpenLayers.Feature.Vector.style["select"])) > }), > strategies: [new OpenLayers.Strategy.Fixed()], > protocol: new OpenLayers.Protocol.WFS({ > url: "/geoserver/ows", > version: "1.1.0", > featureType: "Biogas_wgs84", > featureNS: "http://zgb.energie.de";, > srsName: "EPSG:900913" > }) > }); > > var layer_wasserkraft = new OpenLayers.Layer.Vector("Wasserkraft", { > styleMap: new OpenLayers.StyleMap({ > "default": new > OpenLayers.Style(OpenLayers.Util.applyDefaults({ > graphicName: "circle", > fillColor: "#00D4FF", > strokeColor: "#00D4FF", > strokeWidth: 2, > // graphicOpacity: 1, > rotation: -45, > pointRadius: 4 > }, OpenLayers.Feature.Vector.style["default"])), > "select": new > OpenLayers.Style(OpenLayers.Util.applyDefaults({ > graphicName: "circle", > fillColor: "#0AB055", > strokeColor: "red", > strokeWidth: 2, > // graphicOpacity: 1, > rotation: 45, > pointRadius:9 > }, OpenLayers.Feature.Vector.style["select"])) > }), > strategies: [new OpenLayers.Strategy.Fixed()], > protocol: new OpenLayers.Protocol.WFS({ > url: "/geoserver/ows", > version: "1.1.0", > featureType: "Wasserkraft_wgs84", > featureNS: "http://zgb.energie.de";, > srsName: "EPSG:900913" > }) > }); > > > > > var mapnik = new OpenLayers.Layer.OSM(); > > > var store = new GeoExt.data.FeatureStore({ > fields: [ > {name: "Bez", type: "string"}, > {name: "Standort", type: "string"}, > {name: "Betreiber", type: "string"}, > {name: "number_fac", type: "int", defaultValue: 0} > ], > layer: layer_wea > }); > > > var store_biogas = new GeoExt.data.FeatureStore({ > fields: [ > {name: "Ort", type: "string"}, > {name: "Antr_St", type: "string"}, > {name: "ID", type: "int", defaultValue: 0} > ], > layer: layer_biogas > }); > > var store_wasserkraft = new GeoExt.data.FeatureStore({ > fields: [ > {name: "ID", type: "int"}, > {name: "Bez", type: "string"}, > {name: "Anmerkung", type: "int", defaultValue: 0} > ], > layer: layer_wasserkraft > }); > > > var options = { > projection: new OpenLayers.Projection("EPSG:900913"), > displayProjection: new OpenLayers.Projection("EPSG:4326"), > units: "m", > numZoomLevels: 18, > maxResolution: 156543.0339, > maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, > 20037508.34), > controls:[ > new OpenLayers.Control.Permalink(), > new OpenLayers.Control.MouseDefaults(), > new OpenLayers.Control.LayerSwitcher(), > new OpenLayers.Control.MousePosition(), > new OpenLayers.Control.PanZoomBar() > > ] > }; > var attribgridPanel_wea = new Ext.grid.GridPanel({ > > title: "WEA", > region: "center", > viewConfig: {forceFit: true}, > store: store, > collapsible : true, > sm: new GeoExt.grid.FeatureSelectionModel(), > cm: new Ext.grid.ColumnModel({ > defaults: { > sortable: true > }, > columns: [ > {header: "Bez", dataIndex: "Bez",width: 25}, > {header: "Standort", dataIndex: "Standort"}, > {header: "Betreiber", dataIndex: "Betreiber", width: > 135}, > {header: "Typ", dataIndex: "Typ", width: 35} > ] > }), > bbar: [{ > text:"<h1>an Auswahl heranzoomen</h1>", > cls: 'x-btn-text-icon', > icon: '../styles/magnifier.png', > handler:function() > { > attribgridPanel_wea.getSelectionModel().each(function(rec){ > var feature = rec.get("feature"); > > mapPanel.map.zoomToExtent(feature.geometry.getBounds()); > }) > } > }] > > > }); > > > var attribgridPanel_biogas = new Ext.grid.GridPanel({ > > title: "Biogas", > region: "center", > viewConfig: {forceFit: true}, > store: store_biogas, > collapsible : true, > sm: new GeoExt.grid.FeatureSelectionModel(), > cm: new Ext.grid.ColumnModel({ > defaults: { > sortable: true > }, > columns: [ > {header: "Ort", dataIndex: "Ort",width: 25}, > {header: "Antr_St", dataIndex: "Antr_St"}, > {header: "ID", dataIndex: "ID", width: 35} > ] > }), > bbar: [{ > text:"<h1>an Auswahl heranzoomen</h1>", > cls: 'x-btn-text-icon', > icon: '../styles/magnifier.png', > handler:function() > { > > attribgridPanel_biogas.getSelectionModel().each(function(rec){ > var feature = rec.get("feature"); > > mapPanel.map.zoomToExtent(feature.geometry.getBounds()); > }) > } > }] > > > }); > > var attribgridPanel_wasserkraft = new Ext.grid.GridPanel({ > > title: "Wasserkraft", > region: "center", > viewConfig: {forceFit: true}, > store: store_wasserkraft, > collapsible : true, > sm: new GeoExt.grid.FeatureSelectionModel(), > cm: new Ext.grid.ColumnModel({ > defaults: { > sortable: true > }, > columns: [ > {header: "Bez", dataIndex: "Bez",width: 25}, > {header: "Anmerkung", dataIndex: "Anmerkung", width: > 135}, > {header: "ID", dataIndex: "ID", width: 35} > ] > }), > bbar: [{ > text:"<h1>an Auswahl heranzoomen</h1>", > cls: 'x-btn-text-icon', > icon: '../styles/magnifier.png', > handler:function() > { > > attribgridPanel_wasserkraft.getSelectionModel().each(function(rec){ > var feature = rec.get("feature"); > > mapPanel.map.zoomToExtent(feature.geometry.getBounds()); > }) > } > }] > > > }); > > > > var loadingpanel = new OpenLayers.Control.LoadingPanel(); > > map = new OpenLayers.Map('map', options); > map.addControl(loadingpanel); > > > /* > var tree = new Ext.tree.TreePanel({ > region: "west", > title: "Map Layers", > width: 200, > autoScroll: true, > enableDD: true, > lines: false, > rootVisible: false, > root: new GeoExt.tree.LayerContainer({ > layerStore: mapPanel.layers, > expanded: true > }) > > }); > */ > > > > new Ext.Viewport({ > layout: "border", > items: [{ > region: "north", > contentEl: "title", > height: 50 > }, { > region: "center", > id: "mappanel", > title: "Map", > xtype: "gx_mappanel", > map: map, > layers: [gsat, > mapnik,layer_wea,layer_biogas,layer_wasserkraft,layer_zgbgrenze], > > minScale: 500000, > maxScale: 100000, > numZoomLevels: 2, > center: [1169180, 6843865], > zoom: 9, > split: true > } > /* > , { > region: "west", > title: "Karteninhalt", > items:[], > width: 0, > split: true > } > */ > , { > region: "east", > split: true, > collapsed:false, > collapsible:true, > xtype: 'tabpanel', > title: 'WEA', > width: 500, > items: [ > > attribgridPanel_wea,attribgridPanel_biogas,attribgridPanel_wasserkraft > ] > > }] > }); > > var mapPanel = Ext.getCmp("mappanel"); > > }); > > </script> > <style type="text/css"> > > .olControlMousePosition { > bottom: 5px; > background-color:white; > color: black; > } > > .olControlLoadingPanel { > background-image:url(../styles/loading.gif); > position: relative; > width: 195px; > height: 11px; > background-position:center; > background-repeat:no-repeat; > display: none; > } > > .title{font-family:arial;color:#3E4B54;padding:5px;} > > </style> > </head> > <body> > <div id="title" class ="title"> > <h1>Erneuerbare Energiequelle im Zweckverband Großraum > Braunschweig</h1> > </div> > > <div id="description"> > <p></p> > </div> > > > > </body> > </html> > > > <viewport.html>_______________________________________________ > Users mailing list > [email protected] > http://www.geoext.org/cgi-bin/mailman/listinfo/users -- Andreas Hocevar OpenGeo - http://opengeo.org/ Expert service straight from the developers. _______________________________________________ Users mailing list [email protected] http://www.geoext.org/cgi-bin/mailman/listinfo/users
