検索

ホームページ >バックエンド開発 >PHPチュートリアル >PHPとLeafletを使って地図アプリケーションを作成する

PHPとLeafletを使って地図アプリケーションを作成する

WBOY
WBOYオリジナル
2023-05-11 15:54:371262ブラウズ

近年、Web GIS テクノロジがますます広く使用されるようになり、軽量のオープンソース JavaScript マップ ライブラリである Leaflet が、多くの Web マップ アプリケーションの最初の選択肢となっています。 PHP 言語で記述された Web アプリケーションを使用すると、Web 上の地図情報や地理的位置データを簡単に表示できます。この記事では、PHPとLeafletを使って地図アプリケーションを作成する方法を説明します。

  1. 準備作業

開発の前に、いくつかの開発ツールを準備する必要があります。まず、事前にPHP開発環境をインストールする必要がありますが、この記事のコードはPHP7.3.12バージョンをベースに開発しています。次に、Leaflet ライブラリをダウンロードする必要があります。公式 Web サイトからライブラリの最新バージョンをダウンロードするか、GitHub でソース コードを入手できます。最後に、PHP で開発された Web サービスを迅速に構築できるようにする Web フレームワークを選択する必要があります。この記事では、PHP フレームワークである Lumen を使用することを選択します。

  1. マップ アプリケーションの作成

(1) Lumen プロジェクトの作成

Lumen は Composer を通じてインストールできます。コマンド ラインに次のコマンドを入力します (Composer がインストールされている場合): 

composer create-project --prefer-dist laravel/lumen map-app

このコマンドは、現在のファイル ディレクトリに map-app という名前の Lumen プロジェクトを作成します。

#(2) 依存関係のインストール

プロジェクトのルート ディレクトリに移動し、次のコマンドを実行して必要な依存関係をインストールします。

composer install

(3) リーフレットの統合

us Web サイトのルート ディレクトリに新しいフォルダー (「public」など) を作成し、ダウンロードしたリーフレット ライブラリ ファイルをこのフォルダーに解凍します。次のコードを HTML ページに追加して、Leaflet ライブラリを導入します。 

<link rel="stylesheet" href="/public/leaflet/leaflet.css" />
<script type="text/javascript" src="/public/leaflet/leaflet.js"></script>

(4) ルーティングの定義

Lumen フレームワークでは、通常、ルーティングを使用して URL リクエストを処理します。 「routes」ディレクトリに「web.php」という名前のファイルを作成し、異なるプロセッサに対応する異なる URL を定義します。例: 

<?php
$router->get('/', 'MapController@showMap');
?>

さまざまな URL リクエストを処理するために、ルート ディレクトリに「MapController.php」という名前のファイルを作成します。このファイルには次のメソッドが含まれています。 

<?php
namespace AppHttpControllers;

use LaravelLumenRoutingController as BaseController;

class MapController extends BaseController {

  public function showMap() {
    return view('map');
  }

}
?>

このメソッドは、ユーザーが「/」 URL にアクセスすると、それに応じて「map.blade.php」という名前の Blade テンプレートが表示されることを指定します。

(5) Blade テンプレートの定義

Blade は、特定の構文形式を使用してテンプレート ファイルを作成できる非常に人気のある PHP テンプレート エンジンです。 「resources/views」ディレクトリに、「map.blade.php」という名前のテンプレート ファイルを作成します。ファイルには次のコードが含まれています。 

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/public/leaflet/leaflet.css" />
  <script src="/public/leaflet/leaflet.js"></script>
  <style>
    #mapid { height: 600px; }
  </style>
</head>
<body>
  <div id="mapid"></div>
  <script>
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
          '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
          'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'change me'
    }).addTo(mymap);
  </script>
</body>
</html>

このテンプレート ファイルは、Mapbox が提供する市街地図スタイルを使用して、地図の初期位置とズーム レベルを定義します。このファイルでは、「accessToken」にあなたの名前を入力する必要があります。独自の Mapbox アクセス トークン。テンプレート ファイルでは、「public」フォルダーに導入された Leaflet ライブラリ ファイルも参照する必要があります。

(6) アプリケーションの実行

これで、コマンド ラインに次のコマンドを入力して Web サーバーを起動できるようになります:

php -S localhost:8000 -t public

Visit "http://localhost: 8000」をクリックすると、地図を表示する Web ページが表示されます。

    結論
この記事の学習を通じて、読者は PHP と Leaflet を使用して地図アプリケーションを作成する方法を学びました。 Lumen フレームワークの使用方法、Leaflet ライブラリのインポート方法、テンプレートでマップを作成する方法、Web サーバーを起動する方法を学びました。読者は、この記事を使用して、PHP を使用して Web GIS アプリケーションを作成する方法を予備的に理解することができます。

以上がPHPとLeafletを使って地図アプリケーションを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript composer html Token public map github http Access
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：PHP と Firebase を使用してリアルタイムのデータ同期を行う方法次の記事：PHP と Firebase を使用してリアルタイムのデータ同期を行う方法

関連記事

続きを見る