NUGIS :: Free and Open Source GIS // Geoinformatics Community and Sharing ::: Leaflet

แสดงบทความที่มีป้ายกำกับ 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

วันอังคารที่ 29 เมษายน พ.ศ. 2557

สร้างแผนที่ออนไลน์ (Webmap) ง่ายๆ ด้วย qgis2leaf

______เมื่อก่อนนั้นการที่จะสร้างแผนที่ออน์ไลน์(Webmap)นั้นเป็นเรื่องที่ยากมากๆ สำหรับคนที่ไม่มีพื้นฐานทางด้านการเขียนโปรแกรม แต่ปัจจุบันนี้ได้มีเครื่องมือหลายๆอย่างที่อำนวยความสะดวกในการที่จะสร้างแผนที่ออน์ไลน์ให้เรานั้นง่ายมากๆ ครับ ผมขอยกตัวอย่างแค่ของ QGIS ตัวเดียวล่ะกันมีปลั๊กอยู่ตัวนึงชื่อว่า "qgis2leaf" เป็นปลั๊กอินที่ดีสำหรับการสร้างแผนที่ออน์ไลน์(WebMap) ทีมพัฒนาคือ "Riccardo Klinger, Geolicious" ทำให้เราสามารถสร้างแผนที่ออน์ไลน์ได้ภายในไม่ถึง 5 นาที ก็ถือว่าสะดวกและก็ง่ายสำหรับมือใหม่ที่หัดทำ

Leaflet นั้นเป็น JavaScript library สำหรับสร้างแผนที่ออน์ไลน์ และเป็น Open-Source JavaScript Library for Mobile-Friendly Interactive Maps ซึ่งออกแบบมาให้ดูดี เรียบง่าย และมีประสิทธิภาพในการใช้งานทั้งใน desktop และ mobile platforms โดยอาศัย HTML5 และ CSS3 ก่อนหน้านี้ก็จะมี OpenLayers ก็ถือว่าเป็นอีกตัวนึงที่นิยมใช้กันมาก ท่านไหนที่สนใจก็ลองเข้าไปอ่าน API ดูครับ http://leafletjs.com

1. ก่อนเราต้องติดตั้งปลํ้กอิน qgis2leaf