ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

ในบทความนี้จะมาอธิบายเรื่องการเทคนิค หรือ ลูกเล่น ในการใช้งาน OpenStreetMap , ว่ามี FunctionsJavaScriptไหนที่สามารถเอาไปใช้ประโยนช์อะไรได้บ้าง , ซึ่งก็อาจจะได้แก่ การปรับแต่งตัว Marker , อาจจะรวมไปถึงการแสดง Pop-UP , แล้วมีตัว  เด้งขึ้นมาด้วย , หรือไม่ก็อาจจะมีการแสดงตัว Markers หลายๆค่าด้วย , ซึ่งปกติแล้ว ในการแสดงผลนั้น จะแสดงแค่ตัวตำแหน่ง Location อันเดียว เท่านั้น , เราก็จะมาดูว่า มีเทคนิคอะไรบ้างที่น่าสนใจ ที่สามารถเอาไปใช้งานร่วมกับPHP คืออะไรได้

 

เทคนิค หรือ การเพิ่มลูกเล่น OpenstreetMap
Techical OpenstreetMap

ก่อนจะไปในส่วนของ เทคนิค หรือ การปรับแต่งนั้น , จะต้องมีการสร้างหน้า UI และ มีการเชื่อมต่อฐานข้อมูลซะก่อน เพื่อจะให้สามารถทำงานร่วมกับตัว Functions อื่นๆใน OpenstreetMap ได้ , อันดับแรกเลย คือ

 

Step 1 - สร้าง File ops.php ขึ้นมา , แล้วทำการเชื่อมต่อฐานข้อมูล ก่อน

<?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();
$query =mysqli_query($conn,'SELECT * FROM airports'); //ทำการ select ข้อมูลทั้งหมด จากตาราง airports แล้วเก็บไว้ในตัวแปร $query
$query_1 =mysqli_fetch_array(mysqli_query($conn,'SELECT * FROM airports')); //ทำการ select ข้อมูลทั้งหมด จากตาราง airports แล้วให้ทำการ Query ข้อมูลแบบ array เพื่อจะได้แสดงข้อมูลทีละแถวเรียงกันจากตาราง airports แล้วเก็บไว้ในตัวแปร $query_1 


$lati = $query_1['lati'];            //จากนัั้นก็ทำการดึง field lati จากฐานข้อมูล มาเก็บไว้ในตัวแปร $lati ของ PHP เพื่อจะเอาไว้ไปเก็บตัวแปร javascript ในการแสดงแผนที่ตอนเริ่มต้น
$longti = $query_1['longti'];        //จากนัั้นก็ทำการดึง field longti จากฐานข้อมูล มาเก็บไว้ในตัวแปร $longti ของ PHP

?>

 

Step 2 - จากนั้นก็ทำการเรียก File Openlayers.js เข้ามาทำงาน , หรือจะเรียกผ่าน CDN online ก็ได้

ตัวอย่าง Script ในการเรียกใช้งาน Openlayers.js แบบ CDN online

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

 

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

<script>

     
      var lat = '<?=$lati?>';      //มีการโยนค่าตัวแปร $lat ของ php เข้ามาเก็บไว้ในตัวแปร lat ของ javascript เพื่อไว้สำหรับแสดงแผนที่ตอนเริ่มต้น
      var long  = '<?=$longti?>'; 
      
    map = new OpenLayers.Map("mapdiv"); //มีการประกาศ Object จาก class Openlayers.Map() เพื่อทำการส่งค่า id mapdiv ไปแสดงผลที่หน้า html
    map.addLayer(new OpenLayers.Layer.OSM());
    
    epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
    projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
   
    var lonLat = new OpenLayers.LonLat( long ,lat).transform(epsg4326, projectTo); นำเอาตัวแปร lat,lobg มาเก็บไว้ในตัวแปร lonLat เพื่อเอาไว้แสดงผลค่าพิกัดบนแผนที่ OpenstreetMap
          
    
    var zoom=14;
    map.setCenter (lonLat, zoom);

    var vectorLayer = new OpenLayers.Layer.Vector("Overlay");


//มีต่อบรรทัดด่านล่าง.....

 

 

Customer Markers : การปรับแต่งตัว Marker โดยตัวเอง

ในส่วนของเทคนิค Customer Markers นั้น , จะเป็นการปรับตัว Marker ได้ตามใจชอบตามที่ต้องการ

ภาพตัวอย่าง อธิบาย Code Custom Marker
ตัวอย่าง Code : Custom Marker

 

ตัวอย่าง Code : ที่เราสามารถปรับแต่ง Marker จาก File ops.php

<?php while($row_1=mysqli_fetch_array($query)){ ?>
    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( long = '<?= $row_1['longti']?>' , lat = '<?= $row_1['lati']?>').transform(epsg4326, projectTo),
            {description: name = "นี้คือ : "+'<?= $row_1['name']?>'+'<br>'+'<?= $row_1['address']?>' } ,
            {externalGraphic: 'marker_1.png', graphicHeight: 40, graphicWidth: 40, graphicXOffset:-12, graphicYOffset:-40  } //<--- ตรงนี้ คือส่วนที่เรามีการแสดงตัว Marker ขึ้น , โดยมีการปรับเปลี่ยนหรือเพิ่มความสูงความกว้างตามที่เรากำหนด
        );    
    vectorLayer.addFeatures(feature);

 <?php } ?>
    vectorLayer.addFeatures(feature);

เรายังสามารถปรับแต่ง ตัว Marker , ในโปรแกรมตัดต่อภาพ อย่างเช่น Adobe Photoshop ได้อีกด้วย

ปรับแต่งตัว Marker ใน Photoshop
Custom Marker in Photoshop

 

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

ก็จะแสดงตัว Marker(ตัวปรับมุดในแผนที่) ใน OpenStreetMap ของเรา , โดยมีการดีงค่าพิกัดมาแสดงบนแผนที่ เพื่อให้ตัว Marker ปักมุดได้ถูกจุดตำแหน่งของแผนที่

ผลลัพธ์ ในการปรับแต่งตัว Marker
Result - custom marker

 

 

POP-UP Description : การแสดงคำอธิบายข้อมูล , เมื่อมีการเด้ง หน้า POP-UP ขึ้นมา

ในส่วนการแสดงคำอธิบายข้อมูล , เมื่อการคลิกที่ตรง Marker , ก็จะมี Pop-up แสดงผลขึ้มาที่หน้าจอ , และตามด้วข้อความอธิบายต่างๆ , เราสามารถที่เขียนข้อความเป็นรูปแบบ String หรือทำการ ดึงค่าฐานข้อมูลเข้ามาแสดงผลได้ 

อธิบาย ตัวอย่าง Code : Pop-up , Description
ตัวอย่าง Code : Pop-up , Description

 

ตัวอย่าง Code : การแสดงคำอธิบายข้อมูล , เมื่อมีการเด้ง หน้า POP-UP ขึ้นมา

 <?php while($row_1=mysqli_fetch_array($query)){ ?>
    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( long = '<?= $row_1['longti']?>' , lat = '<?= $row_1['lati']?>').transform(epsg4326, projectTo),
            {description: name = "นี้คือ : "+'<?= $row_1['name']?>'+'<br>'+'<?= $row_1['address']?>' } , //<-- ตรงนี้คือส่วน เมื่อมีการคลิกตัว Marker , ก็จะมีการเด้งหน้า Pop-up ขึ้นมา , และก็จะมีการแสดงข้อความขึ้น
            {externalGraphic: 'marker_1.png', graphicHeight: 40, graphicWidth: 40, graphicXOffset:-12, graphicYOffset:-40  }
        );    
    vectorLayer.addFeatures(feature);

 <?php } ?>
    vectorLayer.addFeatures(feature);

    

 

ตัวอย่าง Code : ในการใช้ Function สร้าง Pop-up ขึ้นมา 

map.addLayer(vectorLayer);
 
    
    //Add a selector control to the vectorLayer with popup functions
    var controls = {
      selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })
    };

    function createPopup(feature) {  //ตรงนี้จะเป็นส่วนในกาสร้าง Pop-up เมื่อมีการคลิกปุ่มที่ Marker , Pop-up ก็จะเด้งขึ้นมาหน้าจอ
      feature.popup = new OpenLayers.Popup.FramedCloud("pop",
          feature.geometry.getBounds().getCenterLonLat(),
          null,
          '<div class="markerContent">'+feature.attributes.description+'</div>',
          null,
          true,
          function() { controls['selector'].unselectAll(); }
      );
      //feature.popup.closeOnMove = true;
      map.addPopup(feature.popup);
    }

    function destroyPopup(feature) {     //ตรงนี้เป็นส่วนที่ไว้ลบ Pop-up ทิ้ง , เมื่อการกดออกตรงหน้าจอจาก Pop-up , ในส่วนของ Pop-up ก็จะหายไป
      feature.popup.destroy();
      feature.popup = null;
    }
    
    map.addControl(controls['selector']);
    controls['selector'].activate();

</script>

 

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

ก็จะมีการแสดงผลข้อความ เมื่อมีการคลิกที่ตัว Marker , แล้วมี Pop-up เด้งขึ้นมา

แสดงผลลัพธ์  Pop up : Description
Result - Pop up : Description

 

เทคนิคการแสดงพิกัด หรือ ตัว Markers หลายๆตำแหน่ง

จะต้องมีการวน Loop ซะก่อน , ต้องใช้ loop while ในการแสดงข้อมูลซ้ำออกมาเป็นแถวๆ โดยใช้ Function mysqli_fetch_array() ใน Query ข้อมูลออกมาเป็นแถวๆจากฐานข้อมูล , ที่เราคงรู้แล้วว่า การส่งตัวแปร PHP ไปเก็บค่าในตัวแปร Javascript นั้น , ต้องทำอย่างไรบ้าง เรายังสามารถทำการเขียนการทำงาน loop ของ php ร่วมกับการทำงานของ Javascript ได้ , ได้ใช้เครื่องเหมือย <?php ?> ในการทำงานร่วมกัน

การแสดงตัว Markers หลายๆตำแหน่ง
Multiple Marker and data

 

ตัวอย่าง Code : การแสดงพิกัด หรือ ตัว Markers หลายๆตำแหน่ง

<?php while($row_1=mysqli_fetch_array($query)){ ?> //ทำการ วน loop while เพื่อแสดงค่า array จากฐานข้อมูลมาแสดงผลในแต่ละแถว โดยมีการวน loop ในร่วมกับการทำงานของ javascript 
    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( long = '<?= $row_1['longti']?>' , lat = '<?= $row_1['lati']?>').transform(epsg4326, projectTo),  //<-- จะมีประกาศ Object class OpenLayers.Geometry.Point() ในการส่งค่าแต่ละค่า , ไปแสดงบนแผนที่ OpenstreetMap ของแต่ละจุด, โดยมีการวน Loop while , และทำการ Query จากฐานข้อมูลมาแสดงบนแผนที่แต่ละพิกัด
            {description: name = "นี้คือ : "+'<?= $row_1['name']?>'+'<br>'+'<?= $row_1['address']?>' } ,
            {externalGraphic: 'marker_1.png', graphicHeight: 40, graphicWidth: 40, graphicXOffset:-12, graphicYOffset:-40  }
        );    
    vectorLayer.addFeatures(feature);
    


     <?php } ?>
    vectorLayer.addFeatures(feature);

 

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

ก็จะมีแสดงตัว Marker หลายๆตำแหน่ง บน OpenstreetMap

แสดงลัพธ์ ตัว Markers หลายๆตำแหน่งออกมา
Result - Multiple marker

 

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

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

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

 

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

Openlayers marker multilayer example[ออนไลน์].เข้าถึงได้จาก https://wiki.openstreetmap.org/wiki/Openlayers_marker_multilayer_example 

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

Custom Fields OpenstreetMap [ออนไลน์].เข้าถึงได้จาก  https://slides.woluweb.be/cf-osm/cf-osm.html

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
โปรแกรมทางการบัญชี โปรแกรม 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