将 MapLibre 工具和库与 Amazon Location 配合使用 - Amazon Location Service
Amazon Location MapLibre 地理编码器插件

将 MapLibre 工具和库与 Amazon Location 配合使用

使用 Amazon Location 创建交互式应用程序的重要工具之一是 MapLibre。MapLibre 主要是一个用于在 Web 或移动应用程序中显示地图的渲染引擎。但是，它还包括对插件的支持，并提供处理 Amazon Location 其他方面的功能。以下内容根据您要使用的位置区域描述了您可以使用的工具。

注意

要使用 Amazon Location 的任何功能，请为您要使用的语言安装 AWS SDK。

  • 映射

    要在应用程序中显示地图，您需要一个地图渲染引擎，该引擎将使用 Amazon Location 提供的数据并绘制到屏幕上。地图渲染引擎还提供平移和缩放地图，或者向地图添加标记、图钉和其他注释的功能。

    Amazon Location Service 建议使用 MapLibre 渲染引擎渲染地图。MapLibre GL JS 是一款用于在 JavaScript 中显示地图的引擎，而 MapLibre Native 则为 iOS 或 Android 提供地图。

    MapLibre 还具有用于扩展核心功能的插件生态系统。有关更多信息，请访问 https://maplibre.org/maplibre-gl-js-docs/plugins/。

  • 位置搜索

    为了简化搜索用户界面的创建，您可以使用网页版 MapLibre 地理编码器（Android 应用程序可以使用 Android Places 插件）。

    使用 Amazon Location for Maplibre 地理编码器库可简化在 JavaScript 应用程序中将 Amazon Location 与 amazon-location-for-maplibre-gl-geocoder 配合使用的过程。

  • 路线

    要在地图上显示路线，请使用 MapLibre Directions。

  • 地理围栏和跟踪器

    MapLibre 没有任何用于地理围栏和跟踪的特定渲染或工具，但您可以使用渲染功能和插件在地图上显示地理围栏和被跟踪的设备。

    被跟踪的设备可以使用 MQTT 或手动向 Amazon Location Service 发送更新。可以使用 AWS Lambda 对地理围栏事件进行响应。

许多开源库可用于为 Amazon Location Service 提供其他功能，例如提供空间分析功能的 Turf。

许多库都使用开放标准 GeoJSON 格式的数据。Amazon Location Service 提供了一个库，支持在 JavaScript 应用程序中使用 GeoJSON。有关更多信息，请参阅下一节：如何使用 Amazon Location SDK 和库。

Amazon Location MapLibre 地理编码器插件

借助 Amazon Location MapLibre 地理编码器插件，您能够在使用 maplibre-gl-geocoder 库进行地图渲染和地理编码时，更轻松地将 Amazon Location 功能整合到 JavaScript 应用程序中。

安装

您可以使用以下命令从 NPM 安装 Amazon Location MapLibre 地理编码器插件，以便与模块一起使用：

npm install @aws/amazon-location-for-maplibre-gl-geocoder

您可以使用脚本导入到 HTML 文件中，以便直接在浏览器中使用：

<script src="https://www.unpkg.com/@aws/amazon-location-for-maplibre-gl-geocoder@1">/script<
与模块配合使用

此代码使用 Amazon Location 地理编码功能设置 Maplibre GL JavaScript 地图。它通过 Amazon Cognito 身份池使用身份验证来访问 Amazon Location 资源。地图使用指定的样式和中心坐标进行渲染，并且允许在地图上搜索位置。

// Import MapLibre GL JS
import maplibregl from "maplibre-gl";
// Import from the AWS JavaScript SDK V3
import { LocationClient } from "@aws-sdk/client-location";
// Import the utility functions
import { withIdentityPoolId } from "@aws/amazon-location-utilities-auth-helper";
// Import the AmazonLocationWithMaplibreGeocoder
import { buildAmazonLocationMaplibreGeocoder, AmazonLocationMaplibreGeocoder } from "@aws/amazon-location-for-maplibre-gl-geocoder"

const identityPoolId = "Identity Pool ID";
const mapName = "Map Name";
const region = "Region"; // region containing the Amazon Location resource
const placeIndex = "PlaceIndexName" // Name of your places resource in your AWS Account. 

// Create an authentication helper instance using credentials from Amazon Cognito
const authHelper = await withIdentityPoolId("Identity Pool ID");

const client = new LocationClient({
  region: "Region", // Region containing Amazon Location resources
  ...authHelper.getLocationClientConfig(), // Configures the client to use credentials obtained via Amazon Cognito
});

// Render 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(),
});

// Gets an instance of the AmazonLocationMaplibreGeocoder Object. 
const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, placeIndex, {enableAll: true});
    
// Now we can add the Geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoder.getPlacesGeocoder());
与浏览器配合使用

此示例使用 Amazon Location 客户端发出通过 Amazon Cognito 进行身份验证的请求。

注意

其中一些示例使用 Amazon Location 客户端。Amazon Location 客户端基于 AWS SDK for JavaScript V3，允许通过 HTML 文件中引用的脚本调用 Amazon Location。

在 HTML 文件中包含以下内容：

< Import the Amazon Location With Maplibre Geocoder>
<script src="https://www.unpkg.com/@aws/amazon-location-with-maplibre-geocoder@1"></script>
<Import the Amazon Location Client>
<script src="https://www.unpkg.com/@aws/amazon-location-client@1"></script>
<!Import the utility library>
<script src="https://www.unpkg.com/@aws/amazon-location-utilities-auth-helper@1"></script>

在 JavaScript 文件中包含以下内容：


const identityPoolId = "Identity Pool ID";
const mapName = "Map Name";
const region = "Region"; // region containing Amazon Location resource

// Create an authentication helper instance using credentials from Amazon Cognito
const authHelper = await amazonLocationAuthHelper.withIdentityPoolId(identityPoolId);

// Render 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(),
});

// Initialize the AmazonLocationMaplibreGeocoder object
const amazonLocationMaplibreGeocoderObject = amazonLocationMaplibreGeocoder.buildAmazonLocationMaplibreGeocoder(client, placesName, {enableAll: true});

// Use the AmazonLocationWithMaplibreGeocoder object to add a geocoder to the map. 
map.addControl(amazonLocationMaplibreGeocoderObject.getPlacesGeocoder());

下面列出了 Amazon Location MapLibre 地理编码器插件中使用的函数和命令：

  • buildAmazonLocationMaplibreGeocoder

    该类创建 AmazonLocationMaplibreGeocder 的一个实例，该实例是其他所有调用的入口点：

    const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, placesIndex, {enableAll: true});

  • getPlacesGeocoder

    返回可以直接添加到地图中的即用型 IControl 对象。

    const geocoder = getPlacesGeocoder();

// Initialize map
let map = await initializeMap();

// Add the geocoder to the map. 
map.addControl(geocoder);