1
การฝกอบรม กอบรม ระบบบริการข การขอมู อมูลภู ลภูมิมศาสตร ศิ าสตรผผานเครื า นเครือข อขายอิ ายอินเตอร นเตอรเน็ เน็ต (Map Server) แบบฝกหั กหัดที ่ ่ ดที 9: Mush-up Map Service with Google Map using geo-spatial database PostgreSQL เปนซอฟท นซอฟทแวร แวรจัจัดการฐานข ดการฐานขอมู อมูลที ลที ่ ่รองรั รองรับการทํ บการทํางานบนระบบเครื างานบนระบบเครือข อขาย าย อินเตอร นเตอรเน็ เน็ตและมี ตและมีความสามารถการจั ความสามารถการจัดการข ดการขอมู อมูลภู ลภูมิมสารสนเทศ ิสารสนเทศ ดังนั ้ ้ งนันจึ นจึงสามารถใช งสามารถใช PostgreSQL เปน Backend ในการพัฒนาระบบภู ฒนาระบบภูมิมสารสนเทศผ ิสารสนเทศผานเครื านเครือข อขายอิ ายอินเตอร นเตอรเน็ เน็ตได ตได
การพัฒนาระบบ ฒนาระบบ การพัฒนาระบบบริ ฒนาระบบบริการข การขอมู อมูลแผนที ่ ่ ลแผนทีและภู และภูมิมสารสนเทศผ สิ ารสนเทศผานเครื านเครือข อขายอิ ายอินเตอร นเตอรเน็ เน็ตด ตดวย วย Google Map โดยใชความสามารถในการจั ความสามารถในการจัดการข ดการขอมู อมูลภู ลภูมิมสารสนเทศจาก ิสารสนเทศจาก Postgis และใชเทคนิ เทคนิค AJAX ในการรับส บสงข งขอมู อมูลระหว ลระหวางลู างลูกข กขายและแม ายและแมขขาย า ย โดยการพัฒนาระบบมี ฒนาระบบมีขั ้ ้ขันตอนดั นตอนดังต งตอไปนี ้ ้ อไปนี 1. ทําการเตรี าการเตรียมข ยมขอมู อมูลภู ลภูมิมสารสนเทศในฐานข ิสารสนเทศในฐานขอมู อมูล ตัวอย วอยางนี ้ ้ างนีจะใช จะใชขขอมู อ มูลสนามบิ ลสนามบิน โดยจะทําการสร าการสราง าง Spatial index ดวย วย GIST ใหกักับข บขอมู อมูล Geometry ของชั ้ ้ ของชันข นขอมู อมูลสนามบิ ลสนามบิน เพื ่ ่ เพือเพิ ่ ่ อเพิมประสิ มประสิทธ ทธภาพในการเข ภาพในการเขาถึ าถึงข งขอมู อมูล 1.
CREATE INDEX airport_idx ON airport USING gist (the_geom) TABLESPACE pg_default;
เขียนโค ยนโคด php เพื ่ ่ เพือใช อใชในการนํ ในการนําข าขอมู อมูลสนามบิ ลสนามบินจากฐานข นจากฐานขอมู อมูล โดยใชฟฟงก งกชั ่ ่ชัน าหรับการดึ บการดึงค งคาพิ าพิกักัดภู ดภูมิมศาสตร ิศาสตรของตํ ของตําแหน าแหนงสนามบิ งสนามบิน มาแสดงผลบน Google ST_X(),ST_Y() สําหรั Map แลวทํ วทําการจั าการจัดรู ดรูปแบบข ปแบบขอมู อมูลที ่ ่ ลทีได ไดจากการสื จากการสืบค บคนให นใหอยู อยูในรู ในรูปแบบของ ปแบบของ XML เพื ่ ่ เพือนํ อนํามาเชื ่ ่ ามาเชือมต อมตอ กับ Google Map ดวยเทคนิ วยเทคนิค AJAX 2.
ชัยภั ยภัทร ทร เนื ่ ่องคํ องคํามา ามา
2
createElement("markers"); $parnode = $dom->appendChild($node); // Opens a connection to a PostgresSQL server $connection = pg_connect("dbname=training user=postgres password=1234"); if (!$connection) { die('Query failed: ' . pg_last_error());} $myresult = pg_exec($connection, "SELECT gid,airport_id,name_e,name_t ,type,st_x(the_geom),st_y(the_geom) FROM airport"); // Select all the rows in the markers table header("Content-type: text/xml"); // Iterate through the rows, adding XML nodes for each for ($lt = 0; $lt < pg_numrows($myresult); $lt++) { $id = pg_result($myresult, $lt, 0); $airport_id = pg_result($myresult, $lt, 1); $name_e = pg_result($myresult, $lt, 2); $name_t = pg_result($myresult, $lt, 3); $type=pg_result($myresult, $lt, 4); $x=round(pg_result($myresult, $lt, 5),4); $y=round(pg_result($myresult, $lt, 6),4); // ADD TO XML DOCUMENT NODE $node = $dom->createElement("marker"); $newnode = $parnode->appendChild($node); $newnode->setAttribute("name",$name_e); $newnode->setAttribute("name_thai", $name_t); $newnode->setAttribute("lat", $y); $newnode->setAttribute("lng", $x); $newnode->setAttribute("type", 'airport'); } echo $dom->saveXML();
ชัยภั ยภัทร ทร เนื ่ ่องคํ องคํามา ามา
3
?>
เขียนโค ยนโคด html และ JavaScript เพื ่ ่ เพือใช อใชในการจั ในการจัดการส ดการสวนลู วนลูกข กขาย าย โดยใช Google Map API ในการพัฒนา ฒนา Web Mapping ซึ ่ ่ซึงมี งมีขั ้ ้ขันตอนดั นตอนดังต งตอไปนี อไปนี ้ ้ 3.1 สมัครเพื ่ ่ ครเพือขอ อขอ API Key จาก Google 3.
http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAIxTJ8HOSopEp5olagnVxjxTFK z0c35R1UFEC-LNYA3-R8FmqRBQ7AgY6kpZZBwQbbCpXbL3o6d00xg
3.2
เขียนโค ยนโคด html และ JavaScript ดังต งตอไปนี ้ ้ อไปนี
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
Google Maps AJAX <script src="http://maps.google.com/maps?fil src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAA e=api&v=2&key=ABQIAAAAIxTJ8HOSopEp5olagnVxjxTFKz0c35R1 AIxTJ8HOSopEp5olagnVxjxTFKz0c35R1 UFEC-LNYA3-R8FmqRBQ7AgY6kpZZBwQbbCpXbL3o6d00xg"type="text/javascript">
<script type="text/javascript"> //
ชัยภั ยภัทร ทร เนื ่ ่องคํ องคํามา ามา
4
function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(13.737, 100.652), 7); // Using Ajax to Connect PHP GDownloadUrl("http://127.0.0.1/postgis/googlemap/phpsqlajax_genxml.php", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var address = markers[i].getAttribute("name_thai"); var type = markers[i].getAttribute("type"); var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var marker = createMarker(point, name, address, type); map.addOverlay(marker); } }); } } function createMarker(point, name, address, type) { var marker = new GMarker(point, customIcons[type]); var html = "
" + name + " " + address; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } //]]>
ชัยภั ยภัทร ทร เนื ่ ่องคํ องคํามา ามา
5
3.
ทดลองเรียกดู ยกดูผลลั ผลลัพธ พธดดวยเว็ วยเว็บเบราว บเบราวเซอร เซอร
แสดงขอมู อมูลรายละเอี ลรายละเอียดเมื ่ ่ ยดเมือ Click บน icon
ชัยภั ยภัทร ทร เนื ่ ่องคํ องคํามา ามา