PHPとLeafletを使って地図アプリケーションを作成する-PHPチュートリアル-php.cn

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

WBOY

リリース： 2023-05-11 16:20:02

オリジナル

1234 人が閲覧しました

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

準備作業

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

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

(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 サイトの他の関連記事を参照してください。