Не получается отобразить всплывающее окно (popup) с атрибутами wms слоя в OpenLayers 3. Использую Geoserver.
Вот мой код:
Код: Выделить всё
<!DOCTYPE html>
<html>
<head>
<title>WMS GetFeatureInfo (Image Layer)</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="info"> </div>
<script>
var wmsSource = new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/ts/wms',
params: {'LAYERS': 'ts:TS_type_uchastki'},
serverType: 'geoserver',
crossOrigin: 'anonymous'
});
var osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
var wmsLayer = new ol.layer.Image({
source: wmsSource
});
var view = new ol.View({
center: ol.proj.fromLonLat([73.3685900,54.9924400]),
zoom: 11
});
var map = new ol.Map({
layers: [osm, wmsLayer],
target: 'map',
view: view
});
map.on('singleclick', function(evt) {
document.getElementById('info').innerHTML = '';
var viewResolution = /** @type {number} */ (view.getResolution());
var url = wmsSource.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, 'EPSG:3857',
{'INFO_FORMAT': 'text/html'});
if (url) {
document.getElementById('info').innerHTML =
'<iframe seamless src="' + url + '"></iframe>';
}
});
</script>
</body>
</html>
Может есть готовое решение?