选择您的 Cookie 首选项

我们使用必要 Cookie 和类似工具提供我们的网站和服务。我们使用性能 Cookie 收集匿名统计数据,以便我们可以了解客户如何使用我们的网站并进行改进。必要 Cookie 无法停用,但您可以单击“自定义”或“拒绝”来拒绝性能 Cookie。

如果您同意,AWS 和经批准的第三方还将使用 Cookie 提供有用的网站功能、记住您的首选项并显示相关内容,包括相关广告。要接受或拒绝所有非必要 Cookie,请单击“接受”或“拒绝”。要做出更详细的选择,请单击“自定义”。

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

聚焦模式

本页内容

将 MapLibre GL JS 与 Amazon Location Service 配合使用 - 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 集成。本教程中介绍的相同库和技术也适用于框架,例如 ReactAngular

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

构建应用程序:支架

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

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

  • 输入带有 idmapdiv 元素,将地图的尺寸应用于地图视图。尺寸继承自视区。

<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.attributionsources.here.attributionsources.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 示例存储库中找到。

隐私网站条款Cookie 首选项
© 2025, Amazon Web Services, Inc. 或其附属公司。保留所有权利。