วิธีแสดงพิกัดบนแผนที่ OpenStreetMap ด้วย Laravel Framework

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

makup
PHP Super Member
PHP Super Member
โพสต์: 398
ลงทะเบียนเมื่อ: 05/10/2020 10:02 am

วิธีแสดงพิกัดบนแผนที่ OpenStreetMap ด้วย Laravel Framework

โพสต์ที่ยังไม่ได้อ่าน โดย makup »

ในบทความนี้ จะมาแนะนำวิธีการใช้ OpenStreetMap ด้วย Laravel Framework , ซึ่งจะเป็นประโยชน์อย่างมากในดึงค่าพิกัดมาแสดงบน แผนที่ ในรูปแบบ Free service และ ใช้ร่วมกับ Laravel Framework , จากที่ผู้พัฒนาโปรแกรม website ส่วนมากจะนิยมใช้ Google map api สำหรับแสดงพิกัดที่ดึงจากฐานข้อมูลมาแสดง , เราจะมาดูขั้นตอนว่า วิธีการใช้งานเป็นอย่างไร สามารถศึกษาได้จากบทความนี้

วิธีแสดงพิกัดบนแผนที่ 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 */;
Step 1 - ให้เข้าไปที่ Folder views , แล้วทำการสร้าง File ชื่อ showMapairport.blade.php
59.jpg
59.jpg (105.39 KiB) Viewed 2438 times
Step 2 - จากนั้นเข้าไปที่ resource/views/master.blade.php
60.JPG
60.JPG (17.07 KiB) Viewed 2438 times
Step 3 - แล้วทำการเรียกใช้งาน File Openlayers.js ผ่าน CDN online ใน Tag <script>
61.JPG
61.JPG (84.25 KiB) Viewed 2438 times
Step 4 - ให้ทำการเพิ่มคำสั่ง @yield('content')ของ Template engine Laravel Framework เพื่อให้มีการสามารถปรับเปลี่ยนแก้ไข หรือ เพิ่มข้อมูลได้ตรงส่วนที่เรากำหนดไว้ใน <body>
62.JPG
62.JPG (43.64 KiB) Viewed 2438 times
Code : ตัวอย่าง master.blade.php

โค้ด: เลือกทั้งหมด

<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
63-1.JPG
63-1.JPG (43.66 KiB) Viewed 2438 times

Step 6 - แล้วใส่คำสั่งดังนี้
  • ใช้คำสั่ง @extends('layouts.master') ของ Template engine เพื่อดึงการทำงานของ File master.blade.php เข้ามาทำงานทั้งหมดทุกส่วน
  • ใช้คำสั่ง @section('content') เพื่อแสดงข้อมูลตรงส่วนที่เราต้องการแก้ไข หรือ เพิ่มลงไป
63.JPG
63.JPG (14.68 KiB) Viewed 2438 times
Step 7 - จากนั้นก็ให้ทำการเพิ่มรายละเอียดตารางลงไป เหมือนในรูปภาพดังนี้
64.JPG
64.JPG (52.83 KiB) Viewed 2438 times
Step 8 - ให้ไปทำการกำหนด Route ที่ routes/web.php , โดยมีการส่งค่า id ผ่าน URL ไป , แล้ววิ่งไปที่ Controller_show_airport.php , แล้ววิ่งไปที่ Function show()
65.JPG
65.JPG (50.67 KiB) Viewed 2438 times

Step 9 - ให้เข้าไปที่ Folder views/showAirport.blade.php
66.JPG
66.JPG (49.52 KiB) Viewed 2438 times
Step 10 - จากนั้นทำการกำหนด Link href ให้มีการส่งค่า id ไป ผ่าน Link เหมือนในรูปภาพดังนี้
67.JPG
67.JPG (31.74 KiB) Viewed 2438 times
Step 11 - จากนั้นก็ลองทำการคลิก Link ข้อความ ชื่อ สนามบินดอนเมือง
67-2.JPG
67-2.JPG (20.58 KiB) Viewed 2438 times
Step 12 - ก็จะมีการส่งค่า id ผ่าน URL ไป , โดยการคลิกข้อความที่เชื่อม Link
67-1.JPG
67-1.JPG (13.38 KiB) Viewed 2438 times
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 13 - จากนั้นให้เข้าไปที่ app/Http/Controller_show_airport.php
68.JPG
68.JPG (31.41 KiB) Viewed 2438 times

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
     */
    
}
69.JPG
69.JPG (32.2 KiB) Viewed 2438 times

Step 15 - จากนั้นก็ประกาศตัว $showAirport ที่มีการรับค่า 'showAirport' เข้ามา , เพื่อจะแสดงข้อมูล จาก ฐานข้อมูล
70.JPG
70.JPG (55.63 KiB) Viewed 2438 times
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/
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 37