[OpenLayers-Users] Selecting a feature property with JSON
Andrea Maschio
andrea.maschio at gmail.com
Sun Jan 27 10:46:46 EST 2008
>
Hi all, after a lot searching i solved the problem of selecting a
field property in a feature with the help of the guys on #OpenLayers.
Let me explain:
I have a table, called kanagawa (that's tha main table of the
pgrouting example application). My setup consist in geoserver
providing WFS, OpenLayers and Postgis(Postgres + Postgis + PGRouting)
The table has two fields, source and target, who are needed for the
routing calculations (for example shortest_path). So the needs, was to
listen to the click of the user, to find the starting and ending point.
The problem with querying a WFS service, is that i could not pass the
coordinates as parameter. The solution suggested by Cristopher was to
create a small buffered bounding box, as shown here (see source)
http://boston.freemap.in/
Thanks to Christopher, i used this code to determine the bounding box,
then the query found the correct results in WFS as well.
Now the point was to get them as json, so the final url was like
/* Christopher's code to get the coords */
var tolerance = new OpenLayers.Pixel(5, 5);
var min_px = new OpenLayers.Pixel(
e.xy.x - tolerance.x, e.xy.y +
tolerance.y);
var max_px = new OpenLayers.Pixel(
e.xy.x + tolerance.x, e.xy.y -
tolerance.y);
var min_ll = map.getLonLatFromPixel(min_px);
var max_ll = map.getLonLatFromPixel(max_px);
write("coordinate:" + "minpx->" +min_px + "maxpx->" +max_px)
/* building the url */
url = '/geoserver/wfs?
MAXFEATURES=20
&SERVICE=WFS
&VERSION=1.0.0
&REQUEST=GetFeature
&TYPENAME=topp:kanagawa
&SRS=EPSG:4326
&outputformat=json
&BBOX='+min_ll.lon+','+min_ll.lat+','+max_ll.lon+','+max_ll.lat;
Then, calling the loadUrl function will make me get a
response.responseText(), which will be something like:
{"type":"FeatureCollection","features":
[{"type":"Feature","id":"kanagawa.49596","geometry":
{"type":"MultiLineString","coordinates":
[[[139.51621972222222,35.41993416666667],
[139.51615916666668,35.41999611111111
]]]},"geometry_name":"the_geom","properties":{"length":
0.0000866261479180723,"x1":139.516219722222,"y1":35.4199341666667,"x2":
139.516159166667,"y2":35.4199961111111,"source":34600,"target":34601}}
CUT]
I am using prototype.js in my prototype :) so it was easy to transform
the json response in a javascript object:
var sourceSet=false;
var source, target;
function setSourceTarget(response) {
var json = response.responseText.evalJSON();
if(!sourceSet){
source=json.features[0].properties.source;
$('startPoint').value=source; //this is the start field to
see what's going on
sourceSet=true;
}else{
target = json.features[0].properties.target;
$('endPoint').value=target; //this is just the end field to
see what's going on
sourceSet=false;
}
};
I hope this one day could be useful for someone :D
Andrea Maschio
http://www.superandrew.it
More information about the Users
mailing list