La solicitud GetFeatureInfo a Geoserver devuelve un error.
Estoy intentando hacer una solicitud GetFeatureInfo con WMS en Open Layers a Geoserver. La solicitud parece ser hecha y se carga en cada clic como se esperaba, pero la “imagen” se bloquea cada vez. La solicitud se hace a través de un proxy en mi propio ordenador que parece estar funcionando bien. Aquí hay una imagen de los eventos y el código que he estado usando. Como soy bastante inexperto con todos los componentes de esto, cualquier ayuda sería apreciada. Gracias chicos.
El script:
<script>
var layers = [];
layers[0] = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/AL2/wms?',
params: { LAYERS: 'AL2:A2', 'TILED': true, projection: 'EPSG:4326', VERSION: '1.1.1' },
servertype: 'geoserver';
})
});
layers[1] = new ol.layer.Tile({
source: new ol.source.OSM()
});
layers[2] = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
target: 'map',
layers: layers,
view: new ol.View({
center: ol.proj.fromLonLat([13, 56]),
zoom: 8,
EPSG: 4326,
})
});
function switchLayer(evt) {
layers[evt.value].setVisible(evt.checked);
}
map.on('singleclick', function (event) {
var url = '../../proxy/proxy.aspx?url=' + layers[0].getSource().getFeatureInfoUrl
(event.coordinate,
map.getView().getResolution(), map.getView().getProjection().getCode(),
{
INFO_FORMAT: 'text/html',
Layers: "AL2:A2"
});
if (url) {
document.getElementById('info').innerHTML =
'<iframe seamless src="' + url + '"></iframe>';
}
});
</script>
HTML:
“`html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>OpenLayers</title>
<link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v6.5.0/build/ol.js" script="" type="text/javascript"></script>
</head>
<body>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js">
</script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css">
<pre><code><div id="map" style="position:relative; width: 100%; height: 800px; margin: 0;"></div>
<div id="toolbox" style="position:absolute; top:08px; right:8px; padding:3px; border-radius:4px; color:#fff;background:rgba(255, 255, 255, 0.4); z-index:100;">
<ul id="layerswitcher" style="margin: 0; padding: 10px; border-radius: 4px; background: rgba(0, 60,136, 0.5); list-style-type: none;">
<li><label><input type="checkbox" name="layer" value="0" checked="checked" onclick="javascript:switchLayer(this)">Geoserver</label></li>
<li><label><input type="checkbox" name="layer" value="1" checked="checked" onclick="javascript:switchLayer(this)">LTU</label></li>
<li><label><input type="checkbox" name="layer" value="2" checked="checked" onclick="javascript:switchLayer(this)">GPS</label></li>
</ul>
</div>
<div id="info"> </div>
</code></pre>
</body>
“`