建立 Web 應用程式 - Amazon Location Service

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

建立 Web 應用程式

在本節中,您將創建一個具有地圖和位置搜索功能的靜態網頁。在繼續操作之前,請確保您已經創建了亞馬遜位置資源併為您的應用程序創建了 Amazon Cognito 身份,如Amazon Location Service 快速入門主題。

為您的應用程序創建 HTML

在本教程中,您將創建嵌入地圖的靜態 HTML 頁面,並允許用户查找地圖上某個位置的內容。該應用程序將包含三個文件:網頁的 HTML 文件和 CSS 文件,以及 JavaScript (.js) 文件,用於創建地圖並響應用户交互和地圖事件的代碼。

首先,讓我們創建將用於應用程序的 HTML 和 CSS 框架。這將是一個簡單的頁面,其中包含<div>元素來保存地圖容器和一個<pre>元素來顯示 JSON 對查詢的響應。

為快速入門應用程序創建 HTML

  1. 建立名為的新檔案quickstart.html

  2. 在您選擇的文本編輯器或環境中編輯文件。將以下 HTML 新增至檔案。

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Quick start tutorial</title> <!-- Styles --> <link href="main.css" rel="stylesheet" /> </head> <body> <header> <h1>Quick start tutorial</h1> </header> <main> <div id="map"></div> <aside> <h2>JSON Response</h2> <pre id="response"></pre> </aside> </main> <footer>This is a simple Amazon Location Service app. Pan and zoom. Click to see details about entities close to a point.</footer> </body> </html>

    這個 HTML 有一個指向你將在下一步中創建的 CSS 文件的指針,一些應用程序的佔位符元素,以及一些解釋性文本。

    您將在本教學課程中使用兩個佔位符元素。第一個是<div id="map>元素,該元素將保存地圖控件。第二個方法是<pre id="response">元素,該元素將顯示在地圖上搜索的結果。

  3. 儲存您的檔案。

現在為網頁添加 CSS。這將設置應用程序的文本和佔位符元素的樣式。

為快速入門應用程序創建 CSS

  1. 建立名為的新檔案main.css(與上一個程序中建立的 quickstart.html 檔案相同的文件夾)。

  2. 在您想要使用的任何編輯器中編輯檔案。將以下文字新增至檔案。

    * { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } body { margin: 0; } header { background: #000000; padding: 0.5rem; } h1 { margin: 0; text-align: center; font-size: 1.5rem; color: #ffffff; } main { display: flex; min-height: calc(100vh - 94px); } #map { flex: 1; } aside { overflow-y: auto; flex: 0 0 30%; max-height: calc(100vh - 94px); box-shadow: 0 1px 1px 0 #001c244d, 1px 1px 1px 0 #001c2426, -1px 1px 1px 0 #001c2426; background: #f9f9f9; padding: 1rem; } h2 { margin: 0; } pre { white-space: pre-wrap; font-family: monospace; color: #16191f; } footer { background: #000000; padding: 1rem; color: #ffffff; }

    這將地圖設置為填充其他任何東西沒有使用的空間,將我們的響應區域設置為佔應用寬度的 30%,併為標題和解釋性文本設置顏色和樣式。

  3. 儲存檔案。

  4. 您現在可以在quickstart.html文件以查看應用程序的佈局。

接下來,將地圖控件添加到應用程序。

將交互式地圖添加到應用程序

既然你有一個框架和一個 div 佔位符,你可以將映射控件添加到你的應用程序。本教學課程使用MapLibre GL JS作為地圖控件,從亞馬遜 Location Service 獲取數據。您還將使用來自Amplify庫,以便使用亞馬遜 Cognito 簽署對亞馬遜位置 API 的調用。

將交互式地圖新增至應用程式

  1. 開啟quickstart.html檔案。

  2. 添加對所需庫和要創建的腳本文件的引用。您需要進行的更改顯示在green

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Quick start tutorial</title> <!-- Styles --> <link href="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.css" rel="stylesheet" /> <link href="main.css" rel="stylesheet" /> </head> <body> ... <footer>This is a simple Amazon Location Service app. Pan and zoom. Click to see details about entities close to a point.</footer> <!-- 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.1030.0.min.js"></script> <script src="https://unpkg.com/@aws-amplify/core@3.7.0/dist/aws-amplify-core.min.js"></script> <!-- JavaScript for the app --> <script src="main.js"></script> </body> </html>

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

    • MapLibre GL JS。此庫和樣式表包含一個地圖控件,用於顯示地圖切片並且包括交互性(如平移和縮放)。此控件還允許擴展,例如在地圖上繪製自己的要素。

    • AWS開發套件第 2 版。作為整體的一部分AWS功能,這為獲取地圖數據和搜索地圖上的位置所需的 Amazon 位置功能提供界面。

    • AWS Amplify。 Amplify 提供了許多有用的函數來處理AWS,包括亞馬遜地點。在這種情況下,我們將使用它進行簽名,為AWS開發套件。

    此步驟還添加了對main.js,您將在接下來創建。

    注意

    最好使用最新版本的AWSSDK(和其他 SDK),並使其保持最新狀態。這為您提供了最新的功能和功能以及安全更新。要查找最新版本的AWS軟件開發工具包,請參閲瀏覽器安裝主題AWS適用於 JavaScript 的軟體開發套件

  3. 儲存 quickstart.html 檔案。

  4. 建立名為的新檔案main.js與 HTML 和 CSS 文件相同的文件夾中,然後打開它進行編輯。

  5. 將以下腳本新增至檔案。中的文字red應替換為您之前創建的 Amazon Cognito ARN、地圖資源名稱和地方資源名稱。

    // Use Signer from @aws-amplify/core const { Signer } = window.aws_amplify_core; // AWS Resources // Cognito: const identityPoolId = "region:sample12-3456-abcd-7890-ef1234567890"; // Amazon Location Service resource names: const mapName = "explore.map"; const placesName = "explore.place"; // 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")) { // 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, }), }; } // If not amazonaws.com, falls to here without signing return { url }; } // Initialize a map async function initializeMap() { // Load credentials and set them up to refresh await credentials.getPromise(); // Initialize the map const mlglMap = new maplibregl.Map({ container: "map", // HTML element ID of map element center: [-77.03674, 38.891602], // Initial map centerpoint zoom: 16, // Initial map zoom style: mapName, transformRequest, }); // Add navigation control to the top left of the map mlglMap.addControl(new maplibregl.NavigationControl(), "top-left"); return mlglMap; } async function main() { // Initialize map and AWS SDK for Location Service: const map = await initializeMap(); } main();

    此代碼設置AWS和亞馬遜位置資源,然後配置 MapLibre GL JS 使用 Amplify 輔助函數來簽署請求AWS。最後,它會初始化地圖控件並將其放置在<div>元素的 IDmap

    此文件的前半部分設置了使用您的 Amazon Cognito 憑證來簽署亞馬遜地點的請求。此代碼可能與您創建的大多數應用程序類似。所以此initializeMap()函數對於理解非常重要。它建立新 MapLibre GL 地圖控件(稱為mlglMap本地,但稱為map),用於在應用程序中渲染地圖。

    // Initialize the map const mlglMap = new maplibregl.Map({ container: "map", // HTML element ID of map element center: [-77.03674, 38.891602], // Initial map centerpoint zoom: 16, // Initial map zoom style: mapName, transformRequest, });

    建立新 MapLibre GL 映射控件時,傳遞的參數表示映射控件的初始狀態。在這裏,我們設定下列參數。

    • HTML 容器,它使用我們的 HTML 中的映射 div 元素。

    • 地圖的初始中心位於華盛頓特區的某個點。

    • 縮放級別為 16(縮放到鄰域或塊級別)。

    • 用於地圖的樣式(地圖資源的名稱)。

    • 您也可以將指標傳入transformRequest函數,該函數使用 Amazon Cognito 對地圖控件代表您進行的任何 API 調用進行簽名。

  6. 儲存您的 JavaScript 文件,然後使用瀏覽器打開它。現在,頁面上有一個地圖,您可以在其中使用平移和縮放操作。

    注意

    您可以使用此應用程式來查看 MapLibre 映射控件的行為。您可以在使用拖動操作時嘗試使用 Ctrl 或 Shift,以查看與地圖進行交互的其他方式。所有這些功能都是可自定義的。

您的應用程序即將完成。在下一節中,您將處理選擇地圖上的位置,並顯示所選位置的地址。您還將在頁面上顯示生成的 JSON,以查看完整的結果。

您的應用程序的最後一步是在地圖上添加搜索。在這種情況下,您將添加反向地理編碼搜索,以便在某個位置查找項目。

注意

亞馬遜 Location Service 還提供按名稱或地址進行搜索的功能,以查找地圖上的位置。

向應用程序添加搜索功能

  1. 開啟main.js檔案。

  2. 修改main函數,如圖所示。您需要進行的更改顯示在green

    async function main() { // Initialize map and AWS SDK for Location Service: const map = await initializeMap(); const location = new AWS.Location({credentials, region: AWS.config.region}); // On mouse click, get results: map.on("click", function(e) { // Set up parameters for search call let params = { IndexName: placesName, Position: [e.lngLat.lng, e.lngLat.lat], Language: "en", MaxResults: "5" }; // Search for results around clicked point location.searchPlaceIndexForPosition(params, function(err, data) { if (err) { // Alert user about an error alert("There was an error searching."); // Write JSON response error to HTML document.querySelector("#response").textContent = JSON.stringify(err, undefined, 2); } else { // Write JSON response data to HTML document.querySelector("#response").textContent = JSON.stringify(data, undefined, 2); // Display place label in an alert box alert(data.Results[0].Place.Label); } }); }); }

    此代碼首先創建一個AWS位置對象,使用您之前設置的 Amazon Cognito 憑據和您正在使用的區域。

    const location = new AWS.Location({credentials, region: AWS.config.region});

    接下來,代碼響應用户在地圖控件上選擇某個位置。它通過捕獲 MapLibre GL 提供的事件click

    map.on("click", function(e) { ... });

    所以此 MapLibre GLclick事件提供的參數包括用户選擇的緯度和經度(e.lngLat。在click事件時,代碼會調用搜索放置位置操作,以查找給定緯度和經度處的實體。

    // Set up parameters for search call let params = { IndexName: placesName, Position: [e.lngLat.lng, e.lngLat.lat], Language: "en", MaxResults: "5" }; // Search for results around clicked point location.searchPlaceIndexForPosition(params, function(err, data) { ... });

    在這裏,IndexName是您之前創建的「位置索引」資源的名稱,Position是要搜尋的經緯度Language是結果的首選語言,MaxResults告訴亞馬遜地點最多僅返回五個結果。

    其餘代碼會檢查錯誤,然後在<pre>元素名為response,並在警報框中顯示頂部結果。

  3. (可選)如果保存並打開quickstart.html文件,選擇地圖上的位置將顯示您所選地點的名稱或地址。

  4. 應用程序的最後一步是使用 MapLibre 功能在用户選擇的位置添加標記。修改main函數,如下所示。您需要進行的更改顯示在green

    async function main() { // Initialize map and AWS SDK for Location Service: const map = await initializeMap(); const location = new AWS.Location({credentials, region: AWS.config.region}); // Variable to hold marker that will be rendered on click let marker; // On mouse click, display marker and get results: map.on("click", function(e) { // Remove any existing marker if(marker) { marker.remove(); } // Render a marker on clicked point marker = new maplibregl.Marker() .setLngLat([e.lngLat.lng, e.lngLat.lat]) .addTo(map); // Set up parameters for search call let params = { IndexName: placesName, Position: [e.lngLat.lng, e.lngLat.lat], Language: "en", MaxResults: "5" }; // Search for results around clicked point location.searchPlaceIndexForPosition(params, function(err, data) { ...

    此代碼聲明marker變量,用户每次選擇一個位置時都會填充該變量,顯示他們選擇的位置。將標記添加到地圖中後,地圖控件會自動渲染標記.addTo(map);。代碼還會檢查以前的標記,並將其刪除,以便一次屏幕上只有 1 個標記。

  5. 儲存main.js檔案,然後打開quickstart.html文件在瀏覽器中。您可以像以前一樣在地圖上平移和縮放,但現在如果選擇了位置,您將看到有關所選位置的詳細信息。

您的快速入門應用程序已完成。本教學課程向您展示瞭如何建立靜態 HTML 應用程式:

  • 建立用户可以與之交互的地圖。

  • 處理地圖事件 (click

  • 調用亞馬遜 Location Service API,特別是在某個位置搜索地圖,使用searchPlaceIndexForPosition

  • 使用 MapLibre 地圖控件添加標記。

查看最終應用程序

本節包含此應用程序的最終源代碼。您也可以在這裏找到最終項目GitHub 上的

Overview

選擇每個選項卡以查看本快速入門教程中文件的最終源代碼。

這些文件包括:

  • quickstart.html― 應用程序的框架,包括地圖和搜索結果的 HTML 元素持有者。

  • main.css— 應用程式的樣式表。

  • main.js— 應用程序的腳本,用於驗證用户身份、創建地圖以及在click事件。

quickstart.html

快速入門應用程序的 HTML 框架。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Quick start tutorial</title> <!-- Styles --> <link href="https://unpkg.com/maplibre-gl@1.14.0/dist/maplibre-gl.css" rel="stylesheet" /> <link href="main.css" rel="stylesheet" /> </head> <body> <header> <h1>Quick start tutorial</h1> </header> <main> <div id="map"></div> <aside> <h2>JSON Response</h2> <pre id="response"></pre> </aside> </main> <footer>This is a simple Amazon Location Service app. Pan and zoom. Click to see details about entities close to a point.</footer> <!-- 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.1030.0.min.js"></script> <script src="https://unpkg.com/@aws-amplify/core@3.7.0/dist/aws-amplify-core.min.js"></script> <!-- JavaScript for the app --> <script src="main.js"></script> </body> </html>
main.css

快速入門應用程序的樣式表。

* { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } body { margin: 0; } header { background: #000000; padding: 0.5rem; } h1 { margin: 0; text-align: center; font-size: 1.5rem; color: #ffffff; } main { display: flex; min-height: calc(100vh - 94px); } #map { flex: 1; } aside { overflow-y: auto; flex: 0 0 30%; max-height: calc(100vh - 94px); box-shadow: 0 1px 1px 0 #001c244d, 1px 1px 1px 0 #001c2426, -1px 1px 1px 0 #001c2426; background: #f9f9f9; padding: 1rem; } h2 { margin: 0; } pre { white-space: pre-wrap; font-family: monospace; color: #16191f; } footer { background: #000000; padding: 1rem; color: #ffffff; }
main.js

快速入門應用程序的代碼。中的文字red應替換為相應的 Amazon Cognito 或亞馬遜位置對象名稱。

// Use Signer from @aws-amplify/core const { Signer } = window.aws_amplify_core; // AWS Resources // Cognito: const identityPoolId = "region:sample12-3456-abcd-7890-ef1234567890"; // Amazon Location Service resource names: const mapName = "explore.map"; const placesName = "explore.place"; // 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")) { // 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, }), }; } // If not amazonaws.com, falls to here without signing return { url }; } // Initialize a map async function initializeMap() { // Load credentials and set them up to refresh await credentials.getPromise(); // Initialize the map const mlglMap = new maplibregl.Map({ container: "map", // HTML element ID of map element center: [-77.03674, 38.891602], // Initial map centerpoint zoom: 16, // Initial map zoom style: mapName, transformRequest, }); // Add navigation control to the top left of the map mlglMap.addControl(new maplibregl.NavigationControl(), "top-left"); return mlglMap; } async function main() { // Initialize map and AWS SDK for Location Service: const map = await initializeMap(); const location = new AWS.Location({credentials, region: AWS.config.region}); // Variable to hold marker that will be rendered on click let marker; // On mouse click, display marker and get results: map.on("click", function(e) { // Remove any existing marker if(marker) { marker.remove(); } // Render a marker on clicked point marker = new maplibregl.Marker() .setLngLat([e.lngLat.lng, e.lngLat.lat]) .addTo(map); // Set up parameters for search call let params = { IndexName: placesName, Position: [e.lngLat.lng, e.lngLat.lat], Language: "en", MaxResults: "5" }; // Search for results around clicked point location.searchPlaceIndexForPosition(params, function(err, data) { if (err) { // Write JSON response error to HTML document.querySelector("#response").textContent = JSON.stringify(err, undefined, 2); // Display error in an alert box alert("There was an error searching."); } else { // Write JSON response data to HTML document.querySelector("#response").textContent = JSON.stringify(data, undefined, 2); // Display place label in an alert box alert(data.Results[0].Place.Label); } }); }); } main();

後續步驟

您已完成快速入門教程,應該瞭解如何使用亞馬遜 Location Service 構建應用程序。要利用亞馬遜位置獲得更多信息,您可以查看以下資源: