หน้าเว็บ

วันศุกร์ที่ 14 ตุลาคม พ.ศ. 2559

การแสดงข้อมูลแผนที่จาก PostGIS เป็น GeoJSON บน Leaflet

_______การแสดงข้อมูลแผนที่บน Leaflet นั้น ข้อมูลส่วนใหญ่จะอยู่ในรูปแบบ GeoJSON แต่ทีนี้ข้อมูลของผมเองนี้ดันอยู่ในรูปแบบของ Database ที่เป็นแบบ PostGIS ซึ่งข้อมูลจะเป็นลักษณะของตารางและเก็บค่า Geometry ไว้ อ้าวแล้วยังงี้จะต้องทำอย่างไรถึงจะแสดงบน Leaflet ได้หล่ะ ไม่ยากเลยครับเราเพียงแค่ใช้ PHP แปลงข้อมูลของเราให้อยู่ในรูปแบบ GeoJSON เท่านั้นเอง สามารถเข้าไปดูได้ที่ GitHub ของผมเองได้ครับ ไปดูกันเลยว่าทำอย่างไร

ตัวอย่างจาก GitHub ดัง URL ด้านล่าง
https://gist.github.com/sanchangon/24058c407ab051dc5f72fa5fdbadc0ac

1. ไฟล์ healthcenter.html ที่ใช้แสดงแผนที่
<html>
<!--
 * Name: Leafletjs connect php-geojson through postgis spatial database   
 * Purpose: GIST@NU (www.cgistln.nu.ac.th)
 * Date: 2016/10/13
 * Author: Chingchai Humhong (chingchaih@nu.ac.th)
 * Acknowledgement: 
 !-->
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 800px;"></div>
<script type="text/javascript">
var map = L.map('map');
var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
    
OpenStreetMap_BlackAndWhite.addTo(map);
map.setView([17.05, 100.25], 9);
function addDataToMap(data, map) {
    var dataLayer = L.geoJson(data, {
        onEachFeature: function(feature, layer) {
            var popupText = "hospital name: " + feature.properties.name
                + "<br>hospital code: " + feature.properties.maincode;
                //+ "<br><a href='" + feature.properties.url + "'>More info</a>";
            layer.bindPopup(popupText); }
        });
    dataLayer.addTo(map);
}
$.getJSON("healthcenter.php", function(data) { addDataToMap(data,map); });
</script>
</body>
</html>

2. ไฟล์ healthcenter.php ที่ใช้ในการแปลงเป็น GeoJSON
<?php
//-------------------------------------------------------------
// * Name: PHP-PostGIS2GeoJSON  
// * Purpose: GIST@NU (www.cgistln.nu.ac.th)
// * Date: 2016/10/13
// * Author: Chingchai Humhong (chingchaih@nu.ac.th)
// * Acknowledgement: 
//-------------------------------------------------------------
   // Database connection settings
  define("PG_DB"  , "database");
  define("PG_HOST", "localhost"); 
  define("PG_USER", "postgres");
  define("PG_PORT", "port"); 
  define("PG_PASS", "password"); 
  define("TABLE",   "table");
  
    // Retrieve start point
    // Connect to database
    $con = pg_connect("dbname=".PG_DB." host=".PG_HOST." port=".PG_PORT." password=".PG_PASS." user=".PG_USER);
    $sql = "select  gid, provcode, maincode, bed, name, lat, lon, typecode, ST_AsGeoJSON(geom) AS geojson from ".TABLE." WHERE provcode = 65; ";
    
   // Perform database query
   $query = pg_query($con,$sql);   
   //echo $sql;
    // Return route as GeoJSON
   $geojson = array(
      'type'      => 'FeatureCollection',
      'features'  => array()
   ); 
  
   // Add geom to GeoJSON array
   while($edge=pg_fetch_assoc($query)) {  
      $feature = array(
         'type' => 'Feature',
         'geometry' => json_decode($edge['geojson'], true),
         'crs' => array(
            'type' => 'EPSG',
            'properties' => array('code' => '4326')
         ),
            'properties' => array(
'gid' => $edge['gid'],
            'provcode' => $edge['provcode'],
            'maincode' => $edge['maincode'],
            'bed' => $edge['bed'],
            'name' => $edge['name'],
            'lat' => $edge['lat'],
            'lon' => $edge['lon'],
            'typecode' => $edge['typecode']
         )
      );
      
      // Add feature array to feature collection array
      array_push($geojson['features'], $feature);
   }
   // Close database connection
   pg_close($con);
   // Return routing result
   // header('Content-type: application/json',true);
  echo json_encode($geojson);
?>

เขียนโดย: ชิงชัย หุมห้อง (14 ตุลาคม 2559)
Reference: https://github.com/sanchangon/leaflet-phpgeojson