I want to use OpenLayers, a GeoServer WMS layer with the Google Maps api as a base.
My GeoServer WMS layer is reprojected to EPSG:900913, when I open the GeoServer OpenLayers map, everything is OK.
Layer Configuration
On a map created in OpenLayers with projection EPSG:900913 for working with the Google Maps API, then all my layers took this projection. Not forgetting that the GeoServer natively reprojects layer as configured above.
Tested with all overlay property to see where he was going to stop the WMS layer but she even appears.
Another attempt, instead of using the default maxResolution bounds and used them in the openlayers geoserver, open the layer in openlayers with geoserver teclei F12 and copied the properties and bounds maxResolution to my map, it did not work.
The question is: why the WMS layer does not appear?
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(
'WMS',
'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.01,-30.01);
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>
Another thing I picked up the WMS Network link on this same layer and put the overlay on Earth was perfect. So my layer is properly designed .
My page result:
page
Link geoserver:
http://localhost:8080/geoserver/Teste/wms?service=WMS&version=1.1.0&request=GetMap&layers=Teste:onibus&styles=&bbox=-51.2809219360352,-30.2445888519287,-51.0207977294922,-29.9661273956299&width=478&height=512&srs=EPSG:900913&format=application/openlayers
Code openlayers on geoserver:
<script>
var map;
var untiled;
var tiled;
var pureCoverage = false;
// pink tile avoidance
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
// make OL compute scale according to WMS spec
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
function init(){
// if this is just a coverage or a group of them, disable a few items,
// and default to jpeg format
format = 'image/png';
if(pureCoverage) {
document.getElementById('filterType').disabled = true;
document.getElementById('filter').disabled = true;
document.getElementById('antialiasSelector').disabled = true;
document.getElementById('updateFilterButton').disabled = true;
document.getElementById('resetFilterButton').disabled = true;
document.getElementById('jpeg').selected = true;
format = "image/jpeg";
}
var bounds = new OpenLayers.Bounds(
-51.2809219360352, -30.2445888519287,
-51.0207977294922, -29.9661273956299
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.0010877400636672,
projection: "EPSG:900913",
units: 'm'
};
map = new OpenLayers.Map('map', options);
// setup tiled layer
tiled = new OpenLayers.Layer.WMS(
"Teste:onibus - Tiled", "http://localhost:8080/geoserver/Teste/wms",
{
LAYERS: 'Teste:onibus',
STYLES: '',
format: format,
tiled: true,
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:900913' : false}
}
);
// setup single tiled layer
untiled = new OpenLayers.Layer.WMS(
"Teste:onibus - Untiled", "http://localhost:8080/geoserver/Teste/wms",
{
LAYERS: 'Teste:onibus',
STYLES: '',
format: format
},
{
singleTile: true,
ratio: 1,
isBaseLayer: true,
yx : {'EPSG:900913' : false}
}
);
map.addLayers([untiled, tiled]);
// build up all controls
map.addControl(new OpenLayers.Control.PanZoomBar({
position: new OpenLayers.Pixel(2, 15)
}));
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
map.zoomToExtent(bounds);
// wire up the option button
var options = document.getElementById("options");
options.onclick = toggleControlPanel;
// support GetFeatureInfo
map.events.register('click', map, function (e) {
document.getElementById('nodelist').innerHTML = "Loading... please wait...";
var params = {
REQUEST: "GetFeatureInfo",
EXCEPTIONS: "application/vnd.ogc.se_xml",
BBOX: map.getExtent().toBBOX(),
SERVICE: "WMS",
INFO_FORMAT: 'text/html',
QUERY_LAYERS: map.layers[0].params.LAYERS,
FEATURE_COUNT: 50,
Layers: 'Teste:onibus',
WIDTH: map.size.w,
HEIGHT: map.size.h,
format: format,
styles: map.layers[0].params.STYLES,
srs: map.layers[0].params.SRS};
// handle the wms 1.3 vs wms 1.1 madness
if(map.layers[0].params.VERSION == "1.3.0") {
params.version = "1.3.0";
params.j = parseInt(e.xy.x);
params.i = parseInt(e.xy.y);
} else {
params.version = "1.1.1";
params.x = parseInt(e.xy.x);
params.y = parseInt(e.xy.y);
}
// merge filters
if(map.layers[0].params.CQL_FILTER != null) {
params.cql_filter = map.layers[0].params.CQL_FILTER;
}
if(map.layers[0].params.FILTER != null) {
params.filter = map.layers[0].params.FILTER;
}
if(map.layers[0].params.FEATUREID) {
params.featureid = map.layers[0].params.FEATUREID;
}
OpenLayers.loadURL("http://localhost:8080/geoserver/Teste/wms", params, this, setHTML, setHTML);
OpenLayers.Event.stop(e);
});
}
// sets the HTML provided into the nodelist element
function setHTML(response){
document.getElementById('nodelist').innerHTML = response.responseText;
};
// shows/hide the control panel
function toggleControlPanel(event){
var toolbar = document.getElementById("toolbar");
if (toolbar.style.display == "none") {
toolbar.style.display = "block";
}
else {
toolbar.style.display = "none";
}
event.stopPropagation();
map.updateSize()
}
// Tiling mode, can be 'tiled' or 'untiled'
function setTileMode(tilingMode){
if (tilingMode == 'tiled') {
untiled.setVisibility(false);
tiled.setVisibility(true);
map.setBaseLayer(tiled);
}
else {
untiled.setVisibility(true);
tiled.setVisibility(false);
map.setBaseLayer(untiled);
}
}
// Transition effect, can be null or 'resize'
function setTransitionMode(transitionEffect){
if (transitionEffect === 'resize') {
tiled.transitionEffect = transitionEffect;
untiled.transitionEffect = transitionEffect;
}
else {
tiled.transitionEffect = null;
untiled.transitionEffect = null;
}
}
// changes the current tile format
function setImageFormat(mime){
// we may be switching format on setup
if(tiled == null)
return;
tiled.mergeNewParams({
format: mime
});
untiled.mergeNewParams({
format: mime
});
/*
var paletteSelector = document.getElementById('paletteSelector')
if (mime == 'image/jpeg') {
paletteSelector.selectedIndex = 0;
setPalette('');
paletteSelector.disabled = true;
}
else {
paletteSelector.disabled = false;
}
*/
}
// sets the chosen style
function setStyle(style){
// we may be switching style on setup
if(tiled == null)
return;
tiled.mergeNewParams({
styles: style
});
untiled.mergeNewParams({
styles: style
});
}
// sets the chosen WMS version
function setWMSVersion(wmsVersion){
// we may be switching style on setup
if(wmsVersion == null)
return;
if(wmsVersion == "1.3.0") {
origin = map.maxExtent.bottom + ',' + map.maxExtent.left;
} else {
origin = map.maxExtent.left + ',' + map.maxExtent.bottom;
}
tiled.mergeNewParams({
version: wmsVersion,
tilesOrigin : origin
});
untiled.mergeNewParams({
version: wmsVersion
});
}
function setAntialiasMode(mode){
tiled.mergeNewParams({
format_options: 'antialias:' + mode
});
untiled.mergeNewParams({
format_options: 'antialias:' + mode
});
}
function setPalette(mode){
if (mode == '') {
tiled.mergeNewParams({
palette: null
});
untiled.mergeNewParams({
palette: null
});
}
else {
tiled.mergeNewParams({
palette: mode
});
untiled.mergeNewParams({
palette: mode
});
}
}
function setWidth(size){
var mapDiv = document.getElementById('map');
var wrapper = document.getElementById('wrapper');
if (size == "auto") {
// reset back to the default value
mapDiv.style.width = null;
wrapper.style.width = null;
}
else {
mapDiv.style.width = size + "px";
wrapper.style.width = size + "px";
}
// notify OL that we changed the size of the map div
map.updateSize();
}
function setHeight(size){
var mapDiv = document.getElementById('map');
if (size == "auto") {
// reset back to the default value
mapDiv.style.height = null;
}
else {
mapDiv.style.height = size + "px";
}
// notify OL that we changed the size of the map div
map.updateSize();
}
function updateFilter(){
if(pureCoverage)
return;
var filterType = document.getElementById('filterType').value;
var filter = document.getElementById('filter').value;
// by default, reset all filters
var filterParams = {
filter: null,
cql_filter: null,
featureId: null
};
if (OpenLayers.String.trim(filter) != "") {
if (filterType == "cql")
filterParams["cql_filter"] = filter;
if (filterType == "ogc")
filterParams["filter"] = filter;
if (filterType == "fid")
filterParams["featureId"] = filter;
}
// merge the new filter definitions
mergeNewParams(filterParams);
}
function resetFilter() {
if(pureCoverage)
return;
document.getElementById('filter').value = "";
updateFilter();
}
function mergeNewParams(params){
tiled.mergeNewParams(params);
untiled.mergeNewParams(params);
}
</script>
nmtoken
13.6k5 gold badges39 silver badges91 bronze badges
asked Mar 26, 2014 at 12:11
2 Answers 2
Your Geoserver layer's bbox is the issue-
&bbox=-51.2809219360352,-30.2445888519287,-51.0207977294922,-29.9661273956299. Note that in epsg:900913, this would be a tiny little blip just South of Ghana.
Either convert the bounds to 3857/900913 or take them out altogether to fix the problem (note that 900913 is identical to 3857).
Try Using this comand google_streets.setIsBaseLayer(false);
remember to put it before you add the layers to the map.
answered Sep 12, 2014 at 19:34
lang-js