0

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;';
    }
};      
});
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.

  • Thans! But, I want to display this with popup, how can I do this? – Warden Sep 21 '15 at 12:07
  • @Warden check out the popup example: openlayers.org/en/v3.9.0/examples/popup.html – Alvin Lindstam Sep 22 '15 at 6:03
  • I do this, but this example take popup for all map. I need that popup works only with layers hotpoint and threat. – Warden Sep 22 '15 at 6:34
  • A question and answer site like this one is about helping people find answers to their questions, not about doing their job for them. The resources can help you create what you want, ask a new question if you have tried yourself and can't find the solution. – Alvin Lindstam Sep 22 '15 at 6:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.