Me gustaría superponer una capa de Geoserver WMS en OpenLayers y OpenStreetMaps. Tengo problemas porque el WMS no se muestra encima de las capas de OSM (mapnik, cyclemap). Este es el código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Exercise 13 OSM Basemaps</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script>
var map;
function init(){
map = new OpenLayers.Map("map");
map.addControl(new OpenLayers.Control.LayerSwitcher());
var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
var cycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
//this is the wms layer addressm when opening in geoserver OL preview:
//http://gis.otg.pr.gov:8080/geoserver/CENTRAL_GIS_PR/wms?service=WMS&version=1.1.0&request=GetMap&layers=CENTRAL_GIS_PR:AMB_CONSERV_AREAS_NATURALES_PROTEGIDAS_2010&styles=&bbox=-68.11626634304696,17.77573989512554,-65.21874395570885,18.645740062494458&width=1099&height=330&srs=EPSG:4326&format=application/openlayers
// var mytest = new OpenLayers.Layer.WMS(
// "Áreas naturales protegidas, 2010",
// "http://gis.otg.pr.gov:8080/geoserver/CENTRAL_GIS_PR/wms?service=WMS&version=1.1.0",
// {
// layers: 'CENTRAL_GIS_PR:AMB_CONSERV_AREAS_NATURALES_PROTEGIDAS_2010',
// format: 'image/png',
// transparent: true
// },
// {
// 'opacity': 0.66, 'isBaseLayer': false, 'wrapDateLine': true
// }
// );
mytest = new OpenLayers.Layer.WMS("Áreas naturales protegidas, 2010",
"http://gis.otg.pr.gov:8080/geoserver/CENTRAL_GIS_PR/wms?",
{
workspace: 'CENTRAL_GIS_PR',
layers: 'AMB_CONSERV_AREAS_NATURALES_PROTEGIDAS_2010',
format: 'image/png'
},
{
'opacity': 0.66, 'isBaseLayer': false
}
);
map.addLayers([mapnik, cycleMap, mytest]);
var center = new OpenLayers.LonLat(-66.25, 18.25);
var centerOSM = center.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:3857")
);
map.setCenter(centerOSM, 8);
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>Usando otro código puedo ver el wms solo:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Exercise OSM Basemaps</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
var map, layer;
function init()
{
map = new OpenLayers.Map( 'map' );
// This is the address in geoserver...
// http://gis.otg.pr.gov:8080/geoserver/CENTRAL_GIS_PR/wms?service=WMS&version=1.1.0&request=GetMap&layers=CENTRAL_GIS_PR:AMB_CONSERV_AREAS_NATURALES_PROTEGIDAS_2010&styles=&bbox=-68.11626634304696,17.77573989512554,-65.21874395570885,18.645740062494458&width=1099&height=330&srs=EPSG:4326&format=application/openlayers
layer = new OpenLayers.Layer.WMS("Áreas naturales protegidas, 2010",
"http://gis.otg.pr.gov:8080/geoserver/CENTRAL_GIS_PR/wms?",
{
workspace: 'CENTRAL_GIS_PR',
layers: 'AMB_CONSERV_AREAS_NATURALES_PROTEGIDAS_2010',
format: 'image/png'
},
{
buffer: 0,
ratio: 1.9,
displayOutsideMaxExtent: true
}
);
map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
-68.11626634304696,17.77573989512554,-65.21874395570885,18.645740062494458
map.zoomToExtent(
new OpenLayers.Bounds(-68.11,17.77,-65.21,18.64)
);
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>¿Qué me falta aquí? ¿Parece que hay incompatibilidades de proyección?
