使用 MapLibre GL JS 與亞馬遜 Location Service - Amazon Location Service

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

使用 MapLibre GL JS 與亞馬遜 Location Service

使用 MapLibre GL JS 將客戶端地圖嵌入到 Web 應用程序中。

MapLibre GL JS 是一個開放原始碼程式 JavaScript 庫,與 Amazon 定 Location Service 地圖 API 提供的樣式和圖塊相容。您可以將 MapLibre GL JS 整合到基本 HTML 或應 JavaScript 用程式中,以嵌入可自訂且回應迅速的用戶端地圖。

本教程介紹如何在基本 HTML 和 JavaScript 應用程序中將 MapLibre GL JS 與亞馬遜位置集成。本教程中介紹的相同庫和技術也適用於框架,例如 ReactAngular

本教學課程的範例應用程式可作為上 Amazon 定 Location Service 範例儲存庫的一部分使用GitHub

構建應用程序:腳手架

本教程創建一個 Web 應用程序, JavaScript 用於在 HTML 頁面上構建地圖。

首先創建一個包含地圖容器的 HTML 頁面(index.html):

  • 輸入含有iddiv元素,map將地圖的維度套用至地圖檢視。尺寸會繼承自視埠。

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

構建應用程序:新增相依性

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

  • MapLibre GL JS(1.14.0 或更高版本),及其相關聯的 CSS。

  • AWS 用於 JavaScript.

  • AWS Amplify核心程式庫。

<!-- CSS dependencies --> <link href="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.css" rel="stylesheet" /> <!-- JavaScript dependencies --> <script src="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.js"></script> <script src="https://sdk.amazonaws.com/js/aws-sdk-2.784.0.min.js"></script> <script src="https://unpkg.com/@aws-amplify/core@3.7.0/dist/aws-amplify-core.min.js"></script> <script> // application-specific code </script>

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

構建應用程序:組態

若要使用下列方式設定應用程式 JavaScript:

  1. 輸入資源的名稱和識別碼。

    // Cognito Identity Pool ID const identityPoolId = "us-east-1:54f2ba88-9390-498d-aaa5-0d97fb7ca3bd"; // Amazon Location Service Map name const mapName = "ExampleMap";
  2. 使用您在使用 map-步驟 2,設定驗證中建立的未驗證身分集區實例化認證提供者。

    // extract the Region from the Identity Pool ID; this will be used for both Amazon Cognito and Amazon Location AWS.config.region = identityPoolId.split(":")[0]; // instantiate an Amazon Cognito-backed credential provider const credentials = new AWS.CognitoIdentityCredentials({ IdentityPoolId: identityPoolId, });
  3. 因為這使用了一般AWS SDK 工作流程工作階段之外的認證會在小時後過期。

    以下是會在認證到期前自動更新憑證的函數範例:

    async function refreshCredentials() { await credentials.refreshPromise(); // schedule the next credential refresh when they're about to expire setTimeout(refreshCredentials, credentials.expireTime - new Date()); }

構建應用程序:請求轉換

MapLibre GL JS 映射實例包含一個transformRequest選項,您可以使用該選項在發出請求之前攔截和修改請求。

若AWS要使用簽名版本 4 以及從 Amazon Cognito 取得的登入資料來簽署請求,請輸入以下功能。

// use Signer from @aws-amplify/core const { Signer } = window.aws_amplify_core; /** * Sign requests made by MapLibre GL JS using AWS SigV4. */ function transformRequest(url, resourceType) { if (resourceType === "Style" && !url.includes("://")) { // resolve to an AWS URL url = `https://maps.geo.${AWS.config.region}.amazonaws.com/maps/v0/maps/${url}/style-descriptor`; } if (url.includes("amazonaws.com")) { // only sign AWS requests (with the signature as part of the query string) return { url: Signer.signUrl(url, { access_key: credentials.accessKeyId, secret_key: credentials.secretAccessKey, session_token: credentials.sessionToken, }), }; } // don't sign return { url }; }

構建應用程序:Map 初始化

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

async function initializeMap() { // load credentials and set them up to refresh await credentials.getPromise(); // Initialize the map const map = new maplibregl.Map({ container: "map", center: [-123.1187, 49.2819], // initial map centerpoint zoom: 10, // initial map zoom style: mapName, transformRequest, }); map.addControl(new maplibregl.NavigationControl(), "top-left"); } initializeMap();
注意

您必須在應用程式或文件上為您使用的每個資料提供者提供文字標記或文字歸因。歸因字串包含在sources.esri.attribution和下的樣式描述元回應中sources.here.attribution keys。 MapLibre GL JS 將自動提供歸因。搭配資料供應商使用 Amazon 位置資源時,請務必閱讀服務條款與條件

執行應用程式

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

要使用本地 Web 服務器,您可以使用 npx,因為它是作為 Node.js 的一部分安裝的。您可以在與相同的目錄npx serve中使用index.html。這會在上提供應用程式localhost:5000

注意

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

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

<!-- index.html --> <html> <head> <link href="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.css" rel="stylesheet" /> <style> body { margin: 0; } #map { height: 100vh; } </style> </head> <body> <!-- map container --> <div id="map" /> <!-- JavaScript dependencies --> <script src="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.js"></script> <script src="https://sdk.amazonaws.com/js/aws-sdk-2.784.0.min.js"></script> <script src="https://unpkg.com/@aws-amplify/core@3.7.0/dist/aws-amplify-core.min.js"></script> <script> // use Signer from @aws-amplify/core const { Signer } = window.aws_amplify_core; // configuration const identityPoolId = "us-east-1:54f2ba88-9390-498d-aaa5-0d97fb7ca3bd"; // Cognito Identity Pool ID const mapName = "ExampleMap"; // Amazon Location Service Map Name // extract the region from the Identity Pool ID AWS.config.region = identityPoolId.split(":")[0]; // instantiate a Cognito-backed credential provider const credentials = new AWS.CognitoIdentityCredentials({ IdentityPoolId: identityPoolId, }); /** * Sign requests made by MapLibre GL JS using AWS SigV4. */ function transformRequest(url, resourceType) { if (resourceType === "Style" && !url.includes("://")) { // resolve to an AWS URL url = `https://maps.geo.${AWS.config.region}.amazonaws.com/maps/v0/maps/${url}/style-descriptor`; } if (url.includes("amazonaws.com")) { // only sign AWS requests (with the signature as part of the query string) return { url: Signer.signUrl(url, { access_key: credentials.accessKeyId, secret_key: credentials.secretAccessKey, session_token: credentials.sessionToken, }), }; } // don't sign return { url }; } /** * Initialize a map. */ async function initializeMap() { // load credentials and set them up to refresh await credentials.getPromise(); // Initialize the map const map = new maplibregl.Map({ container: "map", center: [-123.1187, 49.2819], // initial map centerpoint zoom: 10, // initial map zoom style: mapName, transformRequest, }); map.addControl(new maplibregl.NavigationControl(), "top-left"); } initializeMap(); </script> </body> </html>

執行此應用程式會使用您選擇的地圖樣式顯示全螢幕地圖。此範例可在上的 Amazon 定 Location Service 範例儲存庫中取得GitHub