搭配 Amazon Location 使用 MapLibre 工具和程式庫 - Amazon Location Service

本文為英文版的機器翻譯版本,如內容有任何歧義或不一致之處,概以英文版為準。

搭配 Amazon Location 使用 MapLibre 工具和程式庫

使用 Amazon Location 建立互動式應用程式的重要工具之一是 MapLibre。MapLibre 主要是在 Web 或行動應用程式中顯示地圖的轉譯引擎。不過,它還包括對外掛程式的支援,並提供使用 Amazon Location 其他方面的功能。以下說明您可以根據要使用的位置區域使用的工具。

注意

若要使用 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/

  • 放置搜尋

    若要更輕鬆地建立搜尋使用者介面,您可以使用 Web 的MapLibre 地理編碼器 (Android 應用程式可以使用 Android Places 外掛程式 )。

    使用 Amazon Location for Maplibre 地理編碼器程式庫,簡化amazon-location-for-maplibre-gl-geocoder在 JavaScript應用程式中將 Amazon Location 與 搭配使用的程序。

  • 路由

    若要在地圖上顯示路由,請使用MapLibre方向

  • Geofences 和追蹤器

    MapLibre 沒有任何特定渲染或用於地理和追蹤的工具,但您可以使用渲染功能和外掛程式在地圖上顯示地理和追蹤的裝置。

    追蹤的裝置可以使用MQTT或手動將更新傳送至 Amazon Location Service。可以使用 回應 Geofence 事件AWS Lambda

許多開放原始碼程式庫可用於為 Amazon Location Service 提供額外的功能,例如提供空間分析功能的 Turf

許多程式庫使用開放的標準地理JSON格式資料。Amazon Location Service 提供程式庫,以支援在 JavaScript 應用程式中使用 GeoJSON。如需詳細資訊,請參閱下一節「如何使用 Amazon Location SDK和程式庫」。

Amazon Location MapLibre Geocoder 外掛程式

Amazon Location MapLibre 地理編碼器外掛程式的設計可讓您在使用程式maplibre-gl-geocoder庫進行地圖轉譯和地理編碼時,更輕鬆地將 Amazon Location 功能整合到您的 JavaScript 應用程式中。

安裝

您可以使用此命令從 安裝 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 Identity Pool 使用身分驗證來存取 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);