[Users] Strange behaviour in Geoext Project.
Robert Buckley
robertdbuckley at yahoo.com
Thu Sep 2 09:04:02 CEST 2010
Hi,
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?
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
3. GeoExt: I can´t click on the points until a grid has been loaded
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.
5. The loading panel is not centered in the map panel.
6. Should I do this as a wms layer instead?
7. The points are always set with opacity, even though I have commented out the
opacity property!
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>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20100902/f54abc73/attachment-0001.html
More information about the Users
mailing list