翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
Amazon Location での MapLibre ツールとライブラリの使用
Amazon Location でインタラクティブアプリケーションを作成するための重要なツールの 1 つは です MapLibre。MapLibre
注記
Amazon Location のいずれかの機能を使用する場合には、使用する言語のAWS SDK をインストールします。
-
マップ
アプリケーションにマップを表示するには、Amazon Location から提供されたデータを使用して画面に描画するマップレンダリングエンジンが必要です。マップレンダリングエンジンには、マップを画面移動したりズームしたり、マーカーやプッシュピン、その他の注釈をマップに追加したりする機能もあります。
Amazon Location Service では、レンダリングエンジンを使用してマップをMapLibre
レンダリングすることを推奨しています。 MapLibre GL JS は でマップを表示するためのエンジンであり JavaScript、 MapLibre Native は iOS または Android のマップを提供します。 MapLibre には、コア機能を拡張するプラグインエコシステムもあります。詳細については、https://maplibre.org/maplibre-gl-js-docs/plugins/
を参照してください。 -
場所検索
検索ユーザーインターフェイスの作成を簡素化するには、ウェブ用のMapLibre ジオコーダー
を使用できます (Android アプリケーションは Android Places プラグイン を使用できます)。 Amazon Location for Maplibre ジオコーダーライブラリ
を使用して、 アプリケーションで で Amazon Location を使用するプロセスを簡素化 amazon-location-for-maplibre-gl-geocoder
します JavaScript。 -
ルート
マップにルートを表示するには、MapLibre方向
を使用します。 -
ジオフェンスとトラッカー
MapLibre にはジオフェンスと追跡用の特定のレンダリングやツールはありませんが、レンダリング機能とプラグイン
を使用して、ジオフェンスと追跡対象デバイスをマップに表示できます。 追跡対象のデバイスは MQTT を使用するか、手動で Amazon Location Service へアップデートを送信できます。ジオフェンスイベントに応答するには、AWS Lambda を使用できます。
Amazon Location Service に追加機能を提供するオープンソースライブラリが多数用意されています。たとえば、空間分析機能を提供する Turf
多くのライブラリは、オープンスタンダードの GeoJSON
Amazon Location MapLibre Geocoder プラグイン
Amazon Location MapLibre ジオコーダープラグインは、 maplibre-gl-geocoder
- インストール
次のコマンドを使用して、モジュールで使用する Amazon Location MapLibre ジオコーダープラグインを NPM からインストールできます。
npm install @aws/amazon-location-for-maplibre-gl-geocoder
スクリプトを使用して、ブラウザで直接使用できるように HTML ファイルにインポートできます。
<script src="https://www.unpkg.com/@aws/amazon-location-for-maplibre-gl-geocoder@1">/script<
- モジュールの使用
このコードは、Amazon Location のジオコーディング機能を備えた Maplibre GL JavaScript マップを設定します。Amazon Cognito ID プールを介した認証を使用して、Amazon Location リソースにアクセスします。マップは指定されたスタイルと中央座標でレンダリングされ、 はマップ上の場所を検索できます。
// Import MapLibre GL JS import maplibregl from "maplibre-gl"; // Import from the AWS JavaScript SDK V3 import { LocationClient } from "@aws-sdk/client-location"; // Import the utility functions import { withIdentityPoolId } from "@aws/amazon-location-utilities-auth-helper"; // Import the AmazonLocationWithMaplibreGeocoder import { buildAmazonLocationMaplibreGeocoder, AmazonLocationMaplibreGeocoder } from "@aws/amazon-location-for-maplibre-gl-geocoder" const identityPoolId = "
Identity Pool ID
"; const mapName = "Map Name
"; const region = "Region
"; // region containing the Amazon Location resource const placeIndex = "PlaceIndexName
" // Name of your places resource in your AWS Account. // Create an authentication helper instance using credentials from Amazon Cognito const authHelper = await withIdentityPoolId("Identity Pool ID
"); const client = new LocationClient({ region: "Region
", // Region containing Amazon Location resources ...authHelper.getLocationClientConfig(), // Configures the client to use credentials obtained via Amazon Cognito }); // Render the map const map = new maplibregl.Map({ container: "map", center: [-123.115898, 49.295868], zoom: 10, style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor`, ...authHelper.getMapAuthenticationOptions(), }); // Gets an instance of the AmazonLocationMaplibreGeocoder Object. const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, placeIndex, {enableAll: true}); // Now we can add the Geocoder to the map. map.addControl(amazonLocationMaplibreGeocoder.getPlacesGeocoder());- ブラウザでの使用
-
この例では、Amazon Location Client を使用して、Amazon Cognito を使用して認証するリクエストを行います。
注記
これらの例の一部では、Amazon Location Client を使用しています。Amazon Location Client は AWS SDK for JavaScript V3
に基づいており、HTML ファイルで参照されるスクリプトを使用して Amazon Location を呼び出すことができます。 HTML ファイルに以下を含めます。
< Import the Amazon Location With Maplibre Geocoder> <script src="https://www.unpkg.com/@aws/amazon-location-with-maplibre-geocoder@1"></script> <Import the Amazon Location Client> <script src="https://www.unpkg.com/@aws/amazon-location-client@1"></script> <!Import the utility library> <script src="https://www.unpkg.com/@aws/amazon-location-utilities-auth-helper@1"></script>
ファイルに以下を含めます JavaScript 。
const identityPoolId = "
Identity Pool ID
"; const mapName = "Map Name
"; const region = "Region
"; // region containing Amazon Location resource // Create an authentication helper instance using credentials from Amazon Cognito const authHelper = await amazonLocationAuthHelper.withIdentityPoolId(identityPoolId); // Render the map const map = new maplibregl.Map({ container: "map", center: [-123.115898, 49.295868], zoom: 10, style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor`, ...authHelper.getMapAuthenticationOptions(), }); // Initialize the AmazonLocationMaplibreGeocoder object const amazonLocationMaplibreGeocoderObject = amazonLocationMaplibreGeocoder.buildAmazonLocationMaplibreGeocoder(client, placesName, {enableAll: true}); // Use the AmazonLocationWithMaplibreGeocoder object to add a geocoder to the map. map.addControl(amazonLocationMaplibreGeocoderObject.getPlacesGeocoder());
Amazon Location MapLibre ジオコーダープラグインで使用される関数とコマンドを以下に示します。
buildAmazonLocationMaplibreGeocoder
このクラスは、他のすべての呼び出しへのエントリポイント
AmazonLocationMaplibreGeocder
である のインスタンスを作成します。const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, placesIndex, {enableAll: true});
getPlacesGeocoder
マップに直接追加できる、すぐに使用できる IControl オブジェクトを返します。
const geocoder = getPlacesGeocoder(); // Initialize map let map = await initializeMap(); // Add the geocoder to the map. map.addControl(geocoder);