使用 Amplify Location Service - Amazon Location Service

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

使用 Amplify Location Service

以下教學會逐步解說如何使用AWS Amplify與 Amazon Location。Amplify 使用 MapLibre GL JS 渲染你的地圖 JavaScript基於的應用程式。

Amplify 是一組開放原始碼用戶端程式庫,可為不同類別的服務提供介面,包括由 Amazon 定 Location Service 提供支援的 Amplify Geo。進一步了解AWS Amplify地理 JavaScript 圖書館

注意

此教學假設您已執行中的步驟使用地圖-將地圖添加到您的應用程序

建置應用程式:腳手架

本教學課程會建立使用的 Web 應用程式 JavaScript 在 HTML 頁面上建立地圖。

通過創建一個 HTML 頁面開始(index.html),其中包括地圖的容器:

  • 輸入div元素與idmap以將地圖的維度套用至地圖檢視。尺寸從檢視區繼承而來。

<html> <head> <style> body { margin: 0; } #map { height: 100vh; } /* 100% of viewport height */ </style> </head> <body> <!-- map container --> <div id="map" /> </body> </html>

建置應用程式:新增相依性

將下列依存項目新增至您的應用程式:

  • AWS Amplify地圖和地理資源庫。

  • AWS Amplify核心程式庫。

  • AWS Amplify驗證程式庫。

  • AWS Amplify樣式表。

<!-- CSS dependencies --> <link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" integrity="sha384-DrPVD9GufrxGb7kWwRv0CywpXTmfvbKOZ5i5pN7urmIThew0zXKTME+gutUgtpeD" crossorigin="anonymous" referrerpolicy="no-referrer"></link> <!-- JavaScript dependencies --> <script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" integrity="sha384-rwYfkmAOpciZS2bDuwZ/Xa/Gog6jXem8D/whm3wnsZSVFemDDlprcUXHnDDUcrNU" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" integrity="sha384-7Oh+5w0l7XGyYvSqbKi2Q7SA5K640V5nyW2/LEbevDQEV1HMJqJLA1A00z2hu8fJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" integrity="sha384-jfkXCEfYyVmDXYKlgWNwv54xRaZgk14m7sjeb2jLVBtUXCD2p+WU8YZ2mPZ9Xbdw" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" integrity="sha384-TFMTyWuCbiptXTzvOgzJbV8TPUupG1rA1AVrznAhCSpXTIdGw82bGd8RTk5rr3nP" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-7/RxWonKW1nM9zCKiwU9x6bkQTjldosg0D1vZYm0Zj+K/vUSnA3sOMhlRRWAtHPi" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> // application-specific code </script>

這將創建一個帶有地圖容器的空白頁面。

建置應用程式:組態

若要使用來設定您的應用程式 JavaScript:

  1. 輸入您在其中建立之未驗證身分集區的識別碼使用地圖-步驟 2,設定驗證

    // Cognito Identity Pool ID const identityPoolId = "region:identityPoolID"; // for example: us-east-1:123example-1234-5678 // extract the Region from the Identity Pool ID const region = identityPoolId.split(":")[0];
  2. 設定AWS Amplify以使用您建立的資源,包括身分識別集區和 Map 資源 (此處顯示為預設名稱explore.map

    // Configure Amplify const { Amplify } = aws_amplify_core; const { createMap } = AmplifyMapLibre; Amplify.configure({ Auth: { identityPoolId, region, }, geo: { AmazonLocationService: { maps: { items: { "explore.map": { style: "Default style" }, }, default: "explore.map", }, region, }, } });

建置應用程式:映射初始化

要使地圖在頁面加載後顯示,您必須初始化映射。您可以調整初始地圖位置,添加其他控件和覆蓋數據。

async function initializeMap() { const map = await createMap( { container: "map", center: [-123.1187, 49.2819], zoom: 10, hash: true, } ); map.addControl(new maplibregl.NavigationControl(), "top-left"); } initializeMap();
注意

您必須在應用程式或文件上為您使用的每個資料提供者提供文字標記或文字歸因。歸因字串包含在樣式描述元回應中sources.esri.attributionsources.here.attribution keys。Amplify 會自動提供歸因。使用亞馬遜定位資源時資料提供者,請務必閱讀服務條款和條件

執行應用程式

您可以在本機 Web 伺服器中使用此範例應用程式,或在瀏覽器中開啟此範例應用程式。

要使用本地 Web 服務器,您可以使用 npx,作為 Node.js 的一部分安裝,或者您選擇的任何其他 Web 服務器。若要使用 npx,請鍵入npx serve從與之相同的目錄中index.html。這服務於應用程序localhost:5000

注意

如果您為未經驗證的 Amazon Cognito 角色建立的政策包含referer條件下,您可能會被阻止進行測試localhost:URL 在這種情況下,您可以使用提供策略中 URL 的 Web 服務器進行測試。

完成教學後,最終的應用程式看起來如下列範例。

<html> <head> <!-- CSS dependencies --> <link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" integrity="sha384-DrPVD9GufrxGb7kWwRv0CywpXTmfvbKOZ5i5pN7urmIThew0zXKTME+gutUgtpeD" crossorigin="anonymous" referrerpolicy="no-referrer"></link> <!-- JavaScript dependencies --> <script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" integrity="sha384-rwYfkmAOpciZS2bDuwZ/Xa/Gog6jXem8D/whm3wnsZSVFemDDlprcUXHnDDUcrNU" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" integrity="sha384-7Oh+5w0l7XGyYvSqbKi2Q7SA5K640V5nyW2/LEbevDQEV1HMJqJLA1A00z2hu8fJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" integrity="sha384-jfkXCEfYyVmDXYKlgWNwv54xRaZgk14m7sjeb2jLVBtUXCD2p+WU8YZ2mPZ9Xbdw" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" integrity="sha384-TFMTyWuCbiptXTzvOgzJbV8TPUupG1rA1AVrznAhCSpXTIdGw82bGd8RTk5rr3nP" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-7/RxWonKW1nM9zCKiwU9x6bkQTjldosg0D1vZYm0Zj+K/vUSnA3sOMhlRRWAtHPi" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <style> body { margin: 0; } #map { height: 100vh; } </style> </head> <body> <div id="map" /> <script type="module"> // Cognito Identity Pool ID const identityPoolId = "region:identityPoolId"; // for example: us-east-1:123example-1234-5678 // extract the Region from the Identity Pool ID const region = identityPoolId.split(":")[0]; // Configure Amplify const { Amplify } = aws_amplify_core; const { createMap } = AmplifyMapLibre; Amplify.configure({ Auth: { identityPoolId, region, }, geo: { AmazonLocationService: { maps: { items: { "explore.map": { style: "Default style" }, }, default: "explore.map", }, region, }, } }); async function initializeMap() { const map = await createMap( { container: "map", center: [-123.1187, 49.2819], zoom: 10, hash: true, } ); map.addControl(new maplibregl.NavigationControl(), "top-left"); } initializeMap(); </script> </body> </html>

運行此應用程序顯示使用您選擇的地圖樣式的全屏地圖。此範例也在嵌入地圖中任何地圖資源頁面的標籤Amazon Location Service

完成此教學後,前往顯示映射 (Map)主題AWS Amplify文檔以了解更多信息,包括如何在地圖上顯示標記。