jump to navigation

AJAX, Database Spatial PostGIS, dan Google Maps API pada aplikasi webGIS: Pencarian objek spesifik pada area dalam radius tertentu April 26, 2010

Posted by irwankurniawan2010 in Uncategorized.
trackback

Pencarian geografis yang diimplemtasikan pada tulisan ini adalah pencarian objek spesifik pada area dengan radius tertentu. Teknik  AJAX digunakan untuk mendapatkan nilai koordinat objek yang diperoleh dari server secara background. Data koordinat objek yang diperoleh melalui query yang dilakukan ke database spatial postgis. Kemudian hasil pencarian dibentuk sedemikian rupa ke dalam format XML menggunakan program PHP, kemudian  javascript membaca nilai koordinat yang terdapat pada data XML tadi dan selanjutnya di plot ke peta menggunakan fungsi pustaka dari google maps API.

Untuk dapat mencari objek spesifik pada area dalam radius tertentu digunakan 4 buah fungsi PostGIS yaitu:

  • Buffer: digunakan untuk membentuk objek geometry berupa area lingkaran dengan titik pusat dan radius tertentu
  • Contains: digunakan untuk mengecek apakah sebuah data geometry tertentu berada dalam lingkupan area dari data geometry lainnya
  • Distance_sphere: digunakan untuk mendapatkan jarak dari antara dua data geometry
  • Makepoint: untuk mengkonversi data koordinat menjadi data geometry tipe point/titik

Misalnya  mencari hotel dengan tarif kamar maksimal 100 ribu  yang dalam radius 1000m dari sebuah titik dengan koordinat (100.3636908531189,-0.949479988841186). Syntax perintah tersebut dapat dituliskan di dalam pgAdmin Query sebagai berikut:

select hotel.*, x(hotel.the_geom), y(hotel.the_geom),
distance_sphere(hotel.the_geom, makepoint(100.3636908531189,-0.949479988841186)) as jarak from hotel where contains(buffer(makepoint(100.3636908531189,-0.949479988841186),0.0089847752535344),hotel.the_geom)and hotel.tarif <=100000

Hasil pencarian dalam pgAdmin III Query dapat dilihat pada gambar berikut:

Pembutan XML hasil query spasial dilakukan menggunakan program PHP, berikut ini listing program pembuatan XML dan query spatial yang dilakukan menggunakan koneksi ke database postgreSQL dengan extensi POSTGIS:

<?

include(“fungsi.php”);
$con = getConnDB();$x =$_POST[“x”];$y =$_POST[“y”];$xpusat =  $x;
$ypusat =$y;$radius =$_POST[“radius”];
$radius = radius_proj_wgs84($xpusat,$ypusat,$radius);
$table=$_POST[“table”];
$field_tipe = explode(“:”,$_POST[“field_tipe”]);
$field_name =$field_tipe[0];
$op =$_POST[“operator”];
$katakunci =$_POST[“q”];
$sql_objek = “select x($table.the_geom),y($table.the_geom) , $table.gid as gid from $table where contains(buffer(makepoint($xpusat,$ypusat),$radius),$table.the_geom)and $field_name $op ‘$katakunci’ “;
header(“Content-type: text/xml”);
echo ‘<xml>’;
$con = getConnDB();
$res =pg_query($con,$sql_objek);
while ($data = pg_fetch_array($res)){
$gid= $data[“gid”];
$x= $data[“x”];
$y= $data[“y”];
echo “<objek gid=’$gid’ table=’$table’ x=’$x’ y=’$y’>”.”</objek>”;}
$sql_polygon = “select astext(buffer(makepoint($xpusat,$ypusat),$radius,25)) as poly”;
$res =pg_query($con,$sql_polygon);$data = pg_fetch_array($res);
$arrayPolygon = getArrayPointFromPolyGon($data[“poly”]);
while(list($n,$arrayN)=each($arrayPolygon)){$xn= $arrayPolygon[$n][“x”];$yn =$arrayPolygon[$n][“y”];
echo “<polygon x=’$xn’ y=’$yn’>”.”</polygon>”;
}
echo ‘</xml>’;?>

Niai koordinat acuan diperoleh dari $_post[”x”] dan $_post[”y”], kemudian dilakukan pencarian menggunakan fungsi contains sedangkan fungsi buffer digunakan untuk membuat area lingkaran dengan titik pusat($xpusat,$ypusat) dan radius yang diperoleh dari fungsi radius_proj_wgs84($xpusat,$ypusat,$radius. Berikut Ini Listing Fungsi radius_proj_wgs84:

function radius_proj_wgs84($x,$y,$r)
{
$cn = getConnDB();
$sql =”select distance(transform(translate(utm,$r,0),4236), transform(utm,4236)) as radius from transform(setsrid(makepoint($x, $y),4236),32747) as utm”;
$res = pg_query($cn,$sql);
$data = pg_fetch_array($res);
$radius = $data[“radius”];
return $radius;
}

Fungsi radius_proj_wgs84 digunakan untuk mekonversi jarak dari satuan meter ke dalam derajat berdasarkan titik pusat yang diberikan.  Perintah $sql_polygon = “select astext(buffer(makepoint($xpusat,$ypusat),$radius,25)) as poly”;

$res =pg_query($con,$sql_polygon)digunakan untuk mendapatkan koordinat area lingkaran berdasarkan titik pusat dan radius yang diberikan. Hasil query berupa koordinat x dan y dalam format text, untuk membentuk data-data koordinat ke dalam format xml dilakukan dengan memecah data koordinat dalam bentuk  text ke dalam bentuk array melalui fungsi getArrayPointFromPolyGon($data[“poly”]). Selanjutnya data-data koordinat pada array dibaca satu per satu untuk dibentuk ke format XML.

Setelah data koordinat dibentuk ke dalam format XML, selanjutnya data format XML tersebut dibaca melalui java script menggunakan teknik pemrograman AJAX, sebelum proses pembacaan data XML terlebih dahulu dilakukan pembentukan objek xmlHttpRequest, objek ini digunakan untuk melakukan request ke server dan merespon request dari server (PHP). Proses respon dan request javascript – PHP dilakukan secara background. Berikut adalah lisiting program fungsi javascript untuk membentuk objek xmlHttpRequest:

function GetXmlHttpObject(){ var oAJAX=null;
try { oAJAX = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(“Microsoft.XMLHTTP”);}
catch (e) { alert(“Sorry, browser tidak support ajax”);return} ;return oAJAX;}

function ajaxResponXML(opt){var xmlHttp=GetXmlHttpObject();var url = opt.url;var post = opt.post;var hand = opt.hand;
if (xmlHttp==null){alert (“Browser tidak support HTTP Request”);return} xmlHttp.onreadystatechange=function(){if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”){var resp = xmlHttp.responseXML;hand(resp)}};
xmlHttp.open(“POST”,url,true);xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);xmlHttp.send(post);};

function ajaxResponHTML(opt){var xmlHttp=GetXmlHttpObject();var url =  opt.url;var post = opt.post;var hand =opt.hand;if (xmlHttp==null){alert (“Browser tidak support HTTP Request”);return;};
xmlHttp.onreadystatechange=function(){if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”){ var resp = xmlHttp.responseText;hand(null);hand(resp)};}
xmlHttp.open(“POST”,url,true);xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);xmlHttp.send(post);};

bagaimana objek xmlHttpRequest ini diimplementasikan  dapat dilihat melalui kode program javascript berikut ini:

x = parseFloat($(‘x’).value)
y = parseFloat($(‘y’).value)
radius = parseFloat($(‘radius’).value)
var post = “x=” + x + “&y=” + y + “&radius=” + radius
var url = “php/cari3.xml.php”
var opt = {url: url,post: post,hand: function(xml) {map.clearOverlays();
var objek = xml.getElementsByTagName(“objek”);
var polygon = xml.getElementsByTagName(“polygon”);
for  (var i=0; i< objek.length;  i++)
{var currentObjek = objek[i];
var  gid =   currentObjek.getAttribute(“gid”);
var  table =   currentObjek.getAttribute(“table”);
var  x = currentObjek.getAttribute(“x”);
var  y = currentObjek.getAttribute(“y”);
var titik = new GLatLng(y,x);
var gIcon=createMarkerIcon(5);
markerObjek[gid]=new GMarker(titik ,gIcon);addMarker(table,gid,markerObjek[gid])}

var bounds = new GLatLngBounds();
var arrayPolygon = new Array(polygon.length)
for (var i = 0; i < polygon.length;i++){
var currentPolygon = polygon[i];
var  x = currentPolygon.getAttribute(“x”);
var  y = currentPolygon.getAttribute(“y”);
var titik = new GLatLng(y,x);
arrayPolygon[i]=titik;
bounds.extend(titik);}

var polygon = new GPolygon(arrayPolygon, “#f33f00”, 5, 1, “#ff0000”, 0.2);
map.addOverlay(polygon);
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());}}
ajaxResponXML(opt) ;

Pengujian Sistem:
Pencarian Hotel tarif <= 150000 pada area dalam radius 1500 m dari titik acuan : (100.3546142578125,-0.9487290733541037)

Hasil Pencarian Objek Spesifik :

XML koordinat yang diperoleh:

<xml id=”markerXMLGmap7835″>
<objek gid=”7″ table=”hotel” x=”100.354969799015″ y=”-0.953526416867592″/>
<objek gid=”12″ table=”hotel” x=”100.362231179542″ y=”-0.942330787545076″/>
<objek gid=”13″ table=”hotel” x=”100.36155552″ y=”-0.943748010000001″/>
<objek gid=”16″ table=”hotel” x=”100.363919576239″ y=”-0.949267246259593″/>
<objek gid=”17″ table=”hotel” x=”100.362840872052″ y=”-0.949686515144497″/>
<objek gid=”21″ table=”hotel” x=”100.355193852999″ y=”-0.958895172622264″/>
<objek gid=”22″ table=”hotel” x=”100.353451333888″ y=”-0.957399714277491″/>
<objek gid=”23″ table=”hotel” x=”100.363830732235″ y=”-0.954181103535047″/>
<objek gid=”26″ table=”hotel” x=”100.354129381548″ y=”-0.942292209905969″/>
<objek gid=”27″ table=”hotel” x=”100.365326491986″ y=”-0.95270072069488″/>
<objek gid=”28″ table=”hotel” x=”100.359767365681″ y=”-0.948543327242144″/>
<objek gid=”29″ table=”hotel” x=”100.357015541451″ y=”-0.944430297821673″/>
<objek gid=”30″ table=”hotel” x=”100.354140595449″ y=”-0.940435172152876″/>
<objek gid=”31″ table=”hotel” x=”100.357882259753″ y=”-0.947194641851852″/>
<objek gid=”32″ table=”hotel” x=”100.353866093622″ y=”-0.95957650440659″/>
<objek gid=”33″ table=”hotel” x=”100.35528261536″ y=”-0.935801617018069″/>
<objek gid=”34″ table=”hotel” x=”100.355673220483″ y=”-0.946090679773235″/>
<polygon x=”100.368091456474″ y=”-0.948729073354″/>
<polygon x=”100.368064862301″ y=”-0.949575313647957″/>
<polygon x=”100.367985184739″ y=”-0.950418214218084″/>
<polygon x=”100.367852738237″ y=”-0.951254448520916″/>
<polygon x=”100.367668045501″ y=”-0.9520807163217″/>
<polygon x=”100.36743183543″ y=”-0.95289375671891″/>
<polygon x=”100.367145040237″ y=”-0.953690361013543″/>
<polygon x=”100.366808791771″ y=”-0.954467385372381″/>
<polygon x=”100.366424417051″ y=”-0.95522176323527″/>
<polygon x=”100.365993433029″ y=”-0.955950517417427″/>
<polygon x=”100.365517540602″ y=”-0.95665077185903″/>
<polygon x=”100.3649986179″ y=”-0.957319762975716″/>
<polygon x=”100.364438712873″ y=”-0.95795485056518″/>
<polygon x=”100.363840035212″ y=”-0.95855352822685″/>
<polygon x=”100.363204947622″ y=”-0.959113433253506″/>
<polygon x=”100.362535956506″ y=”-0.959632355955803″/>
<polygon x=”100.361835702064″ y=”-0.96010824838291″/>
<polygon x=”100.361106947882″ y=”-0.960539232404831″/>
<polygon x=”100.360352570019″ y=”-0.960923607124529″/>
<polygon x=”100.35957554566″ y=”-0.96125985559059″/>
<polygon x=”100.358778941365″ y=”-0.961546650783936″/>
<polygon x=”100.357965900968″ y=”-0.961782860854963″/>
<polygon x=”100.357139633168″ y=”-0.961967553590434″/>
<polygon x=”100.356303398865″ y=”-0.962100000092502″/>
<polygon x=”100.355460498295″ y=”-0.962179677655332″/>
<polygon x=”100.354614258001″ y=”-0.962206271827984″/>
<polygon x=”100.353768017707″ y=”-0.962179677655408″/>
<polygon x=”100.352925117137″ y=”-0.962100000092654″/>
<polygon x=”100.352088882834″ y=”-0.961967553590661″/>
<polygon x=”100.351262615033″ y=”-0.961782860855263″/>
<polygon x=”100.350449574636″ y=”-0.961546650784309″/>
<polygon x=”100.349652970341″ y=”-0.961259855591035″/>
<polygon x=”100.348875945982″ y=”-0.960923607125044″/>
<polygon x=”100.348121568119″ y=”-0.960539232405414″/>
<polygon x=”100.347392813937″ y=”-0.960108248383558″/>
<polygon x=”100.346692559495″ y=”-0.959632355956515″/>
<polygon x=”100.346023568379″ y=”-0.959113433254277″/>
<polygon x=”100.345388480789″ y=”-0.958553528227679″/>
<polygon x=”100.344789803128″ y=”-0.957954850566062″/>
<polygon x=”100.344229898101″ y=”-0.957319762976649″/>
<polygon x=”100.343710975399″ y=”-0.956650771860009″/>
<polygon x=”100.343235082971″ y=”-0.955950517418448″/>
<polygon x=”100.342804098949″ y=”-0.95522176323633″/>
<polygon x=”100.34241972423″ y=”-0.954467385373476″/>
<polygon x=”100.342083475764″ y=”-0.953690361014668″/>
<polygon x=”100.34179668057″ y=”-0.952893756720061″/>
<polygon x=”100.341560470499″ y=”-0.952080716322872″/>
<polygon x=”100.341375777764″ y=”-0.951254448522105″/>
<polygon x=”100.341243331262″ y=”-0.950418214219285″/>
<polygon x=”100.341163653699″ y=”-0.949575313649165″/>
<polygon x=”100.341137059526″ y=”-0.94872907335521″/>
<polygon x=”100.341163653699″ y=”-0.947882833061251″/>
<polygon x=”100.341243331261″ y=”-0.947039932491116″/>
<polygon x=”100.341375777763″ y=”-0.946203698188272″/>
<polygon x=”100.341560470499″ y=”-0.945377430387473″/>
<polygon x=”100.34179668057″ y=”-0.944564389990241″/>
<polygon x=”100.342083475763″ y=”-0.943767785695582″/>
<polygon x=”100.342419724229″ y=”-0.942990761336714″/>
<polygon x=”100.342804098948″ y=”-0.942236383473791″/>
<polygon x=”100.34323508297″ y=”-0.941507629291595″/>
<polygon x=”100.343710975397″ y=”-0.940807374849949″/>
<polygon x=”100.344229898099″ y=”-0.940138383733216″/>
<polygon x=”100.344789803126″ y=”-0.939503296143702″/>
<polygon x=”100.345388480787″ y=”-0.938904618481978″/>
<polygon x=”100.346023568377″ y=”-0.938344713455265″/>
<polygon x=”100.346692559494″ y=”-0.937825790752908″/>
<polygon x=”100.347392813935″ y=”-0.937349898325739″/>
<polygon x=”100.348121568117″ y=”-0.936918914303753″/>
<polygon x=”100.34887594598″ y=”-0.936534539583987″/>
<polygon x=”100.349652970339″ y=”-0.936198291117856″/>
<polygon x=”100.350449574633″ y=”-0.935911495924438″/>
<polygon x=”100.351262615031″ y=”-0.935675285853338″/>
<polygon x=”100.352088882831″ y=”-0.935490593117792″/>
<polygon x=”100.352925117134″ y=”-0.935358146615649″/>
<polygon x=”100.353768017704″ y=”-0.935278469052744″/>
<polygon x=”100.354614257998″ y=”-0.935251874880016″/>
<polygon x=”100.355460498292″ y=”-0.935278469052516″/>
<polygon x=”100.356303398862″ y=”-0.935358146615194″/>
<polygon x=”100.357139633165″ y=”-0.935490593117112″/>
<polygon x=”100.357965900966″ y=”-0.935675285852436″/>
<polygon x=”100.358778941363″ y=”-0.935911495923317″/>
<polygon x=”100.359575545658″ y=”-0.936198291116519″/>
<polygon x=”100.360352570017″ y=”-0.936534539582441″/>
<polygon x=”100.36110694788″ y=”-0.936918914302003″/>
<polygon x=”100.361835702062″ y=”-0.937349898323793″/>
<polygon x=”100.362535956504″ y=”-0.937825790750774″/>
<polygon x=”100.36320494762″ y=”-0.938344713452951″/>
<polygon x=”100.36384003521″ y=”-0.938904618479493″/>
<polygon x=”100.364438712872″ y=”-0.939503296141055″/>
<polygon x=”100.364998617898″ y=”-0.940138383730419″/>
<polygon x=”100.365517540601″ y=”-0.940807374847012″/>
<polygon x=”100.365993433028″ y=”-0.94150762928853″/>
<polygon x=”100.36642441705″ y=”-0.942236383470609″/>
<polygon x=”100.36680879177″ y=”-0.942990761333429″/>
<polygon x=”100.367145040236″ y=”-0.943767785692207″/>
<polygon x=”100.367431835429″ y=”-0.944564389986788″/>
<polygon x=”100.367668045501″ y=”-0.945377430383956″/>
<polygon x=”100.367852738236″ y=”-0.946203698184706″/>
<polygon x=”100.367985184738″ y=”-0.947039932487514″/>
<polygon x=”100.368064862301″ y=”-0.947882833057627″/>
<polygon x=”100.368091456474″ y=”-0.94872907335158″/>
<polygon x=”100.368091456474″ y=”-0.948729073354″/>
</xml>

Selamat Mencoba, Salam ngeblog

Comments»

1. Irwan Kurniawan - April 27, 2010

Lumayan…

2. F4154LMAN - April 27, 2010

Keren2, menarik nih..😉

3. indra1082 - June 4, 2010

mantab.. thanks kunjungannya

4. Balai Uji - June 13, 2010

Pembahasan blognya mantap mas irwan….
Balai Uji berkunjung….


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: