Geocoder PHPおよびLeaflet.jsでのマッピング-jsチュートリアル-php.cn

Geocoder PHPおよびLeaflet.jsでのマッピング

Webアプリケーション内のインタラクティブマップには、多くの素晴らしい用途があります。データの視覚化から関心のあるポイントの強調まで、マップは場所のコンテキスト内でアイデアを簡単に伝えることが期待されます。

ただし、最も難しい部分は、そのデータをマップが理解できる座標に変換することです。幸いなことに、GeoCoder PHPを使用すると、さまざまなジオコーディングプロバイダーに接続できます。 Leaflet.jsと組み合わせて、シンプルなJavaScriptライブラリで、マップを作成するのは簡単です。

キーテイクアウト

Geocoder PHPとLeaflet.jsを効果的に組み合わせて、Webアプリケーション内にインタラクティブマップを作成し、マップが簡単に理解できる座標にデータを変換できます。

ジオコーダーライブラリにより、さまざまなジオコーディングプロバイダーへの接続と、アプリケーションがデータを受信する方法を書き換えることなく、ニーズが変更された場合にアダプターを切り替える機能を許可します。

マップの外観とインタラクティブ性は、さまざまなリーフレットJSオプションと機能を使用してカスタマイズできます。これらの機能のデータは、PHPを使用してデータベースからフェッチし、リーフレットJS関数に渡すことができます。
開始
は簡単です：
また、htmlを簡単なindex.phpファイルに追加して、ブートストラップを含めるために、マップを表示するための見栄えの良い環境があります。

GeoCoderのセットアップ

Geocoderは、PHPのジオコーダーライブラリを欠いていると自ら請求します。 3つの簡単な手順で使用できます：

{
  "require": {
    "willdurand/geocoder": "*"
  }
}

ログイン後にコピー

アダプターを登録します

プロバイダーを登録

<?php
require 'vendor/autoload.php';

?>
<!DOCTYPE html>
<html>
<head>
    <title>A simple map with Geocoder PHP and Leaflet.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<div >
    <div >
        <div >
            <h1 >A simple map with Geocoder PHP and Leaflet.js</h1>
        </div>
        <div >
            <div >

            </div>
        </div>
    </div><!-- /row -->
</div> <!-- /container -->
<script></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

ログイン後にコピー

geocode！

アダプターを登録します

アダプターは、APIを介して選択したプロバイダーにデータを接続して取得するメカニズムとして機能します。一部のアダプターは、CurlやSocketsなど、PHP 5.3内に組み込み機能を使用しています。 Buzz、Guzzle、Zend HTTPクライアントのような他の人は、作曲家ファイルに依存関係を追加する必要があるサードパーティのオープンソースライブラリを使用します。
この例では、Geocoder PHPライブラリ内にCurlと含まれているCurlhttpadapterクラスを使用します。

プロバイダーを登録

Google Maps、Bing Maps、OpenStreetMapを介したNominatim、TomTomなど、GeoCoder PHPライブラリによってすぐにサポートされている多くのジオコーディングプロバイダーがあります。

完全なリストは、ジオコーダーPHPリポジトリのReadmeにあります。

それぞれのクラスで表される各プロバイダーには、独自のオプションがあります。ニーズに応じて、さまざまな状況で複数のプロバイダーを登録できます。これは、アプリケーションがOpenStreetMapを使用してコスタリカのサンノゼの特定の通りをマッピングする必要がある場合に役立つ場合があります。

この例では、Googleマップを使用するだけですが、将来別のプロバイダーを追加したい場合は、配列に追加する必要があるという方法で登録します。

geocode

{
  "require": {
    "willdurand/geocoder": "*"
  }
}

ログイン後にコピー

新しくインスタンス化された$ geocoderオブジェクト内のGeoCode（）メソッドにアドレスを渡すことができます。これにより、以前に選択されたプロバイダーを介してインスタンス化された結果オブジェクトが返されます。この結果オブジェクトには、getlatitude（）およびgetlongitude（）メソッドを使用できます。

Leaflet.js

との統合

<?php
require 'vendor/autoload.php';

?>
<!DOCTYPE html>
<html>
<head>
    <title>A simple map with Geocoder PHP and Leaflet.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<div >
    <div >
        <div >
            <h1 >A simple map with Geocoder PHP and Leaflet.js</h1>
        </div>
        <div >
            <div >

            </div>
        </div>
    </div><!-- /row -->
</div> <!-- /container -->
<script src="https://img.php.cn/ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

ログイン後にコピー

leaflet.jsは、マッピングを非常に簡単にする強力なJavaScriptライブラリです。

マップは3つの部分で構成されています：

タイル

相互作用層（通常、JavaScriptとCSSを介して）

データポイント
相互作用層は、leaflet.jsによって処理されます。リーフレットJavaScriptとCSSライブラリをスターターHTMLテンプレートに含めるだけです。

データポイントは、私のジオコーダーコードで以前に作成されています。リーフレットが期待する方法でデータの配列をフォーマットする必要があります。この簡単な例では、PHPが作成した文字列を介してマップに含まれるJavaScript変数として個々のマーカーを作成するだけです。

リーフレットには、このデータがGeojson形式を介して渡されるオプションがあり、より大きくて動的なデータセットがあります。

リーフレットはマップコードを既存のDOM要素に注入するため、最初にHTML内のその要素を定義する必要があります。一意のIDを使用してDIVを作成するだけでこれを行うことができます：

// Setup geocoder adapter.
$adapter = new \Geocoder\HttpAdapter\CurlHttpAdapter();

ログイン後にコピー

ビルトインmap（）javaScriptメソッドを呼び出してフッター内のIDに渡すことにより、リーフレットのそのIDをターゲットにすることができます。

次に、マップの3つの部分を構築します。タイルを登録するには、ビルトインtilelayer（）メソッドを呼び出し、必要に応じて属性とズームレベルを定義し、addto（）メソッドを追加します。

// Create a chain of providers.
// Be sure to include my previously created adapter.
$chain = new \Geocoder\Provider\ChainProvider(
    array(
        new \Geocoder\Provider\GoogleMapsProvider($adapter),
    )
);

// Instantiate the geocoder.
$geocoder = new \Geocoder\Geocoder();

// Register my providers.
$geocoder->registerProvider($chain);

ログイン後にコピー

最後に、以前に定義したPHPアレイを使用してマップデータを印刷し、グループとして一緒に定義することにより、マップがそれらのデータポイントに集中することを確認します。全体として、フッター内のJavaScriptは次のとおりです。

ここまで来た場合、何も起こらないことに気付くでしょう。

これは、リーフレットがマップdivの高さや幅にプロパティを注入しないため、スタイルを整えてサイズを変更できるためです。 DIVに高さと幅を与えるだけで、マップが表示されるはずです！結論

ジオコーダーPHPライブラリとLeaflet.jsを使用して、美しくインタラクティブなマップを作成できます。可能なより多くの高度なカスタマイズがあるため、各プロジェクトのそれぞれのドキュメントを必ずチェックしてください。この記事のデモをチェックするか、githubでフォークしてください。

ジオコーダーPHPおよびリーフレットJS

でのマッピングに関するよくある質問（FAQ）

リーフレットJSをPHPと統合するにはどうすればよいですか？

リーフレットJSとPHPの統合には、いくつかのステップが含まれます。まず、Leaflet JSライブラリをPHPファイルに含める必要があります。これは、ライブラリをダウンロードしてPHPファイルにリンクするか、CDNを使用することで実行できます。ライブラリが含まれたら、l.map（）関数を使用してマップを初期化できます。その後、さまざまなリーフレットJS関数を使用して、レイヤー、マーカー、その他の機能をマップに追加できます。これらの機能のデータは、PHPを使用してデータベースから取得し、リーフレットJS関数に渡すことができます。アドレスを地理的座標に変換します。これを使用して、マップにマーカーを配置したり、マップを配置したりできます。リーフレットJSでは、ノミナティムやGoogleのジオコーディングAPIなどのジオコーディングサービスを使用して、アドレスを座標に変換できます。座標を取得したら、l.marker（）関数を使用して、指定された座標にマップ上にマーカーを配置できます。 🎜>

PHPを使用して、データベースの相互作用に組み込まれた関数を使用して、データベースからデータを取得できます。たとえば、MySQLデータベースを使用している場合は、MySQLI_Connect（）関数を使用してデータベースに接続し、MySQLi_Query（）関数を使用してSQLクエリを実行してデータを取得できます。フェッチされたデータをリーフレットJS関数に渡して、マップに機能を追加することができます。あなたの地図に。たとえば、l.popup（）関数を使用してマップにポップアップを追加できます。これにより、マーカーまたはその他の機能がクリックされたときに追加情報を表示できます。 L.Control.Layers（）関数を使用してレイヤー制御を追加することもできます。これにより、ユーザーは異なるベースレイヤーとオーバーレイレイヤーを切り替えることができます。

マップの外観をカスタマイズするにはどうすればよいですか？

さまざまなリーフレットJSオプションと機能を使用して、マップの外観をカスタマイズできます。たとえば、setView（）関数を使用して、マップの初期地理センターとズームレベルを設定できます。また、l.tilelayer（）関数を使用して、マップにタイルレイヤーを追加することもできます。これにより、マップのベースレイヤーの視覚的な外観が決まります。 l.map（）関数のオプションパラメーターを使用して、マップの最大ズームレベル、帰属制御を表示するなど、他のさまざまなオプションを設定できます。ジオコーディングサービスを使用していますか？