将 MapLibre GL JS 与 Amazon Location Service 配合使用 - Amazon Location Service
支架依赖项配置地图初始化运行该应用程序

将 MapLibre GL JS 与 Amazon Location Service 配合使用

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

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

本教程介绍如何在基本的 HTML 和 JavaScript 应用程序中将 MapLibre GL JS 与 Amazon Location 集成。本教程中介绍的相同库和技术也适用于框架，例如 React 和 Angular。

本教程的示例应用程序已作为 GitHub 上的 Amazon Location Service 示例存储库的一部分提供。

构建应用程序：支架

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

首先创建一个包含地图容器的 HTML 页面 (index.html)：

  • 输入带有 id 为 map 的 div 元素，将地图的尺寸应用于地图视图。尺寸继承自视区。

<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 的一部分安装的。您可以在与 index.html 相同的目录中使用 npx serve。这在 localhost:5000 上为应用程序提供服务。

注意

如果您为未经身份验证的 Amazon Cognito 角色创建的策略包含 referer 条件，则可能会阻止您使用 localhost: URL 进行测试。在这种情况下。您可以使用提供策略中的 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>

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