I want to show the features of a layer from a GeoServer WMS at the point where I click with OpenLayers 3. I used this tutorial but when I use my own server the URL that getGetFeatureInfoUrl returns is always unidentified.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<title>WMS GetFeatureInfo (Tile Layer)</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL">
</script>
<script src="https://openlayers.org/en/v4.2.0/build/ol.js">
</script>
</head>
<body>
<div id="map" class="map"></div>
<div id="info">Info Bereich: </div>
<script>
//OSM Layer einbinden
var osmlayer = new ol.layer.Tile({source: new ol.source.OSM()});
//Feauters Layer
var ErdRoomsSource = new ol.source.TileWMS({
source: new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/wms?',
params: {'LAYERS': 'HTW_Erd:Rooms', 'TILED': true},
serverType: 'geoserver',
crossOrigin: 'anonymous'
})
});
var ErdRooms = new ol.layer.Tile({
source: ErdRoomsSource
});
//Visual Layer
var ErdRoomsImage = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/wms',
params: {'LAYERS': 'HTW_Erd:Rooms', 'STYLES': 'polygon', 'VERSION': '2.11.0', 'FORMAT': 'image/png'},
ratio: 1,
serverType: 'geoserver',
})
});
osmlayer.setZIndex(0);
ErdRoomsImage.setZIndex(1);
var layers = [osmlayer, ErdRoomsImage];
var view = new ol.View({
center: [1529088.5676403488, 6627805.4185389215],
zoom: 18
});
var map = new ol.Map({
layers: layers,
target: 'map',
view: view
});
map.on('singleclick', function(evt) {
document.getElementById('info').innerHTML = '';
var viewResolution = /** @type {number} */ (view.getResolution());
var url = ErdRoomsSource.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, 'EPSG:4326',
{'INFO_FORMAT': 'text/plain', 'propertyName': 'ref'});
document.getElementById('info').innerHTML = 'url: ' + url;
if (url) {
document.getElementById('info').innerHTML =
'<iframe seamless src="' + url + '"></iframe>';
}
});
map.on('pointermove', function(evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
var hit = map.forEachLayerAtPixel(pixel, function() {
return true;
});
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});
</script>
</body>
</html>
Maybe it is just something with the settings of my server but I don't know what I could have forgotten. I hope you can help my at this problem.
