将 MapLibre GL JS 与亚马逊Location Service 配合使用 - Amazon Location Service
脚手架附属物配置请求转换地图初始化地图运行应用程序

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

将 MapLibre GL JS 与亚马逊Location Service 配合使用

使用 MapLibre GL JS 将客户端地图嵌入到 Web 应用程序中。

MapLibre GL JS 是一个开源 JavaScript 库，与亚马逊Location Service 地图 API 提供的样式和图块兼容。您可以将 MapLibre GL JS 集成到基本 HTML 或 JavaScript 应用程序中，以嵌入可自定义的响应式客户端地图。

本教程介绍如何在基本 HTM MapLibre L 和 JavaScript 应用程序中将 GL JS 与亚马逊位置集成。本教程中介绍的相同库和技术也适用于框架，例如 React 和 Angular。

本教程的示例应用程序作为亚马逊Location Service 示例存储库的一部分提供GitHub。

构建应用程序：脚手架

本教程创建了一个用于 JavaScript 在 HTML 页面上构建地图的 Web 应用程序。

首先创建一个包含地图容器的 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>

构建应用程序：添加依赖关系

将以下依赖项添加到您的应用程序：

  • MapLibre GL JS（v1.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. 使用您在使用地图-步骤 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选项，您可以使用该选项在请求发出之前对其进行拦截和修改。

要使用签名版本 4 使用从 Amazon Cognito 获得的证书签署AWS请求，请输入以下函数。

// 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 };
}

构建应用程序：地图初始化

要在加载页面后显示地图，必须初始化地图。您可以调整初始地图位置、添加其他控件和叠加数据。

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和sources.grabmaptiles.attribution键下的样式描述符响应中。 MapLibre GL JS 将自动提供归因。在数据提供商处使用 Amazon Location 资源时，请务必阅读服务条款和条件。

运行应用程序

您可以通过在本地 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>

运行此应用程序会使用您选择的地图样式显示全屏地图。此示例可在亚马逊Location Service 示例存储库中找到GitHub。