I have OpenLayers OSM map with two WMS layers hotpoint and threat provided from GeoServer. I need to display attribute information from wms layers with popup or other appearing info table. I find this ask, but
don't understand this work. My code:
$(document).ready(function() {
view = new ol.View({
center: [4701182.98765148, 7492051.764399836],
zoom: 5,
maxZoom: 18,
minZoom: 2
});
var format = 'image/png';
var osm = new ol.layer.Tile({
source: new ol.source.OSM(),
visible: true,
name: 'osm'
});
var mousePosition = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(2),
projection: 'EPSG:4326',
target: document.getElementById('myposition'),
undefinedHTML: ' '
});
var untiledhotpoint = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://192.168.255.197:8080/geoserver/geoportal/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
LAYERS: 'geoportal:hotpoint',
STYLES: '',
}
})
});
var hotpoint = new ol.layer.Tile({
visible: false,
source: new ol.source.TileWMS({
url: 'http://192.168.255.197:8080/geoserver/geoportal/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
LAYERS: 'geoportal:hotpoint',
STYLES: '',
}
})
});
var untiledthreat = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://192.168.255.197:8080/geoserver/geoportal/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
LAYERS: 'geoportal:threat',
STYLES: '',
}
})
});
var threat = new ol.layer.Tile({
visible: false,
source: new ol.source.TileWMS({
url: 'http://192.168.255.197:8080/geoserver/geoportal/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
tiled: true,
LAYERS: 'geoportal:threat',
STYLES: '',
}
})
});
var map = new ol.Map({
target: 'map',
controls: ol.control.defaults().extend([
new ol.control.ScaleLine(),
new ol.control.ZoomSlider()
]),
layers: [osm, untiledhotpoint, hotpoint, threat, untiledthreat],
view: view,
renderer: 'canvas'
});
map.addControl(mousePosition);
var attributeData = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer){
return feature;
}, null, function(layer) {
return layer === hotpoint;
});
var info = document.getElementById('info');
if (feature){
info.innerHTML = '<div>' + feature.get('point_id')+'</div>'
} else {
info.innerHTML = ' ';
}
};
});
Best Answer
You are trying to use
forEachFeatureAtPixel
on a map with onlyImage
/TileImage
layers, butforEachFeatureAtPixel
requires OpenLayers to know about the features (that is, it only works on vector layers).What you are looking for is probably is how to use the
getFeatureInfo
WMS operation with OpenLayers 3. Check out the official example, containing this code:And if you don't want to use an iframe and let the server generate your layout, then
ol.format.WMSGetFeatureInfo
is probably the way to go.