วิธีแสดงพิกัดบนแผนที่ OpenStreetMap ด้วย Laravel Framework
ตัวอย่าง : ฐานข้อมูล ตาราง airports
โค้ด: เลือกทั้งหมด
-- phpMyAdmin SQL Dump
-- version 5.0.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Oct 18, 2020 at 02:17 PM
-- Server version: 10.4.11-MariaDB
-- PHP Version: 7.2.27
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `table_airport`
--
-- --------------------------------------------------------
--
-- Table structure for table `airports`
--
CREATE TABLE `airports` (
`id` int(11) NOT NULL,
`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`address` text COLLATE utf8mb4_unicode_ci NOT NULL,
`image` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`lati` decimal(10,6) NOT NULL,
`longti` decimal(10,6) NOT NULL,
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
--
-- Dumping data for table `airports`
--
--
-- Indexes for dumped tables
--
--
-- Indexes for table `airports`
--
ALTER TABLE `airports`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `airports`
--
ALTER TABLE `airports`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
โค้ด: เลือกทั้งหมด
<html lang="en">
<head>
<meta charset="utf-8">
<title>Admin Panel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="{{asset('css/sidebar.css')}}" rel="stylesheet"> <!-- asset ใช้อ้างอิง หาตำแหน่ง Folder css และที่อยู่ File sidebar.css -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>
</head>
<body>
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="list-group list-group-flush">
<a href="/showAirport" class="list-group-item list-group-item-action bg-light">ตารางที่ตั้งสนามบิน</a>
<a href="/showAirline" class="list-group-item list-group-item-action bg-light">ตารางสายการบิน</a>
<a href="/showAirflight" class="list-group-item list-group-item-action bg-light">ตารางเที่ยวบิน</a>
</div>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
@if(Session()->has('success')) <!-- ตรวจสอบว่า มีการส่งค่าสถานะ success ในรูปแบบ Session มาไหม ? , ... -->
<div class="alert alert-success" role="alert">
{{Session()->get('success')}} <!-- แสดงผล สถานะ success ว่า "บันทึกข้อสำเร็จเรียบร้อยแล้ว" -->
</div>
@endif
@if(Session()->has('alert')) <!-- ตรวจสอบว่า มีการส่งค่าสถานะ alert ในรูปแบบ Session มาไหม ? , ... -->
<div class="alert alert-danger" role="alert">
{{Session()->get('alert')}}
</div>
@endif
@yield('content') <!-- เป็นการใช้คำสั่ง ดึงมาปรับเปลี่ยนแก้ไข เฉพาะ 'content' ในส่วนที่ถูกกำหนด-->
</div>
</div>
</body>
</html>
Step 5 - ให้ทำการเข้าไปที่ File showMapAirport.blade.php
Step 6 - แล้วใส่คำสั่งดังนี้
- ใช้คำสั่ง @extends('layouts.master') ของ Template engine เพื่อดึงการทำงานของ File master.blade.php เข้ามาทำงานทั้งหมดทุกส่วน
- ใช้คำสั่ง @section('content') เพื่อแสดงข้อมูลตรงส่วนที่เราต้องการแก้ไข หรือ เพิ่มลงไป
Step 9 - ให้เข้าไปที่ Folder views/showAirport.blade.php Step 10 - จากนั้นทำการกำหนด Link href ให้มีการส่งค่า id ไป ผ่าน Link เหมือนในรูปภาพดังนี้ Step 11 - จากนั้นก็ลองทำการคลิก Link ข้อความ ชื่อ สนามบินดอนเมือง Step 12 - ก็จะมีการส่งค่า id ผ่าน URL ไป , โดยการคลิกข้อความที่เชื่อม Link Code : ตัวอย่าง showAirport.blade.php
โค้ด: เลือกทั้งหมด
@extends('layouts.master') <!-- เป็นการดึง File Template ใน Folder layouts ใน File admin มาร่วมใช้งาน -->
@section('content')
@if ($errors->any()) <!-- เป็น Loop ที่ใช้แจ้งเตือน แสดง Error ของ validation -->
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
<!-- ref - https://laravel.com/docs/7.x/validation#DisplayingTheValidationErrors -->
@endif
<div class="table-responsive ">
<h2>ตารางที่ตั้งสนามบิน</h2>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">ลำดับ</th>
<th scope="col">รูปภาพ</th>
<th scope="col">ชื่อที่ตั้งสนามบิน</th>
<th scope="col">ที่อยู่</th>
<th scope="col">พิกัดสถานที่</th>
<th scope="col">แก้ไข</th>
<th scope="col">ลบ</th>
</tr>
</thead>
@if($airport->count()>0)
<tbody>
<?php $number = 1; ?>
@foreach($airport as $airports)
<tr>
<th scope="row">{{$number}}</th>
<td>
<img src="{{asset('storage')}}/airport_image/{{$airports->image}}" alt="" width="100px" height="100px">
</td>
<td><a href="/showmapAirport/{{$airports->id}}">{{$airports->name}}</a></td>
<td>{{$airports->address}}</td>
<td>
{{$airports->lati}}
{{$airports->longti}}
</td>
<td>
<a href="/editAirport/{{$airports->id}}" class="btn btn-primary">แก้ไข</a>
</td>
<td>
<a href="/deleteAirport/{{$airports->id}}" onclick="return confirm('คุณต้องการลบข้อมูลหรือไม่ ?')" class="btn btn-danger">ลบข้อมูล</a>
</td>
</tr>
<?php $number++; ?>
@endforeach
</tbody>
@endif
</table>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<a href="/createAirport" class="btn btn-primary">เพิ่มข้อมูล</a>
</div>
</div>
@endsection
Step 14 - ไปที่ Function show() ให้มีการกำหนด parameter รับค่า $id เข้ามา , แล้วใช้ Function find() หา $id จาก Model Airport , แล้วให้มีการโยนค่า 'showAirport' , เข้าไปทำงานที่หน้า showMapAirport.blade.php
Code : ตัวอย่างของ File Controller_show_airport.php
โค้ด: เลือกทั้งหมด
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Airflight;
use App\Airport;
use App\Airline;
use Illuminate\Support\Facades\Storage; //ทำการ import api Storage เพื่อทำการ Upload file
use Illuminate\Support\Facades\File; //ทำการ import api File เพื่อทำการ Upload file
//ref - https://laravel.com/docs/7.x/filesystem#storing-files
class Controller_show_airport extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('showAirport')->with('airport',Airport::all()->sortBy('name'));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('createAirport');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
$showAirport = Airport::find($id);
return view('showMapAirport')->with('showAirport',$showAirport);
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
}
Step 15 - จากนั้นก็ประกาศตัว $showAirport ที่มีการรับค่า 'showAirport' เข้ามา , เพื่อจะแสดงข้อมูล จาก ฐานข้อมูล Step 16 - จากนั้นก็ให้ตัวแปร lat,long ของ javascript , เก็บค่า {{$showAirport->lati}} , {{$showAirport->longti}} ลงไป , เพื่อจะทำการส่งค่าพิกัดจากฐานข้อมูลไปแสดงบนแผนที่ OpenstreetMap
Step 17 - จากนั้นก็ประกาศ id="Map" เพิ่อแสดงแผนที่ Openstreet ในหน้า UI
Code : ตัวอย่าง showMapAirport.blade.php
โค้ด: เลือกทั้งหมด
@extends('layouts.master')
@section('content')
@if ($errors->any()) <!-- ตรวจสอบว่ามี Error ของ validation ขึ้นมาหรือเปล่า -->
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error) <!-- ทำการ วน Loop เพื่อแสดง Error ของ validation ขึ้นมาทั้งหมด -->
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
<!-- ref - https://laravel.com/docs/7.x/validation#DisplayingTheValidationErrors -->
@endif
<div class="table-responsive">
<center><h2>แสดงรายละเอียดที่ตั้งสนามบิน</h2></center>
<table width="750" border="10" align="center" cellpadding="5" cellspacing="5">
<tr>
<td><strong>ชื่อสถานที่ :</strong></td>
<td>{{$showAirport->name}}</td>
</tr>
<tr>
<td><strong>ที่อยู่ :</strong></td>
<td>{{$showAirport->address}}</td>
</tr>
<tr>
<td><strong>Locations</strong></td>
<td>
{{$showAirport->lati}}
{{$showAirport->longti}}
</td>
</tr>
<tr>
<td ><strong>แสดงแผนที่</strong></td>
<td ><div id="Map" style="width:500px; height:400px"></div></td>
</tr>
</table>
</div>
<script>
var lat = '{{$showAirport->lati}}';
var long = '{{$showAirport->longti}}';
var 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);
map = new OpenLayers.Map("Map");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position));
map.setCenter(position, zoom);
</script>
@endsection
ผลลัพธ์ที่ได้
ก็จะมีการแสดงพิกัดจากฐานข้อมูล บน แผนที่ OpenstreeMap ขึ้นมา
ข้อสรุป
การใช้ OpenStreetMap ใน Laravel Framework , เป็นวิธีการที่สามารถดึงค่าพิกัดจากฐานข้อมูล มาแสดง บน แผนที่ในรูปแบบของ Free Service ได้ , โดยไม่จำเป็นต้องเสียค่าบริการลิขสิทธิ์ใดๆทั้งสิ้น , ซึ่งจะเป็นประโยชน์สำหรับผู้พัฒนาที่ต้องการใช้ Free Service ในพัฒนาต่อยอดของ Web ที่ต้องการแสดงพิกัดออกมา , หากต้องการศึกษาบทเรียนของ Laravel Framework เพิ่มเติม , สามารถศึกษาได้จากบทเรียนนี้
แหล่งอ้างอิงข้อมูล
https://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example
https://openlayers.org/two/