Thursday, 12 December 2019

GeoServer WMS Layer not working in OpenLayers


Here is my code:


var map;

function init() {
var options = {
maxExtent: new OpenLayers.Bounds(-135.326858520508,-30.5615100860596,179.357788085938,69.604377746582),
units: 'm',

projection: "EPSG:900913",
};
map = new OpenLayers.Map('map_element', options);
// setup tiled layer
var tiled = new OpenLayers.Layer.WMS(
"ne_10m_railroads", "http://localhost:8080/geoserver/earth/wms",
{
LAYERS: 'earth:ne_10m_railroads',
STYLES: '',
format: OpenLayers.Format.WMSGetFeatureInfo,

tiled: true,
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,

}
);


map.addLayer(tiled);

if(!map.getCenter()){ map.zoomToMaxExtent(); }
}

Snapshot of the webpage I created - images are not loading!


This is the code for layer preview generated by GeoServer :


 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(
-135.326858520508, -30.5615100860596,
179.357788085938, 69.604377746582
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 1.2292369008064297,
projection: "EPSG:900913",

units: 'm'
};
map = new OpenLayers.Map('map', options);

// setup tiled layer
tiled = new OpenLayers.Layer.WMS(
"earth:ne_10m_railroads - Tiled", "http://localhost:8080/geoserver/earth/wms",
{
LAYERS: 'earth:ne_10m_railroads',
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(
"earth:ne_10m_railroads - Untiled", "http://localhost:8080/geoserver/earth/wms",
{
LAYERS: 'earth:ne_10m_railroads',
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: 'earth:ne_10m_railroads',
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/earth/wms", params, this, setHTML, setHTML);
OpenLayers.Event.stop(e);
});
}

and its preivew is below:enter image description here




Oh I got it!!! I shouldn't add those extra parameters: But I want to know what it actually means : I changed the Layer code to this and its working:



 map = new OpenLayers.Map('map_element', options);            
// setup tiled layer
var tiled = new OpenLayers.Layer.WMS(
"ne_10m_railroads", "http://localhost:8080/geoserver/earth/wms",
{
LAYERS: 'earth:ne_10m_railroads'},

{}
);


What happens when I add these extra parameters..where it is wrong?


{
LAYERS: 'earth:ne_10m_railroads',
STYLES: '',
format: OpenLayers.Format.WMSGetFeatureInfo,
tiled: true,
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
},

Answer



The WMS object takes 4 parameters - name, baseURL, WMS options. OpenLayers options. As you have in your working code:



 map = new OpenLayers.Map('map_element', options);            
// setup tiled layer
var tiled = new OpenLayers.Layer.WMS(
"ne_10m_railroads", "http://localhost:8080/geoserver/earth/wms",
{
LAYERS: 'earth:ne_10m_railroads'},

{}
);


When you tried to add extra parameters they were OpenLayers parameters and so should have gone in the second map not the first. So


       {
LAYERS: 'earth:ne_10m_railroads',
STYLES: '',
format: OpenLayers.Format.WMSGetFeatureInfo,
tiled: true,
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
},

Should be:



       {
LAYERS: 'earth:ne_10m_railroads',
STYLES: '',
format: 'image/png'

},
{
tiled: true,
tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
}


so that the tiled parts go to OpenLayers rather than the WMS (which doesn't understand them).


No comments:

Post a Comment