Mapboxを使用してVue.jsでジオコーディングアプリを構築する方法

公開: 2022-03-10

クイックサマリー↬このガイドでは、フォワードジオコーディングとリバースジオコーディングの概念について一般的に説明します。 MapboxとVue.js2.6.11を使用して特定の場所を表示するためにこれらの概念を適用するミニアプリを構築し、これを実現します。

ピンポイントの精度とモジュール性は、地理地理学を特定の場所を見つけるための完璧な手段にする特典の1つです。

このガイドでは、Vue.jsとMapboxを使用して、簡単なジオコーディングアプリを最初から作成します。フロントエンドスキャフォールドの構築から、フォワードジオコーディングとリバースジオコーディングを処理するジオコーダーの構築までのプロセスについて説明します。このガイドを最大限に活用するには、JavaScriptとVue.jsの基本的な理解と、API呼び出しの方法を理解する必要があります。

ジオコーディングとは何ですか？

ジオコーディングは、テキストベースの場所を、世界の場所を示す地理座標（通常は経度と緯度）に変換することです。

ジオコーディングには、順方向と逆方向の2つのタイプがあります。順方向ジオコーディングは位置テキストを地理座標に変換しますが、逆ジオコーディングは座標を位置テキストに変換します。

つまり、逆ジオコーディングは40.714224、-73.961452を「277Bedford Ave、Brooklyn」に変換し、順ジオコーディングは逆に「277 Bedford Ave、Brooklyn」を40.714224、-73.961452に変換します。

より多くの洞察を与えるために、カスタムマーカーを備えたインタラクティブなWebマップを使用して位置座標を表示するミニWebアプリを構築し、その後、位置テキストにデコードします。

私たちのアプリは、次の基本的な機能を備えています。

マーカー付きのインタラクティブマップ表示へのアクセスをユーザーに提供します。
座標を表示しながら、ユーザーがマーカーを自由に移動できるようにします。
ユーザーの要求に応じて、テキストベースの場所または場所の座標を返します。

ジャンプした後もっと！以下を読み続けてください↓

VueCLIを使用してプロジェクトを設定する

このリポジトリにある定型文を利用します。これには、VueCLIとyarnをパッケージマネージャーとして使用する新しいプロジェクトが含まれています。リポジトリのクローンを作成する必要があります。 geocoder/boilerplateブランチから作業していることを確認してください。

アプリケーションのファイル構造を設定する

次に、プロジェクトのファイル構造を設定する必要があります。コンポーネントのフォルダーにあるHelloworld.vueファイルの名前をIndex.vueに変更し、今のところ空白のままにします。先に進み、以下をApp.vueファイルにコピーします。

 <template> <div> <!--Navbar Here --> <div> <nav> <div class="header"> <h3>Geocoder</h3> </div> </nav> </div> <!--Index Page Here --> <index /> </div> </template> <script> import index from "./components/index.vue"; export default { name: "App", components: { index, }, }; </script>

ここでは、最近名前が変更されたコンポーネントをローカルにインポートして登録しました。また、アプリの美しさを高めるためのナビゲーションバーも追加しました。

環境変数をロードするには、 .envファイルが必要です。先に進み、プロジェクトフォルダのルートに1つ追加します。

必要なパッケージとライブラリをインストールする

開発プロセスを開始するには、必要なライブラリをインストールする必要があります。このプロジェクトで使用するもののリストは次のとおりです。

Mapbox GL JS
このJavaScriptライブラリは、WebGLを使用して、ベクタータイルとMapboxからインタラクティブマップをレンダリングします。
Mapbox-gl-geocoder
Mapbox GLのこのジオコーダーコントロールは、フォワードジオコーディングに役立ちます。
Dotenv
Vue CLIがプリインストールされているため、これをインストールする必要はありません。これは、環境変数を.envファイルからprocess.envにロードするのに役立ちます。このようにして、構成をコードから分離しておくことができます。
アクシオス
このライブラリは、HTTPリクエストを作成するのに役立ちます。

好みのパッケージマネージャーに従って、CLIにパッケージをインストールします。 Yarnを使用している場合は、以下のコマンドを実行します。

 cd geocoder && yarn add mapbox-gl @mapbox/mapbox-gl-geocoder axios

npmを使用している場合は、次を実行します。

 cd geocoder && npm i mapbox-gl @mapbox/mapbox-gl-geocoder axios --save

インストールコマンドを実行する前に、まずgeocoderフォルダーに入る必要がありました。

Vue.jsでフロントエンドを足場にする

先に進んで、アプリのレイアウトを作成しましょう。マップを格納する要素、マップ上のマーカーの動きを聞きながら座標を表示する領域、および逆ジオコーディングAPIを呼び出すときに位置を表示する要素が必要になります。これらすべてをカードコンポーネント内に収容できます。

以下をIndex.vueファイルにコピーします。

 <template> <div class="main"> <div class="flex"> <!-- Map Display here --> <div class="map-holder"> <div></div> </div> <!-- Coordinates Display here --> <div class="dislpay-arena"> <div class="coordinates-header"> <h3>Current Coordinates</h3> <p>Latitude:</p> <p>Longitude:</p> </div> <div class="coordinates-header"> <h3>Current Location</h3> <div class="form-group"> <input type="text" class="location-control" :value="location" readonly /> <button type="button" class="copy-btn">Copy</button> </div> <button type="button" class="location-btn">Get Location</button> </div> </div> </div> </div> </template>

現在の状況を確認するには、開発サーバーを起動します。糸の場合：

 yarn serve

またはnpmの場合：

 npm run serve

アプリは次のようになります。

左側の空白部分は見えません。それは私たちの地図表示を収容するはずです。それを追加しましょう。

Mapboxを使用したインタラクティブマップ表示

最初に行う必要があるのは、MapboxGLおよびGeocoderライブラリにアクセスすることです。まず、 Index.vueファイルにMapboxGLおよびGeocoderライブラリをインポートします。

 import axios from "axios"; import mapboxgl from "mapbox-gl"; import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder"; import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";

Mapboxには、マップベクトルタイルを計算するための一意のアクセストークンが必要です。自分のものを取得し、それを環境変数として.envファイルに追加します。

 .env

 VUE_APP_MAP_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

また、マップタイルをデータインスタンスにまとめるのに役立つプロパティを定義する必要があります。ライブラリをインポートした場所の下に以下を追加します。

 export default { data() { return { loading: false, location: "", access_token: process.env.VUE_APP_MAP_ACCESS_TOKEN, center: [0, 0], map: {}, }; }, }

locationプロパティは、scaffoldにある入力に基づいてモデル化されます。これを使用して、逆ジオコーディングを処理します（つまり、座標から位置を表示します）。
centerのプロパティには、座標（経度と緯度）が格納されています。これは、まもなく表示されるように、マップタイルをまとめるのに重要です。
access_tokenプロパティは、前に追加した環境変数を参照します。
mapプロパティは、マップコンポーネントのコンストラクターとして機能します。

フォワードジオコーダーが埋め込まれたインタラクティブマップをプロットするメソッドの作成に進みましょう。このメソッドは基本関数であり、コンポーネントとMapboxGLの間の仲介役として機能します。このメソッドをcreateMapと呼びます。これをデータオブジェクトの下に追加します。

 mounted() { this.createMap() }, methods: { async createMap() { try { mapboxgl.accessToken = this.access_token; this.map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/streets-v11", center: this.center, zoom: 11, }); } catch (err) { console.log("map error", err); } }, },

マップを作成するために、マップを格納するcontainer 、マップの表示形式のstyleプロパティ、および座標を格納するcenterプロパティを指定しました。 centerプロパティは配列型であり、経度と緯度を保持します。

Mapbox GL JSは、ページ上のこれらのパラメーターに基づいてマップを初期化し、 Mapオブジェクトを返します。 Mapオブジェクトは、ページ上のマップを参照し、マップとの対話を可能にするメソッドとプロパティを公開します。この返されたオブジェクトをデータインスタンスthis.mapに保存しました。

MapboxGeocoderを使用したフォワードジオコーディング

次に、ジオコーダーとカスタムマーカーを追加します。ジオコーダーは、テキストベースの場所を座標に変換することにより、前方ジオコーディングを処理します。これは、マップに追加された検索入力ボックスの形式で表示されます。

上記のthis.map初期化の下に以下を追加します。

 let geocoder = new MapboxGeocoder({ accessToken: this.access_token, mapboxgl: mapboxgl, marker: false, }); this.map.addControl(geocoder); geocoder.on("result", (e) => { const marker = new mapboxgl.Marker({ draggable: true, color: "#D80739", }) .setLngLat(e.result.center) .addTo(this.map); this.center = e.result.center; marker.on("dragend", (e) => { this.center = Object.values(e.target.getLngLat()); }); });

ここでは、最初にMapboxGeocoderコンストラクターを使用してジオコーダーの新しいインスタンスを作成しました。これにより、提供されたパラメーターに基づいてジオコーダーが初期化され、メソッドとイベントに公開されたオブジェクトが返されます。 accessTokenプロパティはMapboxアクセストークンを参照し、 mapboxglは現在使用されているマップライブラリを参照します。

私たちのアプリの中核はカスタムマーカーです。ジオコーダーにはデフォルトで1つ付属しています。ただし、これでは必要なカスタマイズのすべてが得られるわけではありません。したがって、無効にしました。

続いて、新しく作成したジオコーダーをパラメーターとしてaddControlメソッドに渡し、マップオブジェクトによって公開されました。 addControlは、 controlをパラメーターとして受け入れます。

カスタムマーカーを作成するために、ジオコーダーオブジェクトによって公開されたイベントを利用しました。 on eventリスナーを使用すると、ジオコーダー内で発生するイベントをサブスクライブできます。さまざまなイベントをパラメータとして受け入れます。入力が設定されたときに発生するresultイベントをリッスンしています。

簡単に言うと、 resultとして、マーカーコンストラクターは、提供されたパラメーター（この場合はドラッグ可能な属性と色）に基づいてマーカーを作成します。これは、 setLngLatメソッドを使用して座標を取得するオブジェクトを返します。 addToメソッドを使用して、既存のマップにカスタムマーカーを追加します。最後に、インスタンスのcenterプロパティを新しい座標で更新します。

また、カスタムマーカーの動きを追跡する必要があります。 dragendイベントリスナーを使用してこれを実現し、現在の座標でcenterプロパティを更新しました。

テンプレートを更新して、インタラクティブマップとフォワードジオコーダーを表示しましょう。テンプレートの座標表示セクションを次のように更新します。

 <div class="coordinates-header"> <h3>Current Coordinates</h3> <p>Latitude: {{ center[0] }}</p> <p>Longitude: {{ center[1] }}</p> </div>

イベント後にcenterのプロパティを常に更新したことを覚えていますか？ここでは、現在の値に基づいた座標を表示しています。

アプリの美しさを高めるには、 index.htmlファイルのheadセクションに次のCSSファイルを追加します。このファイルをパブリックフォルダに置きます。

 <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" rel="stylesheet" />

アプリは次のようになります。

MapboxAPIを使用した逆ジオコードの場所

次に、座標をテキストベースの場所に逆ジオコーディングします。それを処理するメソッドを作成し、テンプレートの[ Get Location ]ボタンを使用してトリガーしてみましょう。

Mapboxの逆ジオコーディングは、逆ジオコーディングAPIによって処理されます。これは、 longitude 、 latitude 、およびaccess tokenをリクエストパラメータとして受け入れます。この呼び出しは、通常、さまざまな詳細を含む応答ペイロードを返します。私たちの懸念は、 features配列の最初のオブジェクトであり、ジオコーディングされた場所が逆になっています。

取得したい場所のlongitude 、 latitude 、 access_tokenをMapboxAPIに送信する関数を作成する必要があります。その場所の詳細を取得するには、それらを送信する必要があります。

最後に、インスタンスのlocationプロパティを、オブジェクトのplace_nameキーの値で更新する必要があります。

createMap()関数の下に、必要なものを処理する新しい関数を追加しましょう。これはそれがどのように見えるべきかです：

 async getLocation() { try { this.loading = true; const response = await axios.get( `https://api.mapbox.com/geocoding/v5/mapbox.places/${this.center[0]},${this.center[1]}.json?access_token=${this.access_token}` ); this.loading = false; this.location = response.data.features[0].place_name; } catch (err) { this.loading = false; console.log(err); } },

この関数は、MapboxAPIに対してGETリクエストを行います。応答にはplace_name （選択した場所の名前）が含まれます。これを応答から取得し、 this.locationの値として設定します。

これが完了したら、作成したこの関数を呼び出すボタンを編集して設定する必要があります。 clickイベントリスナーを使用します—ユーザーがクリックするとgetLocationメソッドを呼び出します。先に進み、ボタンコンポーネントをこれに編集します。

 <button type="button" :disabled="loading" :class="{ disabled: loading }" class="location-btn" @click="getLocation" > Get Location </button>

ケーキのアイシングとして、表示されている場所をクリップボードにコピーする機能を付けてみましょう。 getLocation関数のすぐ下にこれを追加します。

 copyLocation() { if (this.location) { navigator.clipboard.writeText(this.location); alert("Location Copied") } return; },

Copyボタンコンポーネントを更新して、これをトリガーします。

 <button type="button" class="copy-btn" @click="copyLocation">

結論

このガイドでは、Mapboxを使用したジオコーディングについて説明しました。テキストベースの場所を座標に変換し、インタラクティブマップに場所を表示し、ユーザーの要求に応じて座標をテキストベースの場所に変換するジオコーディングアプリを構築しました。このガイドはほんの始まりに過ぎません。 Mapboxが提供するさまざまなマップスタイルを使用してマップの表示を変更するなど、ジオコーディングAPIを使用するとさらに多くのことが実現できます。

ソースコードはGitHubで入手できます。

資力

「ジオコーディング」、Mapboxドキュメント
「スタイル」、Mapboxドキュメント
「クライアント側コードでの環境変数の使用」、「モードと環境変数」、Vue CLI