I'm using GeoServer with OpenLayers, happens that my WMS layers do not appear. Do I need to overlay a WMS layer in PostGIS that I have with google maps api and does not work appears in WMS layer switcher but does not appear on the map. Generated the wms link to the Earth and visualized layer is perfect. I then tested by creating a simple map in openlayers with those with a WMS layer that comes in geoserver and neither worked. What could be wrong? Debuguei the code in chrome, with a breakpoint in loading the WMS layer and does not give any errors.
This is my code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>My OpenLayers Map</title>
<script type='text/javascript' src='OpenLayers.js'></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&v=3.2"></script>
<script type='text/javascript'>
var map;
var mercatorProjection = new OpenLayers.Projection('EPSG:900913');
var latLongProjection = new OpenLayers.Projection('EPSG:4326');
var bounds = new OpenLayers.Bounds(
-51.2809219360352, -30.2445888519287,
-51.0207977294922, -29.9661273956299
);
function init() {
map = new OpenLayers.Map('map_element',{
maxExtent: bounds,
maxResolution: 0.0010877400636672,
units: 'm',
//allOverlays: true,
projection: mercatorProjection,
displayProjection: latLongProjection
});
var google_streets = new OpenLayers.Layer.Google(
"Ruas",
{numZoomLevels: 20}
);
var wms_layer = new OpenLayers.Layer.WMS(
'Linhas Ônibus',
'http://localhost:8080/geoserver/Teste/wms',
{layers: 'Teste:onibus', transparent: true},
{isBaseLayer: false,
opacity: 0.7}
);
//Adiciona as camadas ao mapa
map.addLayers([google_streets, wms_layer]);
var point = new OpenLayers.LonLat(-51.22,-30.08);
point.transform(new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject());
map.setCenter(point, 10);
//Camada de controle que vai mostrar as camadas no mapa
map.addControl(new OpenLayers.Control.LayerSwitcher({}));
//Verifica se o mapa tem um ponto central e o extende a sua extensão máxima
if(!map.getCenter()){
map.zoomToMaxExtent();
}
}
</script>
</head>
<body onload='init();'> <!-- Chama a função js init() -->
<!--Elemento HTML onde o mapa é exibido -->
<div id='map_element' style='width: 800px; height: 800px;'>
</div>
</body>
</html>
