OpenLayers3, display attribute information

Question

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 = '&nbsp;';
    }
};      
});

Answer 1

You are trying to use forEachFeatureAtPixel on a map with only Image/TileImage layers, but forEachFeatureAtPixel 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:

map.on('singleclick', function(evt) {
  document.getElementById('info').innerHTML = '';
  var viewResolution = 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>';
  }
});

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.