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

วันศุกร์ที่ 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>

<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: '© <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

หน้าเว็บ

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

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