I'm trying to add a WFS layer and it's not working.
Here is full code:
<html>
<head>
<meta charset='utf-8'/>
<title>WebGis</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<!-- GC -->
<style type="text/css">
.legend {
padding-left: 18px;
}
.x-tree-node-el {
border-bottom: 1px solid #ddd;
padding-bottom: 3px;
}
.x-tree-ec-icon {
width: 3px;
}
.gx-tree-layer-icon {
display: none;
}
</style>
<script type="text/javascript" src="ext-all.js"></script>
<link rel="stylesheet" href="OpenLayers-2.12/theme/default/google.css" type="text/css"> </link>
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxx&sensor=false"></script>
<script src="OpenLayers-2.12/OpenLayers.js"></script>
<link rel="stylesheet" href="style/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="GeoExt/script/GeoExt.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.require(['*']);
map = new OpenLayers.Map({
div: "map",
maxExtent: new OpenLayers.Bounds(
-20037508.34, -20037508.34, 20037508.34, 20037508.34
)
});
OpenLayers.ProxyHost= "proxy.cgi?url=";
var geographic = new OpenLayers.Projection("EPSG:4326");
var mercator = new OpenLayers.Projection("EPSG:900913");
var croatia = new OpenLayers.LonLat(16.083984375, 45.72152152227954).transform(
geographic, mercator
);
var options = {
units: "m",
maxResolution: 'auto',
maxExtent: croatia,
};
var BingapiKey = "xxxxxx";
var streets = new OpenLayers.Layer.Google(
"Google Streets"
);
var physical = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN}
);
var ghybrid = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID}
);
var satellite = new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE}
);
// Bing's Road imagerySet
var road = new OpenLayers.Layer.Bing({
key: BingapiKey,
type: "Road"
});
// Bing's Aerial imagerySet
var aerial = new OpenLayers.Layer.Bing({
key: BingapiKey,
type: "Aerial"
});
// Bing's AerialWithLabels imagerySet
var bhybrid = new OpenLayers.Layer.Bing({
key: BingapiKey,
type: "AerialWithLabels",
name: "Bing Aerial With Labels"
});
var osm = new OpenLayers.Layer.OSM();
var highlight = new OpenLayers.Layer.Vector("Highlighted Features", {
displayInLayerSwitcher: false,
isBaseLayer: false
});
//wfs layer
var wfsLayer = new OpenLayers.Layer.Vector("cjevovodi", {
strategies: [new OpenLayers.Strategy.BBOX()],
reportError: true,
visibility: true,
protocol: new OpenLayers.Protocol.WFS({
url: "http://localhost:8080/geoserver/wfs",
featureType: "vgv2:cjevovodi",
featurePrefix: "vgv2",
featureNS: "http://localhost:8080/geoserver/vgv2",
geometryName: "simple_geom",
srsName: "EPSG:4326",
}),
isBaseLayer: false
});
map.addLayers([streets, physical, ghybrid, satellite, road, aerial, bhybrid, osm, wfsLayer]);
var LayerSwitcher = new OpenLayers.Control.LayerSwitcher({});
map.addControl (LayerSwitcher);
new OpenLayers.Control.Navigation();
new OpenLayers.Control.PanZoomBar();
var scaleline = new OpenLayers.Control.ScaleLine();
map.addControl(scaleline);
map.addControl(new OpenLayers.Control.MousePosition());
new OpenLayers.Control.KeyboardDefaults();
map.setCenter(croatia, 13);
Ext.QuickTips.init();
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
var viewport = Ext.create('Ext.Viewport', {
id: 'border-example',
layout: 'border',
items: [
// create instance immediately
Ext.create('Ext.Component', {
region: 'north',
height: 22, // give north and south regions a height
autoEl: {
tag: 'div',
html:'<h1 align="center"> <p>WEBGIS VELIKA GORICA - dobrodošli na GIS preglednik Velike Gorice</p> </h1> '
}
}), {
region: 'south',
contentEl: 'south',
split: true,
height: 50,
minSize: 50,
maxSize: 100,
collapsible: true,
collapsed: true,
title: 'Dodatne info',
margins: '0 0 0 0'
}, {
stateId: 'navigation-panel',
id: 'east-panel',
region: 'east',
title: 'Prikaz tablica',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [ '->', {
xtype: 'button',
text: 'test',
tooltip: 'Test Button'
}]
}],
animCollapse: true,
collapsible: true,
split: true,
width: 200,
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
activeTab: 0,
tabPosition: 'bottom',
items: [{
html: '<p>Popis tablica</p>',
title: 'Tablice',
autoScroll: true
}, Ext.create('Ext.grid.PropertyGrid', {
title: 'Svojstva tablice',
closable: false,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
}, {
region: 'west',
stateId: 'navigation-panel',
id: 'west-panel', // see Ext.getCmp() below
title: 'Izbornik',
split: true,
width: 200,
minWidth: 175,
maxWidth: 400,
collapsible: true,
animCollapse: true,
margins: '0 0 0 5',
layout: 'accordion',
items: [{
contentEl: 'west',
title: 'Layeri',
iconCls: 'nav' }]
},
// in this instance the TabPanel is not wrapped by another panel
// since no title is needed, this Panel is added directly
// as a Container
Ext.create('Ext.tab.Panel', {
region: 'center',
deferredRender: false,
activeTab: 0,
items: [{
contentEl: 'center1',
title: 'Karta Velike Gorice',
closable: false,
autoScroll: true,
border: 'false'
}]
})]
});
Ext.get("hideit").on('click', function(){
var w = Ext.getCmp('west-panel', 'east-panel');
w.collapsed ? w.expand() : w.collapse(),
e.collapsed ? e.expand() : e.collapse();
});
});</script>
</head>
<body onload="initialize()">
<!-- use class="x-hide-display" to prevent a brief flicker of the content -->
<div id="west" class="x-hide-display">
<p>-----</p>
</div>
<div id="east" class="x-hide-display"> </div>
<div id="center1" " class="x-hide-display">
<a id="hideit" href="#">Sakrij / prikazi izbornik</a>
Poseban tekst ovdje...
<hr>
<div style="color:#0000FF">
<div align="center" id='map' style='width: 1550px; height:800px;'>
</div>
<div id="south" class="x-hide-display">
<p>-</p></p>
</body>
</html>
WMS layer in this map works perfect, but WFS layer is problem. I put the HTML to GeoServer folder at: C:\Program Files\GeoServer 2.2.5\data_dir\www\complex
and open: localhost:8080/GeoServer%202.2.5/data_dir/www/complex/complex.html, panel and map works, but WFS layer not. Why? Where is the problem?
I tried to change projection to epsg:900913, nothing.
