搭配 Amazon Location Service 使用 MapLibre GL JS - Amazon Location Service
鷹架相依性組態映射初始化執行應用程式

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

搭配 Amazon Location Service 使用 MapLibre GL JS

使用 MapLibre GL JS 將用戶端映射內嵌至 Web 應用程式。

MapLibre GL JS 是開放原始碼 JavaScript 程式庫，與 Amazon Location Service Maps 提供的樣式和動態磚相容API。您可以在基本HTML或 JavaScript 應用程式中整合 MapLibre GL JS，以嵌入可自訂和回應的用戶端映射。

本教學課程說明如何將 MapLibre GL JS 與 Amazon Location 整合到基本 HTML和 JavaScript 應用程式中。本教學課程中呈現的相同程式庫和技術也適用於架構，例如 React 和 Angular 。

此教學課程的範例應用程式可作為 Amazon Location Service 範例儲存庫的一部分GitHub。

建置應用程式：鷹架

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

首先建立包含映射容器的HTML頁面 （index.html）：

  • 輸入具有 id的 div 元素，map將地圖的維度套用至地圖檢視。維度會從視埠繼承。

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

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

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

<!-- CSS dependencies -->
<link
  href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css"
  rel="stylesheet"
/>
<!-- JavaScript dependencies -->
<script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/@aws/amazon-location-authentication-helper.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. 使用您在使用地圖 - 步驟 2，設定身分驗證 中建立的未驗證身分集區，來即時化憑證提供者。我們會將此項目放入名為 的函數中initializeMap，該函數也會包含其他映射初始化碼，並在下一個步驟中新增

    // 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];
 
async function initializeMap() {
  // Create an authentication helper instance using credentials from Cognito
  const authHelper = await amazonLocationAuthHelper.withIdentityPoolId(identityPoolId);

  // ... more here, later
}

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

若要讓地圖在頁面載入後顯示，您必須初始化地圖。您可以調整初始映射位置、新增其他控制項和覆蓋資料。

async function initializeMap() {
  // Create an authentication helper instance using credentials from Cognito
  const authHelper = await amazonLocationAuthHelper.withIdentityPoolId(identityPoolId);
 
  // Initialize the map
  const map = new maplibregl.Map({
    container: "map",
    center: [-123.1187, 49.2819], // initial map centerpoint
    zoom: 10, // initial map zoom
    style: 'https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor',
    ...authHelper.getMapAuthenticationOptions(), // authentication, using cognito
  });
 
  map.addControl(new maplibregl.NavigationControl(), "top-left");
}
 
initializeMap();
注意

您必須為應用程式或文件上使用的每個資料提供者提供文字標記或文字屬性。屬性字串包含在 sources.esri.attribution、 sources.here.attribution和 sources.grabmaptiles.attribution金鑰下的樣式描述符回應中。 MapLibre GL JS 會自動提供屬性。將 Amazon Location 資源與資料提供者 搭配使用時，請務必閱讀服務條款與條件 。

執行應用程式

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

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

注意

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

完成教學課程後，最終應用程式看起來如下所示。

<!-- index.html -->
<html>
  <head>
    <link href="https://unpkg.com/maplibre-gl@3.x/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@3.x/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/@aws/amazon-location-authentication-helper.js"></script>
    <script>
      // 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
      const region = identityPoolId.split(":")[0];

      async function initializeMap() {
        // Create an authentication helper instance using credentials from Cognito
        const authHelper = await amazonLocationAuthHelper.withIdentityPoolId(identityPoolId);

        // Initialize 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(),
        });
        map.addControl(new maplibregl.NavigationControl(), "top-left");
      }

      initializeMap();
    </script>
  </body>
</html>

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