本文為英文版的機器翻譯版本,如內容有任何歧義或不一致之處,概以英文版為準。
搭配 Amazon Location 使用 MapLibre 工具和程式庫
使用 Amazon Location 建立互動式應用程式的重要工具之一是 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/
。 -
放置搜尋
若要更輕鬆地建立搜尋使用者介面,您可以使用 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 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 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);