Get Values from GetFeatureInfo in Openlayers 3?

Question

I have a problem with my GetFeatureInfo, because I can not get the values back at me as if they were variables. Anyone know any way?

I researched and what I have seen is Geoserver modify the template (Content.ftl etc ...) But I would like to eliminate this as it has very little customization.

Or if someone could help to customize these by javascript or another language with more options.

I use the example from OpenLayers3 :

map.on('singleclick', function(evt) {
  document.getElementById('info').innerHTML = '';
  var viewResolution = /** @type {number} */ (view.getResolution());
  var url = Rustica.getGetFeatureInfoUrl(
      evt.coordinate, viewResolution, 'EPSG:3857',
      {'INFO_FORMAT': 'application/json'});
  if (url) {
    document.getElementById('info').innerHTML =
        '<iframe seamless src="' + url + '"></iframe>';
  }
});

map.on('pointermove', function(evt) {
  if (evt.dragging) {
    return;
  }
  var pixel = map.getEventPixel(evt.originalEvent);
  var hit = map.forEachLayerAtPixel(pixel, function(layer) {
    return true;
  });
  map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

And I recibe this JSON:

{"type":"FeatureCollection","totalFeatures":"unknown","features":[{"type":"Feature","id":"rustica.22","geometry":{"type":"Polygon","coordinates":[[[-37155.372408933064,4804269.421434741],[-37085.144868682895,4804399.503897646],[-37046.8949331874,4804372.239200349],[-37111.13156967358,4804251.317020955],[-37155.372408933064,4804269.421434741]]]},"geometry_name":"the_geom","properties":{"PCAT1":"46166A0","PCAT2":"0500051","EJERCICIO":null,"NUM_EXP":null,"CONTROL":null,"MAPA":294,"DELEGACIO":46,"MUNICIPIO":166,"MASA":"005","HOJA":"A","PARCELA":"00051","SUBPARCE":"0","TIPO":"R","COORX":729052.43,"COORY":4383946.44,"NUMSYMBOL":8,"FECHAALTA":20120524,"FECHABAJA":99999999,"AREA":4042,"NINTERNO":2.10991406E8,"refcat":"46166A00500051"}}],"crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:EPSG::3857"}}}

My aim would be to get each of these values separately to put them in an HTML form.

Answer 1

You are making a GetFeatureInfo request with a application/json as INFO_FORMAT parameter, so a JSON is what your are going to obtain. Not sure about your expectations here.

If you need to get the properties of the json to make something with it, as show it in your html templates, just parse the json response.

JSON.parse(json)

If you are using geoserver, it has a vendor parameter, propertyName, that allows specify the properties that should be returned by the server

Answer 2

If your problem is communicating with the iframe you create, try to use

otherWindow.postMessage(message, targetOrigin, [transfer]); 

It's a nice way to communicate between windows or frames.

Here is the doc