ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

ในบทความนี้จะมาอธิบายเกี่ยวกับเรื่อง การใช้งาน MySQL , PHP ร่วมกับ OpenStreetMap ว่ามีขั้นตอนลักษณะในการทำงานอย่างไรบ้าง แล้วจะเอาไปใช้ประโยชน์ในวัตถุประสงค์อะไรบ้าง ตัว OpenstreetMap ได้มีการประยุกต์ใช้งานร่วมกับ Openlayers โดยมีการแจก API ให้เราได้สามารถไปใช้ในการพัฒนาตัวแผนที่ OpenstreetMap ได้ ซึ่งบทความนี้จะเป็นประโยชน์สำหรับผู้ที่ต้องการเริ่มต้นจะศึกษา OpenstreetMap อย่างจริงจัง 

 

OpenstreetMap ร่วมกับการทำงานกับฐานข้อมูล และ ภาษา PHP
OpenstreetMap with PHP , MySQL

 

การทำงานร่วมกับ Openlayers

Openlayers
การใช้ Openlayers API ทำงานร่วมกับ OpenstreetMap

ถ้าพูดถึงเรื่อง Openlayers ที่เป็น Application Programming Interface(API) ที่ใช้งานร่วมกับ OpenstreetMap , ที่อาจจะช่วยในการสร้าง Web Mapping Application ทำให้การพัฒนา Web ในการเผยแพร่ได้ง่ายขึ้น ข้อมูล GIS ง่ายมากขึ้น , มีเครื่องมือควบคุมการแสดงผลต่างๆจำนวนมากไม่ว่าจะเป็น zoom/pan , หาตำแหน่งจากตัวชี้ตำแหน่ง , มาตราส่วน ต่างๆ , คราวนี้ เราจะมาดูกันว่า Code API Openlayers มีรายละเอียดการทำงานอย่างไรบ้าง 

 

ก่อนอื่นเลย จะต้องทำการ Download File Openlayer.js จาก  Website : https://openlayers.org/two/ ซะก่อน หรือไม่ก็ใช้คำสั่งเรียกใช้งานแบบ CDN Online เข้ามาทำงานแทน โดยใช้คำสั่งดังนี้

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>

ตัวอย่าง Code Openlayers API เข้ามาทำงานร่วมกับ OpenStreetMap :

<script>
    var lat            = 47.35387; //มีการกำหนดค่าตัวแปร lat เพื่อเก็บค่า ละติจูล
    var lon            = 8.43609;  //มีการกำหนดค่าตัวแปร lon เพื่อเก็บค่า ลองติจูล
    var zoom           = 18;       //มีการกำหนดค่าตัวแปร zoom เพื่อขยายภาพตอนเริ่มในการแสดงแผนที่

    var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection //มีการเรียกใช้งาน แสดงแผนที่ลูกโลกบนพื้นผิวสัมผัสทรงกระบอก ( Mercator projection)

    var position       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection); //ทำการเก็บค่าตัวแปร lat,long ไว้ในตัวแปร position , เพื่อไว้แสดงค่าพิกัดบนแผนที่ OpenStreetMap ตอนเริ่มต้น


    map = new OpenLayers.Map("Map"); //มีการใช้ Function OpenLayer.Map() ในการแสดงแผนที่

    var mapnik         = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);

    var markers = new OpenLayers.Layer.Markers( "Markers" );//มีการแสดงตัว Marker เข้ามาทำงาน , ต้องมีการดึง File Openlayers.js เข้ามาทำงานด้วย , ถึงจะแสดงผล
    map.addLayer(markers);
    markers.addMarker(new OpenLayers.Marker(position));

    map.setCenter(position, zoom);
</script>

 

วิธีการแสดงดึงค่าพิกัดฐานข้อมูล MySQL , มาแสดงบนแผนที่ OpenStreetMap

 Step 1 - สร้าง File php มา 1 File , ตัวอย่างเช่น ops.php , แล้วทำการเชื่อมต่อฐานข้อมูล Database โดยใช้คำสั่ง Code ดังนี้

ตัวอย่าง Code เชื่อมต่อฐานข้อมูล Database

<?php
$servername = "localhost";   //ให้มีการเชื่อมต่อไปที่ localhost phpmyamdin
$username = "root";          // Username แต่ละคนไม่เหมือนกัน , แต่ปกติจะเป็น root
$password = "";              //Password ถ้ามีก็ใส่ , ถ้าไม่มี ก็กำหนดให้เป็นค่าว่าง ""
$dbname = "table_airport";  //กำหนดในการเชื่อมต่อไปที่ฐานข้อมูล table_airport


$conn = new mysqli($servername, $username, $password, $dbname); //ทำการเชื่อมต่อฐานข้อมูล
mysqli_set_charset($conn,"utf8");
// Check connection
if ($conn->connect_error) {                             //ตรวจสอบว่ามีการเชื่อมต่อฐานข้อมูลหรือยัง
  die("Connection failed: " . $conn->connect_error); 
}



?>

 

 Step 2 - ทำการสร้าง Table html ขึ้นมา เพื่อใช้ในการ Query ข้อมูล แล้วมี Link ไปที่หน้า showmaps.php , และมีการส่งค่า id ไปเก็บไว้ในค่า mapsId โดยส่งค่าผ่านทาง URL , เพื่อจะแสดงค่าพิกัดให้ตรงกับตำแหน่งในการ Query ข้อมูลออกมา

ตัวอย่าง Code Query ในตาราง HTML จาก File ops.php

<html>
  <head><title>OpenLayers Marker Popups</title></head>
  <body>
  <table width="100%" border="0" cellpadding="3" cellspacing="0" style="border:1px solid #CCC;background-color:#E4E4E4;">
  <tr>
    <td align="center"><strong>ชื่อสถานที่</strong></td> 
    <td align="center"><strong>ที่อยู่</strong></td>
    <td align="center"><strong>ละติจูด</strong></td>
    <td align="center"><strong>ลองติจูด</strong></td>
    
  </tr>
  <?php
  
  $rsMapsGoo=mysqli_query($conn,'SELECT * FROM airports ORDER BY name ASC'); //ทำการ select ข้อมูลจากตาราง airport โดยมีการเรียงลำดับข้อมูลแบบ ASC โดยเริ่มจาก Field name
  while($showMapsGoo=mysqli_fetch_array($rsMapsGoo)){ //ทำการ วน Loop While เพื่อแสดงข้อมูลในรูปแบบ array ออกมาเป็นทีละแถว
  ?>
  <tr>
    <td align="center"><a href="/showmaps.php?mapsId=<?=$showMapsGoo['id']?>"  target="_blank"><?=$showMapsGoo['name']?></a></td> //มีการแสดงข้อมูล name จากข้อมูลออกมา , แล้วส่งค่า id ไปเก็บไว้ในค่า mapsId , โดยส่งค่าผ่านทาง URL , โดยส่งค่าไปที่หน้า showmaps.php  เพื่อทำการแสดงค่าพิกัดฐานข้อมูลบนแผนที่ OpenstreetMap
    <td align="center"><?=$showMapsGoo['address']?></td> //มีการแสดงข้อมูล ที่อยู่ ออกมา
    <td align="center"><?=$showMapsGoo['lati']?></td> //มีการแสดงข้อมูล ละติจูล ออกมา
    <td align="center"><?=$showMapsGoo['longti']?></td> //มีการแสดงข้อมูลค่า ลองติจูล ออกมา
   
  </tr>
  <?php } mysqli_close($conn);?> 
</table>
</body>
</html>
 

 

Step 3 - ให้ทำการสร้าง file showmaps.php , File นี้จะเป็นการแสดงตำแหน่งค่าพิกัดจากฐานข้อมูล บน OpenstreetMap โดยมีการรับค่าจาก id ที่เก็บไว้ในค่า mapsId , ที่ถูกส่งมาจาก URL , แล้วเอามาเปรียบคำสั่ง where ของ MySQL ว่าตรงกันกับ id ในตาราง airports ไหม , ถ้าตรงกัน ก็ดึงเอาค่า lati , longti มาเก็บไว้ในตัวแปร php เพื่อที่จะทำการส่งค่าไปเก็บไว้ในคัวแปร javascript

ตัวอย่าง Code showmaps.php ในการเชื่อมต่อฐานข้อมูล และ Query

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "table_airport";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
mysqli_set_charset($conn,"utf8");
// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

session_start();
$showMaps=mysqli_fetch_array(mysqli_query($conn,'SELECT * FROM airports WHERE id='.$_GET['mapsId'])); //มีการส่งค่า id ที่ถูกเก็บไว้ในค่า mapId ผ่านทาง URL , โดยเอามาเปรียบเทียบว่า ตรงกับ id  ในตาราง airports หรือเปล่า , ถ้าตรงกันก็ทำให้แสดงข้อมูล array มาเป็นแถวๆออกมา , แล้วเก็บไว้ในตัวแปร $showMaps

$name=$showMaps['lati']; //ดึงค่า name ที่มาจาก Fleid name ใน database จากตาราง airports มาเก็บไว้ในตัวแปร $name
$lati=$showMaps['lati']; //ดึงค่า lati ที่มาจาก Fleid lati ใน database จากตาราง airports มาเก็บไว้ในตัวแปร $lati
$longti=$showMaps['longti']; //ดึงค่า longti ที่มาจาก Fleid longti ใน database จากตาราง airports มาเก็บไว้ในตัวแปร $longti


?>
 

 

Step 4 - ทำการเรียกใช้งาน API Openlayers.js เข้ามาทำงาน , โดยเรียกผ่าน CDN online , โดยใช้คำสั่งดังนี้

ตัวอย่าง javaScript ที่มีการ เรียกใช้งาน API Openlayers.js , แบบ CDN online :

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>

 

Step 5 - ทำการ สร้างชุดคำสั่ง javascript Code API Openlayers ที่ทำงานร่วมกับ OpenstreetMap เข้ามาทำงาน , โดยมีการส่งตัวแปร php เข้ามาเก็บไว้ในตัวแปร javascript , เพื่อที่จะต้องการให้แสดงค่าพิกัดจากฐานข้อมูล บน OpenstreetMap

ตัวอย่าง javascript ที่มีการทำงาน เพื่อแสดงแผนที่ OpenStreetMap :

<script>
   var lat = '<?=$lati?>';       //มีการส่งค่าตัวแปร $lati php ที่มีการเก็บค่า field lati จากฐานข้อมูลมาเก็บไว้ในตัวแปร lat ของ javascript
   var long = '<?=$longti?>';    //มีการส่งค่าตัวแปร $longti php ที่มีการเก็บค่า field longti จากฐานข้อมูลมาเก็บไว้ในตัวแปร long ของ javascript
   var zoom = 14;          //มีการกำหนดค่าตัวแปร zoom ให้เป็น 14 , เพื่อทำการขยายภาพตอนเริ่มต้นแสดงแผนที่

    var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    var position       = new OpenLayers.LonLat(long, lat).transform( fromProjection, toProjection); //ทำการเก็บค่าตัวแปร lat,long ไว้ในตัวแปร position , เพื่อไว้แสดงค่าพิกัดบนแผนที่ OpenStreetMap ตอนเริ่มต้น


    map = new OpenLayers.Map("Map"); //ใช้ Function OpenLayer.Map() ในการแสดงแผนที่

    var mapnik         = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);

    var markers = new OpenLayers.Layer.Markers( "Markers" ); //แสดงสัญลักษณ์ Marker ปักหมุดโดยใช้ Function Markers , แต่ต้องมีเรียกใช้งาน Openlayers.js ไม่งั้นจะไม่แสดงสัญลักษณ์ออกมา

    map.addLayer(markers);
    markers.addMarker(new OpenLayers.Marker(position)); 

    map.setCenter(position, zoom);
</script>

 

Step 6 - ทำการสร้างตารางแสดงข้อมูล และ แสดงแผนที่ OpenStreetMap , โดยใช้คำสั่งดังนี้

ตัวอย่าง Code ดึงค่า id="Map" มาแสดงแผนที่ใน File showmaps.php :

<table width="750" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <td bgcolor="#E1E1E1"><strong>ชื่อสถานที่ :</strong></td>
    <td bgcolor="#E1E1E1"><h1><?=$name?></h1></td> //ดึงค่าตัวแปร $name ที่มีการเก็บค่า Field name ในฐานข้อมูล , เพื่อมาแสดงข้อมูล
  </tr>
  <tr>
    <td bgcolor="#E1E1E1"><strong>แสดงผลปกติ</strong></td>
    <td bgcolor="#E1E1E1"><div id="Map" style="width:500px; height:400px"></div></td> //มีการส่งค่า id="Map" จาก javascript เข้ามา , เพื่อแสดงแผนที่ OpenstreetMap
  </tr>
  
</table>

</body>
</html>

 

ผลลัพธ์ที่ได้

1.เมื่อมีการคลิกชื่อที่ตั้งสถานที่ไป

ชื่อที่ตั้งสถานที่
ชื่อที่ตั้งสถานที่

2.จะมีกาส่งค่า id ที่เก็บไว้ใน mapsId ผ่าน URl ไป , เพื่อไปเปรียบในหน้า showsmap.php ว่า id ในตาราง airports ที่ถูกส่งมา , ตรงกับในตาราง airports ฐานข้อมูลหรือไม่ ?

มีการส่งค่า id ผ่านทาง URL

มีการส่งค่า id ผ่านทาง URL ไป

3.ก็จะมีการแสดงค่าพิกัดออกมา

ค่าพิกัดจากฐานข้อมูล แสดงบนแผนที่ OpenstreetMap
Locations OpenstreetMap

บทสรุป เราสามารถนำ API OpenstreetMap ไปประยุกต์การใช้งานในด้านต่างๆได้ , ซึ่งจะมีประโยชน์สำหรับในพัฒนา Website และ อื่นๆอีกมากมาย , ซึ่งหวังว่าบทความนี้จะเป็นประโยชน์แก่ผู้ที่เริ่มต้นต้องการศึกษา หรือเอาไปใช้งานในด้านอื่นๆ , ซึ่งหลายๆท่านส่วนใหญ่อาจจะเคยได้ลองสัมผัสกับ API Google Map มาแล้ว , แต่ OpenstreetMap ถือว่าเป็น Free service ในรูปแบบด้านการบริการหนึ่งบนแผนที่ ซึ่งอาจจะทำให้ได้สัมผัสประสบการณ์ใหม่ๆสำหรับในเอาไปพัฒนาต่อยอดอื่นๆ

ช่องทางการศึกษา OpenstreetMap เพิ่มเติม สามารถศึกษาได้จากบทเรียนนี้ :

ทำความรู้จัก แผนที ใช้งานได้ฟรี และ การใช้งาน OpenstreetMap ร่วมกับ MySQL , PHP

 

แหล่งอ้างอิงข้อมูล

OpenLayers Simple Example [ออนไลน์].เข้าถึงได้จาก :https://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example

Building an OpenLayers Application [ออนไลน์].เข้าถึงได้จาก :https://openlayers.org/en/latest/doc/tutorials/bundle.html

Openlayers POI layer Example [ออนไลน์].เข้าถึงได้จาก :https://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
โปรแกรมทางการบัญชี โปรแกรม Express
โดย Duanghathai Termtem อ 01 ธ.ค. 2020 6:56 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
22
อ 01 ธ.ค. 2020 6:56 pm โดย Duanghathai Termtem
Flow Account คืออะไร
โดย Duanghathai Termtem อ 01 ธ.ค. 2020 5:06 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
21
อ 01 ธ.ค. 2020 5:06 pm โดย Duanghathai Termtem
การประยุกต์ใช้โปรแกรม ACL และ Microsoft Excel ช่วยในการตรวจสอบ
โดย Duanghathai Termtem อ 01 ธ.ค. 2020 3:20 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
32
อ 01 ธ.ค. 2020 3:20 pm โดย Duanghathai Termtem
แนวทางแก้ปัญหา php error Uncaught Error: Call to undefined function mysql_real_escape_string() in...
โดย mindphp อ 01 ธ.ค. 2020 2:13 am บอร์ด PHP Knowledge
0
20
อ 01 ธ.ค. 2020 2:13 am โดย mindphp
วิธีการเดินทางจากกระบี่มากรุงเทพมหานคร
โดย Duanghathai Termtem จ 30 พ.ย. 2020 3:46 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
21
จ 30 พ.ย. 2020 3:46 pm โดย Duanghathai Termtem
การใช้ Canva ช่วยการนำเสนอ
โดย Duanghathai Termtem จ 30 พ.ย. 2020 3:13 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
38
จ 30 พ.ย. 2020 3:13 pm โดย Duanghathai Termtem
ภาษี หัก ณ ที่จ่าย บน ERP
โดย milk2533 ส 28 พ.ย. 2020 4:17 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
24
ส 28 พ.ย. 2020 4:17 pm โดย milk2533
ประโยชน์ของการใช้ปุ่ม Sendmail บน ERP
โดย milk2533 ส 28 พ.ย. 2020 1:40 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
15
ส 28 พ.ย. 2020 1:40 pm โดย milk2533