1

การฝกอบรม ระบบบริการขอมูลภูมศิ าสตรผานเครือขายอินเตอรเน็ต (Map Server)
แบบฝกหัดที่ 9: Mush-up Map Service with Google Map using geo-spatial database
PostgreSQL เปนซอฟทแวรจัดการฐานขอมูลที่รองรับการทํางานบนระบบเครือขาย
อินเตอรเน็ตและมีความสามารถการจัดการขอมูลภูมิสารสนเทศ ดังนั้นจึงสามารถใช PostgreSQL
เปน Backend ในการพัฒนาระบบภูมิสารสนเทศผานเครือขายอินเตอรเน็ตได
1. การพัฒนาระบบ
การพัฒนาระบบบริการขอมูลแผนที่และภูมิสารสนเทศผานเครือขายอินเตอรเน็ตดวย
Google Map โดยใชความสามารถในการจัดการขอมูลภูมิสารสนเทศจาก Postgis และใชเทคนิค
AJAX ในการรับสงขอมูลระหวางลูกขายและแมขาย โดยการพัฒนาระบบมีขั้นตอนดังตอไปนี้
1. ทําการเตรียมขอมูลภูมิสารสนเทศในฐานขอมูล
ตัวอยางนี้จะใชขอมูลสนามบิน โดยจะทําการสราง Spatial index ดวย GIST
ใหกับขอมูล Geometry ของชั้นขอมูลสนามบิน เพื่อเพิม่ ประสิทธภาพในการเขาถึงขอมูล
CREATE INDEX airport_idx ON airport USING gist (the_geom) TABLESPACE pg_default;
2. เขียนโคด php เพื่อใชในการนําขอมูลสนามบินจากฐานขอมูล โดยใชฟงกชั่น
ST_X(),ST_Y() สําหรับการดึงคาพิกัดภูมศิ าสตรของตําแหนงสนามบิน มาแสดงผลบน Google
Map แลวทําการจัดรูปแบบขอมูลที่ไดจากการสืบคนใหอยูในรูปแบบของ XML เพื่อนํามาเชื่อมตอ
กับ Google Map ดวยเทคนิค AJAX

ชัยภัทร เนื่องคํามา

2

<?php
// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->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

?>
3. เขียนโคด html และ JavaScript เพื่อใชในการจัดการสวนลูกขาย โดยใช Google Map
API ในการพัฒนา Web Mapping ซึ่งมีขั้นตอนดังตอไปนี้
3.1 สมัครเพื่อขอ API Key จาก Google
http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAIxTJ8HOSopEp5olagnVxjxTFK
z0c35R1UFEC-LNYA3-R8FmqRBQ7AgY6kpZZBwQbbCpXbL3o6d00xg
3.2 เขียนโคด html และ JavaScript ดังตอไปนี้
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps AJAX </title>
<script
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAIxTJ8HOSopEp5olagnVxjxTFKz0c35R1
UFEC-LNYA3-R8FmqRBQ7AgY6kpZZBwQbbCpXbL3o6d00xg" type="text/javascript">

</script>
<script type="text/javascript">
//<![CDATA[
// Create GIcon Object
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["airport"] = iconBlue;

ชัยภัทร เนื่องคํามา

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 = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
ชัยภัทร เนื่องคํามา

5

</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
3. ทดลองเรียกดูผลลัพธดวยเว็บเบราวเซอร

แสดงขอมูลรายละเอียดเมื่อ Click บน icon

ชัยภัทร เนื่องคํามา

Sign up to vote on this title
UsefulNot useful