在 Amazon MapLibre Location Service 中使用 GL JS - Amazon Location Service

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

在 Amazon MapLibre Location Service 中使用 GL JS

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

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

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

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

构建应用程序:支架

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

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

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