[GIS] Passing Feature ID into Variable using OpenLayers and GeoServer WMS

javascriptjqueryopenlayers-2postgiswms

I have a WMS PostGIS-based polygon layer served by GeoServer, and whenever I click on any feature I want to get its gid value, so I can pass this value to the DOM. Unfortunately, I could not find a straightforward way to do it.
Here is my HTML code:

<div id="map"></div>
<div>
    <form id="detailed">
        <fieldset>
            <label>Polygon ID: <input type="text" id="featureid" value="" /></label>
            <label>Address: <input type="text" id="address" value="" />
            <input type="submit" id="submitdata" />
        </fieldset>
    </form>
</div>

And here is my OpenLayers code:

var map, info, untiled, tiled, idtrigger;
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

format = 'image/png';

var bounds = new OpenLayers.Bounds(110.1986240000002084, -7.5059889999999863, 110.2374630000001758, -7.4334989999999808);

var options = {
    controls: [],
    maxExtent: bounds,
    maxResolution: 0.0295137576322304,
    projection: "EPSG:4326",
    units: 'degrees'
};

map = new OpenLayers.Map('map', options);

tiled = new OpenLayers.Layer.WMS(
    "neighborhood:blocks - Tiled", "http://192.168.2.250:8080/geoserver/neighborhood/wms",
    {
        LAYERS: 'neighborhood:blocks',
        STYLES: '',
        format: format,
        tiled: true,
        tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom
    },
    {
        buffer: 0,
        displayOutsideMaxExtent: true,
        isBaseLayer: true,
        yx : {'EPSG:4326' : true}
    } 
);

untiled = new OpenLayers.Layer.WMS(
    "neighborhood:blocks - Untiled", "http://192.168.2.250:8080/geoserver/neighborhood/wms",
    {
        LAYERS: 'neighborhood:blocks',
        STYLES: '',
        format: format
    },
    {
        singleTile: true, 
        ratio: 1, 
        isBaseLayer: true,
        yx : {'EPSG:4326' : true}
    }
);

map.addLayers([untiled, tiled]);

map.addControl(new OpenLayers.Control.PanZoomBar({
    position: new OpenLayers.Pixel(2, 15)
}));

map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
map.zoomToExtent(bounds);

info = new OpenLayers.Control.WMSGetFeatureInfo({
    url: 'http://192.168.2.250:8080/geoserver/neighborhood/wms',
    queryVisible: true,
    eventListeners: {
        getfeatureinfo: function(event) {
            idtrigger = map.getLonLatFromPixel(event.xy);
            /* up to this point, I need to pass idtrigger to featureid in my form via an $.ajax() [jQuery] request accessing PostGIS table. */
        }
    }
});

map.addControl(info);
info.activate();

So, I planned to get the long + lat via WMSGetFeatureInfo, processed the string "lon=xxx,lat=xxx" into "xxx yyy", passed it to jQuery $.ajax() request accessing PostGIS table. Was it "the right way" to do it, or actually I'd been lost in a maze?

Finally after struggling around the docs pages and other resources, I found the solution. Here is the solution, and hopefully it would be the "right way" to do it:

  1. I add the proxy handling for HTTP request:

    OpenLayers.ProxyHost = "./proxy.php?url=";

  2. Create file proxy.php like in OpenLayers Cookbook and place it on the same directory [or other properly dir] as the HTML/PHP page.

  3. Modify file proxy.php, I modified:

    $host = "192.168.2.250";

and

    $port="8080"; /* it's GeoServer's port */

  1. Modify the WMSGetFeatureInfo block into:

    info = new OpenLayers.Control.WMSGetFeatureInfo({
    url: "http://192.168.2.250:8080/geoserver/neighborhood/wms",
    layers: [untiled,tiled],
    queryVisible: true,
    infoFormat: "application/vnd.ogc.gml",
    eventListeners: {
        getfeatureinfo: function(event) {
            console.log(event.features[0].attributes.id); /* inspecting result */
        }
    },
    vendorParams: {
        radius: 0
    }
});

Best Answer

Try something like this. You may be trying to do to much. I have activated the control on startup, as you have. I also just ran a little test and could see good results in my console. Let me know if it works.

var format = "application/vnd.ogc.gml";
ctrl_getfeatureInfo = new OpenLayers.Control.WMSGetFeatureInfo({
  url:my geoserver,
  layers: [mylayer],
  queryVisible: true,
  infoFormat: format
});
map.addControl(ctrl_getfeatureInfo);
ctrl_getfeatureInfo.events.register("getfeatureinfo", this, showfeature);
ctrl_getfeatureInfo.activate();

function showfeature(evt) {
  // get here from ctrl_getfeatureInfo.events.register("getfeatureinfo
  console.log(evt.features);
};
Related Question