在 Amazon Location 中使用 MapLibre 工具和库

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

注意

要使用 Amazon Location Location 的任何方面，请为您要使用的语言安装AWS 开发工具包。

• 映射

  要在应用程序中显示地图，您需要一个地图渲染引擎，该引擎将使用 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 Plac es 插件）。

  使用 Maplibre 的亚马逊位置地理编码器库来简化在应用程序中使用亚马逊位置信息的过程。amazon-location-for-maplibre-gl-geocoder JavaScript

• 路线

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

• 地理围栏和跟踪器

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

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

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

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

Amazon 位置 MapLibre 地理编码器插件

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

安装

您可以使用以下命令从 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<

与模块一起使用

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

// 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 Cognito 进行身份验证的请求。

注意

其中一些示例使用 Amazon 定位客户端。亚马逊定位客户端基于AWS 适用于 JavaScript V3 的软件开发工具包，允许通过 HTML 文件中引用的脚本调用亚马逊位置。

在 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);