使用 MapLibre GL JS
MapLibre GL JS 是一个开源 JavaScript 库,与 Amazon Location Service 地图 API 提供的样式和图块兼容。您可以将 MapLibre GL JS 集成到基本的 HTML 或 JavaScript 应用程序中,以嵌入可自定义和响应式的客户端地图。
本教程介绍如何在基本的 HTML 和 JavaScript 应用程序中将 MapLibre GL JS 与 Amazon Location 集成。本教程中介绍的相同库和技术也适用于框架,例如 React
本教程的示例应用程序已作为 GitHub
构建应用程序:支架
本教程创建了一个使用 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>
构建应用程序:添加依赖项
将以下依赖项添加到您的应用程序:
-
MapLibre GL JS (v3.x) 及其相关的 CSS。
-
Amazon Location Javascript 身份验证帮助程序。
<!-- 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 配置应用程序:
-
输入资源的名称和标识符。
// Cognito Identity Pool ID const identityPoolId = "
us-east-1:54f2ba88-9390-498d-aaa5-0d97fb7ca3bd
"; // Amazon Location Service Map name const mapName = "ExampleMap
"; -
使用您在使用地图 – 步骤 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();
注意
运行应用程序
您可以通过在本地 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