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

# Amazon Location Service 地图
<a name="maps"></a>

![\[Map icon leading to SDK package, then to multiple devices showing maps.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/maps-overview.png)


借助 Amazon Location Service 地图，您可以访问 190 个国家/地区的底图数据，每天更新 500 万次。静态和动态地图功能提供了灵活性，可以满足不同的用户需求，并提供与情境相关的沉浸式地图解决方案。

## 地图优惠
<a name="maps-offering"></a>

Amazon Location Service 提供动态和静态地图。

**动态地图**  
使用 AWS 地图样式，包括标准、单色、混合和卫星。使用地图样式和[MapLibre](https://maplibre.org/)渲染引擎将交互式 AWS 地图添加到您的应用程序中。动态地图支持包括缩放、平移、缓动、飞行、俯仰、旋转和方位等手势。有关更多详细信息，请参阅[动态地图](https://docs.aws.amazon.com/location/latest/developerguide/dynamic-maps.html)。

**静态地图**  
使用静态地图 URLs 在没有地图渲染引擎的情况下将简单的地图图像嵌入网站、报告或电子邮件中。静态地图支持叠加层，包括您的应用程序的标记（图钉）、路线和多边形区域。有关更多详细信息，请参阅[静态地图](https://docs.aws.amazon.com/location/latest/developerguide/static-maps.html)。

## 预建的地图样式
<a name="prebuilt-map-styles"></a>

AWS 地图样式遵循公认的行业惯例，提供精致、专业的视觉外观。这些现成的样式无需自定义制图设计即可加快开发速度。毫不费力地制作引人入胜的、用户就绪的地图。有关更多详细信息，请参阅 [AWS 地图样式](https://docs.aws.amazon.com/location/latest/developerguide/map-styles.html)。

## 功能
<a name="maps-features"></a>

AWS 地图功能为地理、[地形](https://docs.aws.amazon.com/location/latest/developerguide/maps-topographic-map.html)和[导航](https://docs.aws.amazon.com/location/latest/developerguide/maps-navigation-map.html)（例如交通、物流和实时交通数据）提供了增强的可视化选项。根据您的特定需求创建内容丰富、情境感知的地图体验。 AWS 地图支持[国际化和本地化](https://docs.aws.amazon.com/location/latest/developerguide/maps-localization-internationalization.html)，包括政治观点和语言。选择适合您用例的兴趣点 (POI) 和[配色方案](https://docs.aws.amazon.com/location/latest/developerguide/maps-color-scheme.html)。有关更多详细信息，请参阅[地图功能](https://docs.aws.amazon.com/location/latest/developerguide/maps-concepts.html)。

## 常见使用案例
<a name="maps-usecases"></a>

**在应用程序中嵌入地图**  
在您的应用程序中构建地图，以创建基于位置的体验。直观呈现营业地点，搜索兴趣点，并帮助用户查找特定地址。启用无缝位置共享和地理标记功能，以吸引客户。使用全面的地图数据、强大的地理编码功能和灵活的渲染，来创建根据您的需求量身定制的自定义交互式地图。无论您要构建名录、拼车应用程序还是社交平台，都可以将动态且高质量的地图体验融入应用程序中，从而提升用户参与度并获得业务见解。

**用于报告或打印的静态地图**  
将街道地图图像、卫星图像和基于位置的视觉图像无缝添加到您的网站、文档和应用程序中。使用静态地图，无需复杂的客户端渲染，即可创建能提供地理环境的可自定义地图图像。在收据上显示配送路线，在文档中包含位置详细信息，或者将地图集成到您的数字化体验中。

**分析并可视化数据**  
将数据叠加到高质量的地图上，以发现变革性的空间模式和趋势。让您的团队能够利用地理数据创建可自定义的交互式地图可视化效果。使用地图和您的数据来优化选址、规划基础设施或分析市场机遇。

**提升房地产体验**  
为潜在买家提供挂牌房源的全面位置背景信息。显示房产的确切位置以及周边社区的详细信息，例如管辖区边界、当地企业、公园和学校。帮助客户找到前往待售房屋的指引路线。打造内容丰富、以位置为中心的房地产体验，吸引客户并向其提供信息。

**打造引人入胜的出行体验**  
展示标出目的地的动态地图，配有详细的街景和主要地理特征。为游客和旅行者突出展示酒店、餐厅和其他兴趣点。规划户外设施（例如徒步旅行路线），以帮助用户规划理想的行程。

**使用地图支持灾难应对工作**  
在危机期间，及时准确的位置信息至关重要。利用地图功能构建网站和应用程序，以便在诸如火灾、飓风和洪水等灾害即将发生时，为各个社区提供必要的背景信息。展示动态地图（其中包含疏散路线、安全避难所、道路封闭情况以及交通拥堵信息），帮助社区快速评估情况并做出明智的决策。

## 独立地图 APIs
<a name="maps-apis"></a>


|  API 名称  |  简短描述  |  资源  | 
| --- | --- | --- | 
|  GetStyleDescriptor  |  检索可用的地图样式，例如标准、单色、混合和卫星，这些样式可应用于地图。  |  [AWS 地图样式和功能](map-styles.md)  | 
|  GetTile  |  根据指定的样式和缩放级别获取单个地图图块，从而能够在不同细节层次下进行地图渲染。  |  [图块](tiles.md)  | 
|  GetStaticMap  |  根据特定的坐标和参数生成静态地图图像，这对于在报告或电子邮件中嵌入地图非常有用。  |  [静态地图](static-maps.md)  | 

## 显示地图
<a name="maps-display"></a>


|  Topic  |  简短描述  |  资源  | 
| --- | --- | --- | 
|  设置动态地图样式  |  Amazon Location Service 提供了两种设置动态地图样式的选项，即使用预先设计的地 AWS 图样式和使用样式描述符自定义地图样式。  | [动态地图样式](styling-dynamic-maps.md) [标准地图样式](standard-map-style.md) [单色地图样式](monochrome-map-style.md) [混合地图样式](hybrid-map-style.md) | 
|  渲染动态地图  |  Amazon Location Service 建议使用 [MapLibre](https://github.com/maplibre/maplibre-gl-js) 渲染引擎来渲染地图。MapLibre 是一款用于在 Web 或移动应用程序中显示地图的引擎。  |  [按语言划分的地图渲染 SDK](map-rendering-by-language.md)  | 
|  自定义静态地图  |  如何对使用 Amazon Location Service 生成的静态地图进行自定义。  |  [自定义静态地图](customizing-static-maps.md)  | 
|  叠加静态地图  |  在静态地图上叠加相关内容，以增强地图的可视化表示。  |  [静态地图上的叠加](overlaying-static-map.md)  | 

# 地图概念
<a name="maps-concepts"></a>

Amazon Location Service 提供全面的地图功能，使您能够为应用程序创建视觉上一致的自定义地图。您可以利用 AWS 地图样式和设计原则自定义地图的外观和风格，从而确保视觉一致性和品牌形象。

对于`ap-southeast-1`和中的客户`ap-southeast-5`，支持的请求和响应字段可能有所不同。有关详细信息，请参阅《[地图 API 参考](https://docs.aws.amazon.com/location/latest/APIReference/API_Operations_Amazon_Location_Service_Maps_V2.html)》。

本主题涵盖了基本的地图概念，包括术语、本地化、国际化和地图功能。

## 功能
<a name="maps-concepts-features"></a>

Amazon Location Service 允许您使用高级样式功能自定义地图。添加地形元素，例如地形和等高线密度，以及与路径相关的要素，例如交通和出行模式（卡车或公交）。这些自定义选项可帮助您针对特定用例定制地图外观，包括物流、运输或户外地形可视化。


| 特征名称 | 说明 | 支持的值 | 支持的地图样式 | 
| --- | --- | --- | --- | 
| 颜色方案 | 为地图设置配色方案 | Light 和 Dark | Standard, Monochrome, Hybrid, Satellite | 
| Terrain | 显示地形山体阴影 | Hillshade 和 Terrain3D | Standard,Monochrome, Hybrid (Terrain3D) (Terrain3D, Satellite) | 
| ContourDensity | 显示地形高程线 | Low, Medium, High | Standard, Monochrome, Hybrid | 
| 交通 | 显示实时交通状况 | All, Congestion | Standard, Monochrome, Hybrid | 
| 建筑物 | 显示三维建筑结构 | Buildings3D | Standard, Monochrome | 
| TravelModes | 优化出行模式的地图风格 | Transit 和 Truck | Standard, Monochrome, Hybrid | 
| 语言 | 设置本地语言 | BCP47 语言代码（例如 en-US、es-es、fr-ch） | Standard, Monochrome, Hybrid | 
| PoliticalView | 针对特定国家量身定制的地缘政治观点 | 阿根廷、塞浦路斯、埃及、格鲁吉亚、希腊、肯尼亚、摩洛哥、巴勒斯坦、塞尔维亚、俄罗斯、苏丹、苏里南、叙利亚、土耳其、坦桑尼亚、乌拉圭 | Standard, Monochrome, Hybrid | 

有关标准、单色和混合样式的更多信息，请参阅 [Amazon Location Service 地图样式](https://docs.aws.amazon.com/location/latest/developerguide/map-styles.html)。

**Topics**
+ [功能](#maps-concepts-features)
+ [地图术语](maps-terminology.md)
+ [颜色方案](maps-color-scheme.md)
+ [地形](maps-topographic-map.md)
+ [导航](maps-navigation-map.md)
+ [本地化和国际化](maps-localization-internationalization.md)
+ [3D 功能](maps-3d-map.md)

# 地图术语
<a name="maps-terminology"></a>

了解这些关键术语有助于您有效地使用 Amazon Location Service 地图 APIs 和资源。

**底图**  
底图为您的地图提供地理环境，并存储为向量切片图层。这些切片图层包括地理特征，例如街道名称、建筑物和土地用途，以供视觉参考。

**向量**  
向量数据由点、线和多边形组成，用于在地图上表示道路、位置和区域。向量形状也可以用作地图上标记的图标。

**栅格**  
栅格数据是由网格组成的图像数据，通常表示连续的数据，例如地形、卫星图像或热图。栅格图像也可以用作地图上的图标或纹理。

**地图渲染**  
地图渲染库在运行时从 Amazon Location Service 提取数据，根据所选的地图资源渲染地图。地图资源定义了数据提供程序和地图样式。Amazon Location Service 需要[MapLibre](https://maplibre.org/)渲染引擎。

**向量切片**  
矢量切片使用矢量形状存储地图数据。它可以根据显示分辨率进行调整并有选择地渲染功能，同时保持较小的文件大小以获得最佳性能。支持的格式：[Mapbox 矢量图块 (MVT](https://docs.mapbox.com/data/tilesets/guides/vector-tiles-standards/))。

**地图样式**  
地图样式定义地图数据的颜色和其他样式信息，决定地图在渲染时的显示方式。Amazon Location Service 提供基于 Mapbox GL 样式规范的地图样式。

**字形文件**  
一种包含已编码 Unicode 字符的二进制文件，由地图渲染器用来显示标签。

**Sprite 文件**  
一种包含小型栅格图像的便携式网络图形（PNG）图像文件，在 JSON 文件中带有相应的位置描述。由地图渲染器用于在地图上显示图标或纹理。

**边界框**  
边界框由两个对角线角点定义：西北（NW）（左上）和东南（SE）（右下）点。这些点指定了地图的空间范围。

# 颜色方案
<a name="maps-color-scheme"></a>

Amazon Location Service 允许您为地图设置配色方案。配色方案参数设置地图的调色板（例如`Light`或）`Dark`，以更好地满足应用程序的设计和可访问性需求。

## 浅色和深色配色方案
<a name="maps-color-scheme-light-dark"></a>

该`Light`模式用途广泛，适合任何环境，而该`Dark`模式具有受限的调色板，旨在清晰地显示细节并在较暗的环境中保持可读性。

------
#### [ Standard ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/color-scheme-standard.png)


------
#### [ Monochrome ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/color-scheme-monochrome.png)


------
#### [ Hybrid ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/color-scheme-hybrid.png)


------
#### [ Satellite ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/color-scheme-satellite.png)


------

# 地形
<a name="maps-topographic-map"></a>

地形和等值线等地形要素显示海拔变化和地理要素。这可以帮助用户更好地了解其绘制区域的物理景观和地形特征。

## Terrain
<a name="maps-topographic-terrain"></a>

地形要素显示带有高程阴影的地球表面，表示高程变化和自然地貌。它可以帮助用户解释其绘制区域内景观的形状和结构。

使用 API 请求中的`terrain`参数来显示带有高程阴影的区域地形。此功能可突出显示海拔和地理特征的变化，帮助用户更好地可视化自然景观。请参阅[如何创建地形图](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-topographic-maps.html)。

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/map-topographic-terrain.gif)


## 三维地形
<a name="maps-topographic-3d-terrain"></a>

3D Terrain 功能将地球表面的高程数据渲染为三维表面，允许用户从多个角度和视角查看景观。通过控制视角，用户可以更轻松地获得深度感知并评估绘制区域的地形复杂性、坡度和相对高度。

使用 API 请求中的`terrain`参数启用三维地形可视化。此功能为地形特征提供了身临其境的视角，因此对于理解山区或多变地形中的空间关系特别有用。

将 3D 地形与 API 请求中的`contour-density`参数相结合，以提高海拔精度和视觉环境。请参阅[创建 3D 地图](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-a-3d-map.html)。

------
#### [ Satellite ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/zoom-hybrid-3d-terrain.gif)


------
#### [ Standard ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/zoom-3d-terrain.gif)


------

## 轮廓密度
<a name="maps-topographic-contour-density"></a>

等高线密度功能可视化等高线，以表示地形陡度和海拔变化。用户可以用它轻松识别斜坡、海拔梯度和其他地形模式。

使用 API 请求中的`contour-density`参数来渲染表示地形陡度和形状的地形高程等值线。这提供了不同密度水平的地貌的详细可视化，从而增强了对地形的理解。请参阅[如何创建地形图](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-topographic-maps.html)。

------
#### [ Low ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/zoom-contours-low.gif)


------
#### [ Medium ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/zoom-contours-medium.gif)


------
#### [ High ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/zoom-contours-high.gif)


------

# 导航
<a name="maps-navigation-map"></a>

诸如`Traffic`和之类的导航功能`Truck TravelModes`提供了动态可视化工具，可增强导航和路线规划。它们可以帮助用户了解实时路况，并根据自己的交通需求选择最有效的出行选项。

## 交通
<a name="maps-navigation-traffic"></a>

交通层提供交通状况的实时可视化，包括道路拥堵、施工区域和报告的事件。此功能可帮助用户根据当前的道路状况做出明智的路线决策并优化行驶效率。

使用您的 API 请求中的`traffic`参数来显示实时路况信息。这包括有关道路拥堵、施工区域和事故的数据，可帮助用户做出明智而有效的路线决策。了解[如何在地图上显示实时路况](https://docs.aws.amazon.com/location/latest/developerguide/how-to-set-real-time-traffic-map.html)。

------
#### [ All ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/zoom-traffic-all.gif)


------
#### [ Congestion ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/zoom-traffic-congestion.gif)


------

## 出行模式
<a name="maps-navigation-travel-modes"></a>

出行模式功能允许对不同的交通方式进行可视化和选择。它支持各种模式的路线信息，例如公共交通、卡车运输或其他考虑道路限制和法规的特殊导航类型。这可以帮助用户规划针对其特定出行方式进行优化的路线。

使用 API 请求中的`travel-modes`参数来显示特定于运输的路由数据。查看[如何在地图上显示公交详情](https://docs.aws.amazon.com/location/latest/developerguide/how-to-show-transit-details-map.html)以及[如何创建物流地图](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-logistic-map.html)。

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/map-travel-modes-transit.gif)


![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/map-travel-modes-truck.gif)


# 本地化和国际化
<a name="maps-localization-internationalization"></a>

Amazon Location Service 支持本地化功能，使您能够针对特定语言和地区自定义地图。这包括支持使用本地地名以及能够使用不同的语言渲染地图。


| 样式 | 政治观点 | 语言 | 
| --- | --- | --- | 
| 标准 | 阿根廷、塞浦路斯、埃及、格鲁吉亚、希腊、肯尼亚、摩洛哥、巴勒斯坦、塞尔维亚、俄罗斯、苏丹、苏里南、叙利亚、土耳其、坦桑尼亚、乌拉圭 | 通过客户端库提供支持 | 
| 单色 | 阿根廷、塞浦路斯、埃及、格鲁吉亚、希腊、肯尼亚、摩洛哥、巴勒斯坦、塞尔维亚、俄罗斯、苏丹、苏里南、叙利亚、土耳其、坦桑尼亚、乌拉圭 | 通过客户端库提供支持 | 
| Hybrid | 阿根廷、塞浦路斯、埃及、格鲁吉亚、希腊、肯尼亚、摩洛哥、巴勒斯坦、塞尔维亚、俄罗斯、苏丹、苏里南、叙利亚、土耳其、坦桑尼亚、乌拉圭 | 通过客户端库提供支持 | 
| 卫星 | 不支持 | 不支持 | 

## 语言
<a name="maps-languages"></a>

Amazon Locat APIs ion Service 提供的地图使您可以自定义地图标签和文本元素的语言。此功能可帮助您的应用程序迎合使用多种语言的全球受众或地区。通过使用用户的首选语言显示地图，可以增强整体用户体验，使地图更易于访问并与您的多样化用户群相关。

有关更多信息，请参阅 [如何为地图设置首选语言](how-to-set-preferred-language-map.md)。

![\[Map of Taiwan showing major cities including Taipei, Taichung, and Kaohsiung along the western coast.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/standard-language-switcher.gif)


## 政治观点
<a name="maps-political"></a>

默认情况下，Amazon Location Service 呈现国际视角，用虚线边框直观地表示有争议的领土。要从国际视角切换到特定国家的地缘政治视角，请在 API 查询中使用*政治观*点参数。这有助于企业遵守当地法律，因为某些国家/地区要求在绘制地图和提供地图数据时必须遵循其特定的地缘政治观点。

除了默认的国际视角外，Amazon Location Service 还支持以下国家的地缘政治观点：阿根廷、塞浦路斯、埃及、格鲁吉亚、希腊、肯尼亚、摩洛哥、巴勒斯坦、塞尔维亚、俄罗斯、苏丹、苏里南、叙利亚、土耳其、坦桑尼亚、乌拉圭。要激活地缘政治观点，请将适当的值传递给 *political-view* 参数。

有关更多信息，请参阅 [如何设置地图的政治观点](how-to-set-political-view-map.md)。

![\[Map of Cyprus showing the locations of Nicosia and Limassol, with surrounding waters.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/maps-political-view.png)


# 3D 功能
<a name="maps-3d-map"></a>

Amazon Location Service 的 3D 可视化功能（地形和建筑）通过增加地理数据的深度和视角，帮助用户做出更好的决策。3D 地形显示了对路线优化、应急响应规划和户外休闲至关重要的海拔变化，而 3D 建筑则为城市导航、房地产评估和地标识别提供了空间背景。这些功能通过简单的 API 参数（地形、建筑物）无缝集成，使物流、公共安全、旅游和房地产领域的应用程序无需复杂的实施即可提供更直观、更具吸引力的用户体验。

## 三维地形
<a name="maps-3d-terrain"></a>

3D Terrain 功能将地球表面的高程数据渲染为三维表面，允许用户从多个角度和视角查看景观。通过控制视角，用户可以更轻松地获得深度感知并评估地图区域的地形复杂性、坡度和相对高度。

使用 API 请求中的`terrain`参数启用三维地形可视化。此功能为地形特征提供了身临其境的视角，因此对于理解山区或多变地形中的空间关系特别有用。

将 3D 地形与 API 请求中的`contour-density`参数相结合，以提高海拔精度和视觉环境。请参阅[创建 3D 地图](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-a-3d-map.html)。

------
#### [ Satellite ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/zoom-hybrid-3d-terrain.gif)


------
#### [ Standard ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/zoom-3d-terrain.gif)


------

## 三维建筑
<a name="maps-3d-buildings"></a>

3D Buildings 功能将建筑物占地面积渲染成具有高度和体积的三维结构，允许用户从多个角度和视角可视化城市环境。通过控制视角，用户可以更轻松地了解城市和发达地区内的建筑密度、高度关系和空间背景。

使用 API 请求中的`buildings`参数启用三维建筑可视化。此功能为城市景观提供了身临其境的视角，因此对于了解城市布局、识别地标和在复杂的城市环境中导航特别有用。请参阅[创建 3D 地图](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-a-3d-map.html)。

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/zoom-3d-buildings.gif)


## 地球视图
<a name="maps-3d-globe-view"></a>

Globe View 功能提供地球的球面表示，允许用户在三维地球上可视化地理数据。这种视角提供了一种自然而直观的方式来理解全球空间关系、大陆布局和地球表面的曲率。

使用 Globe View 显示具有逼真地球曲率和全球视角的地图。请参阅[创建 3D 地图](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-a-3d-map.html)。

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/zoom-globe-view.gif)


# AWS 地图样式和功能
<a name="map-styles"></a>

## 地图样式概述
<a name="map-style-overview"></a>

要获取地图，必须先选择一种地图样式。地图样式定义了所渲染地图的视觉外观，包括地图图块、字形和 sprite 的样式。地图图块可以是向量（MVT），也可以是栅格（图像）。当您放大或缩小时，样式可能会发生变化，但总体上仍保持一致的主题。在将样式传递到地图渲染库之前，可以覆盖样式的部分，也可以覆盖整个样式。

## AWS 地图样式
<a name="aws-map-styles"></a>

AWS 地图样式符合行业标准，提供精致而专业的外观。这些样式减少 time-to-market并消除了专业制图师从头开始创建地图样式的需求。借助这些预先设计的样式，您可以快速有效地为最终用户创建具有视觉吸引力的地图。

通过利用预先设计 AWS 的地图样式，您可以绕过从头开始设计和构建地图样式的耗时且资源密集型的过程。这可以加快您的开发进程，使您能够专注于核心功能。




| 地图样式名称 | 说明 | 颜色方案 | 支持动态地图 | 支持静态地图 | 
| --- | --- | --- | --- | --- | 
| 标准 | 彩色地图样式 | 深色和浅色 | 支持 | 是 | 
| 单色 | 灰度地图样式 | 深色和浅色 | 是 | 否 | 
| Hybrid | 卫星图像上的道路和标注叠加层 | 不适用 | 是 | 否 | 
| 卫星 | 基于卫星图像的地图样式 | 不适用 | 支持 | 是 | 

Amazon Location Service 提供的样式符合 [MapLibre GL 样式规范](https://maplibre.org/maplibre-style-spec/)。

## 标准地图样式
<a name="standard-map"></a>

标准地图样式是一种简洁而现代的通用地图设计，可以完美且实用地适配几乎任何应用程序或网站。

要了解更多信息，请参阅[标准地图样式](standard-map-style.md)。

![\[Map of Boston showing neighborhoods, streets, and waterways in standard and dark modes.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/map-standard.png)


## 单色地图样式
<a name="monochrome-map"></a>

单色地图样式是一种极简风格的画布，其色彩搭配十分有限，专为与数据可视化叠加配合使用而设计。单色样式提供浅色和深色两种模式，能够清晰传达出地理环境所需的所有关键信息。

要了解更多信息，请参阅[单色地图样式](monochrome-map-style.md)。

![\[Two maps of North America, one light and one dark, showing countries and major bodies of water.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/map-monochrome.png)


## 混合地图样式
<a name="hybrid-map"></a>

混合地图样式将全球卫星图像与矢量地图中的清晰标签和可配置 POI 类别相结合。

要了解更多信息，请参阅[混合地图样式](hybrid-map-style.md)。

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/map-hybrid.png)


## 卫星地图样式
<a name="satellite-map"></a>

卫星地图样式展示了由卫星拍摄的高分辨率真实世界图像，能够呈现出自然景观、建筑物和地形的逼真景象。这种样式通常会尽可能少地使用标签或叠加层，以突出展现地理方面的细节。

![\[Satellite view of Australia, New Zealand, and Southeast Asian islands surrounded by deep blue oceans.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/map-satellite.png)


# 标准地图样式
<a name="standard-map-style"></a>

标准地图样式是一种简洁而现代的通用地图设计，可以无缝适配几乎任何应用程序或网站。

## 颜色方案
<a name="color-scheme"></a>

标准地图样式有浅色和深色两种模式。浅色模式用途广泛，可以适应任何环境；而深色模式则采用有限的色彩搭配，旨在清晰地展现细节并在较暗的环境中保持可读性。这样可以尽可能地减少干扰，尤其适用于夜间导航等场景。

------
#### [ Forest ]

![\[Map of Washington state and Vancouver area showing coastal regions and major cities.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/color-scheme-forest.png)


------
#### [ Road ]

![\[Map of Bronx area showing highways, neighborhoods, and landmarks in light and dark modes.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/color-scheme-road.png)


------
#### [ City ]

![\[Map of Boston showing neighborhoods, streets, and waterfront areas in light and dark modes.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/color-scheme-city.png)


------
#### [ Neighborhood ]

![\[Map of Montreal showing districts, landmarks, and streets in light and dark modes.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/color-scheme-neighborhood.png)


------

## 令人愉悦、充满现代感的色彩搭配
<a name="modern-palette"></a>

柔和的色彩为地图提供了重要的土地利用背景信息，同时又不会使地图显得过于繁杂，在高倍和低倍放大模式下都能提供有用的信息。进行缩小显示时，森林、沙漠和冰川等特征为地图增添了丰富的细节。进行放大显示时，一系列颜色会突出显示诸如学校、医院、休闲区（如公园和体育设施）以及城市区域（如商业区和工业区）等重要地标。

整体样式采用统一的色彩搭配，包括与各自土地利用区域相匹配的 POI 标记。道路网络以灰色阴影呈现，既提供了细节，又不会因鲜艳、引人注目的色彩而使地图显得过于繁杂。

------
#### [ Highway ]

![\[Map of San Francisco Bay Area showing cities and highways in standard and dark modes.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/modern-highway.png)


------
#### [ Beach ]

![\[Map of Malibu area showing Pacific Coast Highway, Legacy Park, and Malibu Lagoon State Beach.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/modern-beach.png)


------
#### [ Island ]

![\[Map of Oahu island showing major highways, Honolulu, and surrounding areas in day and night views.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/modern-island.png)


------
#### [ Neighborhood ]

![\[Map of downtown Honolulu showing streets, landmarks, and neighborhoods in light and dark modes.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/modern-neighborhood.png)


------
#### [ Intersection ]

![\[Map of Lower Manhattan showing City Hall Park, streets, and landmarks in light and dark modes.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/style-intersection.png)


------
#### [ Roundabout ]

![\[Map of Washington Circle area showing streets, landmarks, and points of interest in light and dark modes.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/style-roundabout.png)


------

## 丰富的兴趣点（POI）
<a name="rich-poi"></a>

标准地图样式支持丰富的可配置兴趣点 (POIs)。只需几行代码，即可选择与您的使用案例相关的 POI 类别。

![\[Map showing various points of interest in Midtown Manhattan, including businesses and landmarks.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/poi-toggle-animation.gif)


## 面向全球市场而设计
<a name="designed-for-the-world"></a>

标准样式支持不同的政治观点，可确保地图为您的用户显示正确的边界。该样式还便于在地图标签上轻松切换不同的语言，它支持数十种语言和书写系统。

要了解更多信息，请参阅[本地化和国际化](maps-localization-internationalization.md)。

------
#### [ Languages ]

![\[Map of Taiwan showing major cities and geographical features including Taiwan Strait.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/standard-language-switcher.gif)


------
#### [ Political view ]

![\[Map of Cyprus showing Nicosia in the north and Limassol in the south, with surrounding Mediterranean Sea.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/maps-political-view.png)


------

## 地形
<a name="topography"></a>

标准地图样式提供详细的地形可视化，突出显示海拔变化和自然地理特征。等高线、阴影和地形纹理可以真实地呈现景观，使用户能够轻松解释斜坡、山谷和山峰。这种地形渲染非常适合户外规划、环境分析和应用，在这些应用中，了解地形特征可以增强决策和空间意识。

------
#### [ Both Terrain and Contour Density ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/map-terrain-contour-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/map-terrain-contour-dark.png) 

------
#### [ Only terrain ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/map-terrain-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/map-terrain-dark.png) 

------
#### [ Only contour density ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/map-contour-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/map-contour-dark.png) 

------

## 导航
<a name="navigation"></a>

标准地图样式提供了用于提供动态可视化的选项，旨在优化导航和路线规划。实时交通数据突出显示拥堵、事故和路况，使用户能够预测延误并相应地调整路线。在多种出行模式（例如卡车或公共交通）中，该功能使用户能够为自己的路线选择最高效、最适合情境的选项，从而确保更流畅、更明智的路线体验。

------
#### [ Traffic ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/traffic-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/traffic-dark.png) 

------
#### [ Transit ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/transit-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/transit-dark.png) 

------
#### [ Truck ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/truck-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/truck-dark.png) 

------

## 3D
<a name="3D"></a>

标准地图样式提供身临其境的三维可视化效果，以空间深度和视角呈现地形高程和建筑结构。可调节的视角、俯仰控制和三维渲染可以真实地呈现自然景观和城市环境，使用户能够轻松解释海拔变化、地形复杂性和空间关系。这种三维渲染非常适合路线规划、城市导航和应用，在这些应用中，了解垂直尺寸和深度感知可以增强决策和空间意识。

------
#### [ 3D Terrain ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/3d-terrain-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/3d-terrain-dark.png) 

------
#### [ 3D Buildings ]

 ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/3d-buildings-light.png) ![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/3d-buildings-dark.png) 

------

## 土地利用
<a name="land-use"></a>

标准地图样式使用鲜艳的色彩来表示指定的土地用途。绿色代表森林、草地、高尔夫球场、体育中心和公园。相关颜色用于描绘水体、冰川、沙漠和海滩。此外，诸如商业区、工业区、机场、军事区、医疗设施和教育区域等土地用途都通过特定鲜明的类别进行了突出展示。

------
#### [ Light ]

![\[Color-coded squares representing various land uses with corresponding hex codes.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/land-use-light.png)


------
#### [ Dark ]

![\[Color-coded squares representing various land uses with corresponding hex codes and labels.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/land-use-dark.png)


------

# 单色地图样式
<a name="monochrome-map-style"></a>

单色样式是一种极简风格的画布，其色彩搭配十分有限，专为与数据可视化叠加配合使用而设计。这种样式支持浅色和深色两种模式，每种模式都能清晰传达出地理环境所需的所有关键信息。

## 颜色方案
<a name="color-schemes"></a>

单色样式为深色和浅色模式提供多种颜色选择。

------
#### [ Continent ]

![\[Map of North America showing the United States, Canada, Mexico, and parts of Central and South America.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/monochrome-continent.png)


------
#### [ Neighborhood ]

![\[Map of Downtown Miami showing streets, parks, and landmarks in light and dark modes.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/monochrome-neighborhood-colors.png)


------

## 使用案例
<a name="use-case"></a>

单色样式非常适合数据可视化和极简主义的设计需求。

### 数据可视化
<a name="data-visualization"></a>

单色样式特意只使用灰色阴影，让您可以完全自由地选择颜色来绘制数据叠加层（例如分级统计图、热图或点图）。

![\[Map of lower Manhattan showing streets, landmarks, and red dots indicating data points.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/monochrome-data-vis.png)


### 极简主义设计
<a name="minimalist"></a>

为了保持地图干净不显眼，单色样式包括一组精简的兴趣点 (POIs)，用于基本要素，例如机场、公园、医院和大学。

------
#### [ Airport ]

![\[Map showing Miami International Airport and surrounding roads including Airport Expy and Dolphin Expy.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/monochrome-airport.png)


------
#### [ Neighborhood ]

![\[Map showing Jackson Memorial Hospital, UHealth Tower, and nearby streets in light and dark modes.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/monochrome-neighborhood.png)


------

尽管单色样式包含一组精简版 POIs，但底层图块仍包含完整的 POI 数据集。这允许您显示 POIs 样式中没有视觉效果的内容。

## 面向全球市场而设计
<a name="designed-for-the-world"></a>

单色样式支持不同的政治观点，可确保地图为您的用户显示正确的边界。该样式还便于在地图标签上轻松切换不同的语言，它支持数十种语言和书写系统。

![\[Map of Taiwan showing major cities and the Taiwan Strait, with a monochrome color scheme.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/monochrome-language-switcher.gif)


# 混合地图样式
<a name="hybrid-map-style"></a>

混合地图样式将全球卫星图像与标准地图样式中相同的清晰标签和可配置的兴趣点（POI）类别相结合。这种组合不仅提供了详尽的地理信息，还能确保应用程序具有良好的可读性和易用性。

## 丰富的兴趣点（POI）
<a name="rich-poi"></a>

标签和 POI 专为达到鲜明的对比效果和良好的可读性而设计，可为卫星层提供必要的背景信息，同时又不干扰到详细的图像展示。当画面放大时，浅色的道路线条会凸显出城市的结构；而当画面缩小时，这些线条则会逐渐变得模糊，从而展现出更详尽的街道层面信息。

------
#### [ Zoom ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/hybrid_zoom.gif)


------
#### [ Neighborhood ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/hybrid-neighborhood.png)


------
#### [ Zoomed-in ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/hybrid-zoom.png)


------

## 面向全球市场而设计
<a name="designed-for-the-world"></a>

混合样式支持不同的政治观点，可确保地图为您的用户显示正确的边界。这种样式还便于在地图标签上轻松切换不同的语言，它支持数十种语言和书写系统，可确保本地化的使用体验。

# 地图 API
<a name="choose-maps-apis"></a>

地图 API 提供对动态和静态地图类型的访问权限，适用于各种应用程序。有关更多信息，请参阅[Amazon Location Service 地图](maps.md)。
+ **动态地图**：可实时自定义的交互式地图，支持用户平移、缩放和叠加数据。有关更多信息，请参阅[动态地图](dynamic-maps.md)。
+ **静态地图**：显示特定位置或路线的地图的静态图像（不含交互式元素），适用于交互性有限的应用程序。有关更多信息，请参阅[静态地图](static-maps.md)。

下表列出了一些适合使用地图 API 解决的业务使用案例。

## 地图使用案例
<a name="maps-table"></a>

以下部分展示了一些适合使用地图 API 解决的业务使用案例。


| **业务需求** | **有用的 API** | **示例** | 
| --- | --- | --- | 
|  **显示交互式地图** 支持地图操作手势，例如缩放、平移、缓动、飞行、俯仰、旋转和方位调整。  | `GetTile` 和 `GetStyleDescriptor`，使用渲染引擎（MapLibre） | [如何显示地图](how-to-display-a-map.md) | 
|  **向地图添加标记** 例如标记、图标等。  |  `GetTile` 和 `GetStyleDescriptor`，使用渲染引擎（MapLibre） | [如何在地图上添加标记](how-to-add-marker-on-map.md) [如何在地图上添加图标](how-to-add-icon-on-map.md) | 
|  **向地图添加用户交互组件** 例如，以首选语言或地缘政治观点显示地图。 |  `GetTile` 和 `GetStyleDescriptor`，使用渲染引擎（MapLibre） | [如何在地图上添加控件](how-to-add-control-on-map.md) [如何向地图添加弹出窗口](how-to-add-popup-to-map.md) | 
| **在地图上呈现实时数据或预先录制的数据** 例如，热图、KML、GeoJSON 特征、多边形、矩形、折线、圆圈、标记等。 | `GetTile` 和 `GetStyleDescriptor`，使用渲染引擎（MapLibre） | [如何在地图上添加线条](how-to-add-line-on-map.md) [如何在地图上添加多边形](how-to-add-polygon-on-map.md) | 
| **显示带有本地化功能的地图**例如，以首选语言或地缘政治观点显示地图。 |  `GetTile` 和 `GetStyleDescriptor`，使用渲染引擎（MapLibre） | [如何为地图设置首选语言](how-to-set-preferred-language-map.md) [如何设置地图的政治观点](how-to-set-political-view-map.md) | 
| **显示静态地图图像** 例如，在应用程序、电子邮件、报告或打印中使用地图图像。 | `GetStaticMap` | [如何获取特定位置的静态地图](get-static-map-specific-position.md) [如何获取特定尺寸的静态地图](get-static-map-specific-dimension.md) [生成静态地图时如何在 radius 和 zoom 之间做出选择](choose-radius-vs-zoom.md) [如何为静态地图添加比例尺](add-scale-static-map.md)  | 
| **向地图图像添加标记** 例如标记、邻近圆圈、图标等。 | `GetStaticMap` | [如何向静态地图添加标记](add-marker-static-map.md) | 
| **在地图图像上呈现数据** 例如 GeoJSON 特征、多边形、矩形、折线、圆圈等。 |  `GetStaticMap` | [如何向静态地图添加线条](how-to-add-line-static.md)  | 
| **在地图上呈现实际使用案例** 示例包括路线、邻近圆圈等。 |  `GetStaticMap` | [如何向静态地图添加路线](how-to-add-route.md)  | 
| **在地图上呈现地点搜索和/或地理编码结果**除自动补全功能外，所有 API 都返回地理坐标。 | GetTile 和 GetStyleDescriptor，使用带 Places API 的渲染引擎（MapLibre） |    | 
| **在地图上绘制路线**支持航点标记。 | GetTile 和 GetStyleDescriptor，使用带“计算路线”功能的渲染引擎（MapLibre）  |  | 
| **在地图上呈现匹配的 GPS 轨迹**支持卡车、行人、汽车和踏板车等出行模式。 | GetStyleDescriptor，使用带“与道路对齐”功能的渲染引擎（MapLibre）  |  | 

# 动态地图
<a name="dynamic-maps"></a>

**注意**  
您必须使用政治观点功能以遵守适用的法律，包括那些涉及绘制您通过 Amazon Location Service 访问的地图、图像和其他数据的国家或地区的法律。

动态地图也称为交互式地图，是支持缩放、平移、缓动、飞行、俯仰、旋转和方位调整等操作手势的数字地图。借助 Amazon Location Service，您可以构建出色的地图应用程序，为用户提供响应迅速、互动性强且沉浸感十足的体验。这些地图可根据用户输入的信息，帮助用户直观地查看和分析实时及历史数据，并支持用户实时平移、缩放和浏览地图。Amazon Location Service 提供的地图还支持多种语言和不同的政治观点。

了解有关 [本地化和国际化](maps-localization-internationalization.md) 的更多信息。

有关此 API 的请求、响应、cURL 和 CLI 命令示例，请参阅[如何使用动态地图](https://docs.aws.amazon.com/location/latest/developerguide/dynamic-maps-how-to.html)。

------
#### [ City ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/dynamic-city.png)


------
#### [ Roads ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/dynamic-roads.png)


------
#### [ Park ]

![\[alt text not found\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/dynamic-parks.png)


------

有关 AWS 地图样式的更多信息，请参阅[AWS 地图样式和功能](map-styles.md)。

## 常见使用案例
<a name="common-use-cases"></a>

**分析并可视化数据**  
将数据叠加到高质量的地图上，以发现变革性的空间模式和趋势。让您的团队能够利用地理数据创建可自定义的交互式地图可视化效果。使用地图和数据来优化选址、规划基础设施或分析市场机遇。

**提升房地产体验**  
为潜在买家提供挂牌房源的全面位置背景信息。显示房产的确切位置以及周边社区的详细信息，例如管辖区边界、当地企业、公园和学校。帮助客户找到前往待售房屋的指引路线，打造内容丰富、以位置为中心的房地产体验。

**打造引人入胜的出行体验**  
展示标出目的地的动态地图，配有详细的街景和主要地理特征。为游客和旅行者突出展示酒店、餐厅和景点等兴趣点。规划户外设施（例如徒步旅行路线），以帮助用户规划理想的行程。

## 渲染动态地图
<a name="rendering-dynamic-map"></a>

地图渲染引擎是一个负责在数字屏幕上对地图进行可视化渲染的库。渲染引擎将地图图块（向量、混合、卫星）、地图数据（点、线、多边形）或栅格数据（影像）拼接在一起，以便在 Web 浏览器或本机应用程序中显示交互式地图。Amazon Location Service 建议使用 [MapLibre](https://github.com/maplibre/maplibre-gl-js) 渲染引擎，该引擎既支持 Web 平台，也支持移动（iOS 和 Android）平台。MapLibre 还提供插件模型，并支持多种语言的用户界面进行搜索和路线规划。

有关更多信息，请参阅 [创建您的第一个 Amazon Location 地图和地点应用程序](first-app.md)。

## 请求地图资产
<a name="requesting-map-assets"></a>

渲染引擎使用一种地图样式，其中包含对地图图块、sprite（图标）和字形（字体）的引用。当用户与地图交互（加载、平移或缩放）时，渲染引擎使用所需的输入参数调用 API（针对图块、sprite 和字形）。您也可以根据应用程序的需求，直接调用这些 API。

**地图图块**  
一些小方块，包含从服务器检索并由渲染引擎汇编的数据，用于创建交互式数字地图。

**地图样式**  
一组规则，定义地图视觉外观，例如颜色和样式。Amazon Location Service 遵循 [Mapbox GL 样式规范](https://docs.mapbox.com/style-spec/guides/)。

**字形文件**  
一种包含已编码 Unicode 字符的二进制文件，由地图渲染器用来显示文本标签。

**Sprite 文件**  
一种包含小型栅格图像的便携式网络图形（PNG）图像文件，在 JSON 文件中带有位置描述。由地图渲染器用于在地图上渲染图标或纹理。

# 图块
<a name="tiles"></a>

地图图块是较大地图的一小部分，经过预先渲染，通常以方形图像的形式呈现。它们能够在不同缩放级别下仅加载可见部分，从而高效地展示地理数据。地图图块主要分为三种类型：

欲了解更多信息，请参阅[GetTile](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetTile.html)《*亚马逊定位服务 API 参考*》。

## 图块类型
<a name="tile-types"></a>

**向量地图图块**  
向量地图图块将地图数据存储为几何形状（点、线、多边形），而不是图像。这样便可创建在任何分辨率下都保持清晰的高质量、可缩放的地图。

**栅格地图图块**  
栅格地图图块是表示特定地理区域的预渲染图像。与向量图块不同，栅格图块更为简单，但缺乏灵活性，难以重新设置样式。

**混合地图图块**  
混合地图图块将向量数据和栅格数据结合在一起。它们使用向量数据作为核心地图元素（如道路），而将栅格图像用于更复杂的元素（如详细的卫星或航拍照片）。

## 向量图块层
<a name="vector-tiles-layers"></a>

以下是向量地图图块的 10 层：
+ **边界**：定义行政和地理边界，包括国家/地区、州和城市边界。
+ **建筑物和地址**：表示建筑物形状和详细地址点。
+ **地球**：显示全球地形以及诸如沙漠、山脉和森林等自然特征的覆盖情况。
+ **土地利用**：显示已分类的区域，例如公园、农田和城市区域。
+ **地点**：识别重要地点，例如城市、城镇和著名地标。
+ **兴趣点 (POIs)**：重点介绍景点、企业和其他关键地点。
+ **道路**：表示街道、高速公路和小径组成的网络。
+ **道路标签**：为道路名称和路线编号提供文本标签。
+ **交通**：描绘诸如公交车、火车和地铁等公共交通线路。
+ **水**：显示水体，包括湖泊、河流和海洋。

## 使用案例
<a name="tiles-use-cases"></a>
+ 获取地图图块，用于在不同的缩放级别下渲染地图的不同部分。
+ 根据用户交互（如平移和缩放）来优化地图图块请求。
+ 获取向量图块或栅格图块以进行详细渲染。

## 了解请求
<a name="tiles-understand-the-request"></a>

**注意**  
 对于`ap-southeast-1`和中的客户`ap-southeast-5`，支持的请求和响应字段可能有所不同。有关详细信息，请参阅 [GetTile API 参考](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetTile.html)。

该请求需要参数 `Tileset`、`X`、`Y` 和 `Z` 来标识要获取的特定图块。可以选择包含 `Key` 参数以进行授权。
+ **`Tileset`**：指定所需图块集以获取图块。
+ **`X`**：地图图块的 X 轴值。
+ **`Y`**：地图图块的 Y 轴值。
+ **`Z`**：缩放值，定义图块的缩放级别。
+ **`Key`**：可以选择包含，以进行授权。

## 了解响应
<a name="tiles-understand-the-response"></a>

该响应包含 `CacheControl`、`ContentType` 和 `ETag` 之类的标头，并包含采用 MVT 格式的二进制 blob 形式的地图图块数据。这些标头用于管理缓存控制，提供内容格式详细信息，以及进行图块的版本控制。
+ **`CacheControl`**：控制地图图块的客户端缓存。
+ **`ContentType`**：指定图块数据的格式。
+ **`ETag`**：提供图块的版本标识符。
+ **`Blob`**：包含 MVT 格式的向量图块数据。

# 动态地图样式
<a name="styling-dynamic-maps"></a>

Amazon Location Service 提供两种用于设置动态地图样式的选项：一种是使用预先设计的 AWS 地图样式，另一种是使用样式描述符自定义地图样式。

欲了解更多信息，请参阅[GetStyleDescriptor](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetStyleDescriptor.html)《*亚马逊定位服务 API 参考*》。

## 使用预先设计 AWS 的地图样式
<a name="using-aws-map-styles"></a>

AWS 地图样式是符合行业标准的预定义样式，可提供精致、专业的美感。通过在 Amazon Location Service 中利用这些样式，您可以减少 time-to-market和消除专业制图师从头开始创建地图样式的需求。

有关更多信息，请参阅 [AWS 地图样式和功能](map-styles.md)。

要了解有关预定义地图样式的更多信息，请参阅：
+ [标准地图样式](map-styles.md#standard-map)
+ [单色地图样式](map-styles.md#monochrome-map)
+ [混合地图样式](map-styles.md#hybrid-map)
+ [卫星地图样式](map-styles.md#satellite-map)

## 向地图添加地图样式要 AWS 素
<a name="using-aws-map-features"></a>

AWS 地图样式功能使您能够使用高级样式功能自定义地图，包括地形、等高线密度、交通以及卡车或公交车叠加层。这些新的自定义选项允许您根据特定用例定制地图外观。

有关更多信息，请参阅[地图要素](https://docs.aws.amazon.com/location/latest/developerguide/maps-concepts.html)。

## 使用 AWS 地图样式的好处
<a name="benefits-aws-map-styles"></a>
+ **时间和资源效率**： AWS 地图样式允许您绕过从头开始设计地图样式的耗时且资源密集型的过程。这使您能够专注于核心功能，同时还能提供美观的地图。
+ **专业且一致的美学**：熟练的制图师遵循行业最佳实践，精心制作了 AWS 地图样式。从色彩搭配到标签放置，每个细节都经过优化，以确保清晰易读。
+ **无缝集成**： AWS Map Styles 与应用程序的设计语言无缝集成，为您的最终用户提供精致而一致的地图体验。

## 开始使用 AWS 地图样式
<a name="getting-started-aws-map-styles"></a>
+ **查看提供的地 AWS 图样式**：在 Amazon Location Service 控制台中，导航至**地图**部分以浏览可用的样式。
+ **选择符合您需求的样式**：选择最符合应用程序设计和用户体验要求的样式。
+ **整合样式**：按照提供的文档，使用 Amazon Location Service 将所选样式集成到您的应用程序中， APIs 或者 SDKs。

了解有关 [如何显示地图](how-to-display-a-map.md) 的更多信息。

## 使用案例
<a name="use-cases"></a>
+ 根据配色方案（如`Light`或`Dark`）自定义地图样式。
+ 根据特定的政治观点或地理边界来展示地图。
+ 针对不同的使用案例（例如物流、户外活动、根据交通数据进行的导航，以及特定于交通的路线规划），优化地图样式。

## 了解请求
<a name="dynamic-understand-the-request"></a>

**注意**  
 对于`ap-southeast-1`和中的客户`ap-southeast-5`，支持的请求和响应字段可能有所不同。有关详细信息，请参阅 [GetStyleDescriptor API 参考](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetStyleDescriptor.html)。

该请求支持诸如 `ColorScheme`、`Key` 和 `PoliticalView` 之类的参数来定义地图的样式和显示方式。`Style` 是指定所需地图样式时的必需参数。
+ **`ColorScheme`**: 设置地图的调色板，例如`Light`或`Dark`。
+ **`PoliticalView`**：指定用于地图可视化的政治观点。
+ **`Style`**: 定义地图的样式，比如`Standard`或`Monochrome`。
+ **`Terrain`**：通过高程阴影和地理突出显示来呈现地形特征。
+ **`ContourDensity`**：使用不同密度级别的等高线来展示地形的形状和陡峭程度。
+ **`Traffic`**：在地图上叠加实时交通状况信息。
+ **`TravelMode`**：显示交通信息，包括公共交通系统或卡车行驶路线（并标明道路限制情况）。

## 了解响应
<a name="dynamic-understand-the-response"></a>

该响应提供诸如 `CacheControl`、`ContentType` 和 `ETag` 之类的标头，并包含作为 JSON blob 的样式描述符。标头包含缓存信息、内容格式详情以及针对样式更改的版本控制。
+ **`CacheControl`**：控制样式描述符的缓存配置。
+ **`ContentType`**：表明响应格式为 JSON。
+ **`ETag`**：为样式描述符提供版本标识符。
+ **`Blob`**：包含 JSON 格式的样式描述符的正文。

## 自定义样式描述符
<a name="customizing-style-descriptor"></a>

要自定义地图样式，必须了解样式描述符的结构（该结构通常是一个 JSON 对象，用于定义地图元素的可视化表示）。样式描述符由多个图层组成，每个图层控制特定类型地图元素（例如道路、公园、建筑物或标签）的样式。
+ **使用预定义的样式描述符作为基础**：既可以使用预定义的样式描述符作为基础，也可以使用诸如 [Maputnik](https://maputnik.github.io/) 之类的地图样式编辑器从头开始创建样式。
+ **了解结构**：样式描述符是一个分层 JSON 对象，其中包含多个图层，每个图层都代表一种不同的地图元素。每个图层都具有控制该元素视觉外观的属性，例如颜色、不透明度和线宽。
+ **修改图层样式**：您可以更改现有图层，也可以添加新图层以自定义样式，具体取决于您所使用的地图样式编辑器。例如，您可以调整道路的颜色，修改标签的字体大小，或者为特定位置添加自定义图标。
+ **为不同的缩放级别定义样式**：通过地图样式编辑器，您可以为不同的缩放级别定义不同的样式，这对于根据用户缩放交互来控制细节程度和可见性非常有用。
+ **测试和迭代**：修改或创建样式描述符后，应在地图上测试自定义的样式，确保其能按预期显示。反复进行调整，直至达到您所期望的视觉风格。

# 带 sprite 的样式图标
<a name="styling-iconography-with-sprites"></a>

sprite 是一种便携式网络图形（PNG）图像文件，其中包含小型栅格图像，例如图标、标记以及地图上渲染的其他元素。可以根据样式、配色方案和变体等参数自定义 sprite。Amazon Location Service 通过 `GetSprites` API 提供 sprite 表。您也可以使用自定义图标，方法是加载自己的图标集（参阅[如何在地图上添加图标](how-to-add-icon-on-map.md)），或自定义样式描述符以加载您的自定义 sprite。

欲了解更多信息，请参阅[GetSprites](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetSprites.html)《*亚马逊定位服务 API 参考*》。

## 使用案例
<a name="use-cases"></a>
+ 使用 sprite 表，为特定样式和配色方案渲染自定义地图元素。
+ 获取各种地图样式（例如标准、单色或混合）的 sprite。
+ 通过修改 sprite，自定义地图上的图标。

## 了解请求
<a name="styling-understand-the-request"></a>

该请求需要 URI 参数，例如 `ColorScheme`、`FileName` 和 `Style`。这些参数允许根据地图的配色方案、样式和所需的特定 sprite 文件对 sprite 表进行自定义。
+ **`ColorScheme`**：定义 sprite 的配色方案，例如“浅色”或“深色”。
+ **`FileName`**：要检索的 sprite 文件的名称，可以是 PNG 文件，也可以是 JSON 文件。
+ **`Style`**：指定地图样式，例如“标准”或“单色”。

## 了解响应
<a name="styling-understand-the-response"></a>

该响应包含 `CacheControl`、`ContentType` 和 `ETag` 之类的标头，并以二进制 blob 或 JSON 文件的形式返回 sprite 数据。这些标头包含缓存信息、响应的内容类型以及 sprite 数据的版本控制。
+ **`CacheControl`**：sprite 文件的缓存配置。
+ **`ContentType`**：响应的格式，表明是包含 PNG 数据，还是 JSON 数据。
+ **`ETag`**：sprite 版本的标识符，用于进行缓存验证。
+ **`Blob`**：包含 sprite 表的主体或 JSON 偏移文件。

------
#### [ Standard Light ]

![\[Collection of colorful icons representing various services and concepts in cloud computing.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/styling-standard-light.png)


------
#### [ Standard Dark ]

![\[Collection of colorful icons and shapes representing various services and concepts.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/styling-standard-dark.png)


------
#### [ Monochrome Light ]

![\[Collection of various icons and shapes representing different concepts and services.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/styling-monochrome-light.png)


------
#### [ Monochrome Dark ]

![\[Collection of various icons and shapes representing different concepts and services.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/styling-monochrome-dark.png)


------
#### [ Hybrid ]

![\[Collection of colorful icons representing various travel, transportation, and service symbols.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/styling-hybrid.png)


------

# 使用字形为标签设置样式
<a name="styling-labels-with-glyphs"></a>

字形是包含已编码 Unicode 字符的二进制文件，由地图渲染器用来显示标签。Amazon Location Service 允许从字体堆栈中检索特定字形，以便通过 `GetGlyphs` API 用于地图渲染。

有关更多信息，请参阅《Amazon Location Service API 参考》**中的 [GetGlyphs](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetGlyphs.html)。

## 使用案例
<a name="glyphs-use-cases"></a>
+ 使用特定字体和样式在地图上渲染自定义文本。
+ 获取用于本地化地图文本渲染的字形。
+ 使用 Unicode 字符范围来显示地图标签和符号。
+ 根据字体堆栈和字形范围来优化地图字体渲染。

## API 中支持的字体
<a name="supported-fonts"></a>

API 中支持以下字体：
+ Amazon Ember 粗体
+ Amazon Ember 粗体斜体
+ Amazon Ember 粗体、Noto Sans 粗体
+ Amazon Ember 粗体、Noto Sans 粗体、Noto Sans Arabic 粗体
+ Amazon Ember Condensed RC BdItalic
+ Amazon Ember Condensed RC 粗体
+ Amazon Ember Condensed RC 粗体斜体
+ Amazon Ember Condensed RC 粗体、Noto Sans 粗体
+ Amazon Ember Consending RC 粗体、Noto Sans 粗体、Noto Sans
+ Amazon Ember Condensed RC Light
+ Amazon Ember Condensed RC Light 斜体
+ Amazon Ember Condensed RC LtItalic
+ Amazon Ember Condensed RC 常规
+ Amazon Ember Condensed RC 常规斜体
+ Amazon Ember Condensed RC 常规、Noto Sans 常规
+ Amazon Ember Condensed RC 常规、Noto Sans 常规、Noto Sans Arabic Condensed 常规
+ Amazon Ember Condensed RC RgItalic
+ Amazon Ember Condensed RC ThItalic
+ Amazon Ember Condensed RC Thin
+ Amazon Ember Condensed RC Thin 斜体
+ Amazon Ember Heavy
+ Amazon Ember Heavy 斜体
+ Amazon Ember Light
+ Amazon Ember Light 斜体
+ Amazon Ember 中等
+ Amazon Ember 中等斜体
+ Amazon Ember 中等、Noto Sans 中等
+ Amazon Ember 中等、Noto Sans 中等、Noto Sans Arabic 中等
+ Amazon Ember 常规
+ Amazon Ember 常规斜体
+ Amazon Ember 常规斜体、Noto Sans 斜体
+ Amazon Ember 常规斜体、Noto Sans 斜体、Noto Sans Arabic 常规
+ Amazon Ember 常规、Noto Sans 常规
+ Amazon Ember 常规、Noto Sans 常规、Noto Sans Arabic 常规
+ Amazon Ember Thin
+ Amazon Ember Thin 斜体
+ AmazonEmberCdRC\$1Bd
+ AmazonEmberCdRC\$1BdIt
+ AmazonEmberCdRC\$1Lt
+ AmazonEmberCdRC\$1LtIt
+ AmazonEmberCdRC\$1Rg
+ AmazonEmberCdRC\$1RgIt
+ AmazonEmberCdRC\$1Th
+ AmazonEmberCdRC\$1ThIt
+ AmazonEmber\$1Bd
+ AmazonEmber\$1BdIt
+ AmazonEmber\$1He
+ AmazonEmber\$1HeIt
+ AmazonEmber\$1Lt
+ AmazonEmber\$1LtIt
+ AmazonEmber\$1Md
+ AmazonEmber\$1MdIt
+ AmazonEmber\$1Rg
+ AmazonEmber\$1RgIt
+ AmazonEmber\$1Th
+ AmazonEmber\$1ThIt
+ Noto Sans 黑体
+ Noto Sans 黑体斜体
+ Noto Sans 粗体
+ Noto Sans 粗体斜体
+ Noto Sans 超粗
+ Noto Sans 超粗斜体
+ Noto Sans Extra Light
+ Noto Sans Extra Light 斜体
+ Noto Sans 斜体
+ Noto Sans Light
+ Noto Sans Light 斜体
+ Noto Sans 中等
+ Noto Sans 中等斜体
+ Noto Sans 常规
+ Noto Sans 半粗
+ Noto Sans 半粗斜体
+ Noto Sans Thin
+ Noto Sans Thin 斜体
+ NotoSans-Bold
+ NotoSans-Italic
+ NotoSans-Medium
+ NotoSans-Regular
+ Open Sans 常规、Arial Unicode MS 常规

## 了解请求
<a name="glyphs-understand-the-request"></a>

该请求接受两个必需的 URI 参数，即 `FontStack` 和 `FontUnicodeRange`，它们确定字形的字体和 Unicode 范围。`FontStack` 参数指定要使用的字体，而 `FontUnicodeRange` 定义要获取的字符范围。该请求不包含正文，仅关注实现其功能的 URI 参数。
+ **`FontStack`**：指定要检索的字体堆栈的名称。示例：“Amazon Ember 粗体、Noto Sans 粗体”。
+ **`FontUnicodeRange`**：要下载字形的 Unicode 字符范围。该范围必须是 256 的倍数区间。示例：“0-255”。

## 了解响应
<a name="glyphs-understand-the-response"></a>

该响应以二进制 blob 的形式返回字形数据，并提供用于缓存、内容类型、ETag 和定价信息的 HTTP 标头。字形数据以二进制 blob 的形式返回，以便在地图上渲染，而标头则提供用于有效处理响应的额外元数据。
+ **`CacheControl`**：指示客户端对响应的配置进行缓存。
+ **`ContentType`**：指定响应正文的格式，指明所返回字形数据的类型。
+ **`ETag`**：字形版本的标识符，用于进行缓存验证。
+ **`PricingBucket`**：表示与请求关联的定价层级。
+ **`Blob`**：以二进制 blob 形式返回的字形数据，用于渲染地图文本。

# 静态地图
<a name="static-maps"></a>

**注意**  
静态地图仅支持标准和卫星风格。有关更多信息，请参阅 [AWS 地图样式和功能](map-styles.md)。

静态地图提供地理数据的预渲染展示，您可以根据应用程序的需求，选择叠加标记（或图钉）、路线和多边形区域。静态地图允许您根据可自定义的参数和数据输入，生成静态（非交互式）地图图像。通过自定义叠加层、形状或应用自定义样式，静态地图使您能够创建满足特定需求的地图可视化效果，从而提升最终用户体验并有效地传达地理信息。服务器对请求的地图图像进行自定义，并将其以 JPEG 文件的形式发送给客户端。您可以通过编程方式请求并生成满足您特定要求的地图图像。

*GetStaticMap API* 根据指定参数（例如中心坐标、边界框或叠加层）生成地图的静态图像。该 API 允许对地图功能和样式进行自定义，以便在没有交互式地图功能的 Web 或移动应用程序中使用。

有关更多信息，请参阅[GetStaticMap](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetStaticMap.html)《*亚马逊定位服务 API 参考*》。

有关此 API 的请求、响应、cURL 和 CLI 命令示例，请参阅[如何使用静态地图](https://docs.aws.amazon.com/location/latest/developerguide/static-maps-how-to.html)。

## 常见使用案例
<a name="static-maps-use-cases"></a>
+ **Web 或移动应用程序中的嵌入式地图：**静态地图图像能够有效嵌入 Web 或移动应用程序中，通过非交互式地图提供位置、路线或兴趣点的可视化效果，从而减少加载时间和数据使用量。例如，搜索引擎（例如雅虎）显示地图图像以及搜索结果 POIs。
+ **电子邮件中的位置详情：**静态地图图像可用于通过电子邮件共享位置信息，以帮助您的最终用户了解电子邮件的上下文。例如，送餐或拼车应用程序会使用静态地图图像在行程结束后的电子邮件或配送电子邮件中显示取货/送货（或上车/下车）地点、路线或周边区域，并在电子邮件中附上账单和明细。
+ **营销材料和印刷文档：**可以将自定义的静态地图图像整合到宣传册、传单或其他印刷材料中，从而以具有视觉吸引力的形式呈现与内容相关的地理信息。

## 了解请求
<a name="static-maps-understanding-request"></a>

该请求包含可选的 URI 参数（例如 `BoundedPositions`、`BoundingBox` 和 `Center` 等），用于定义地图的可见区域和叠加层。`Height` 和 `Width` 是定义图像尺寸时的必需参数。要了解更多信息，请参阅 [自定义静态地图](customizing-static-maps.md) 和 [静态地图上的叠加](overlaying-static-map.md)。
+ `BoundedPositions`：要包含在图像中的坐标。
+ `BoundingBox`：定义地图西南边缘和东北边缘的坐标。
+ `Height`：指定图像的高度。
+ `Width`：指定图像的宽度。
+ `GeoJsonOverlay`：用于添加叠加层的有效 GeoJSON 对象。

## 了解响应
<a name="static-maps-understanding-response"></a>

该响应包含 `CacheControl`、`ContentType` 和 `ETag` 之类的标头，并以 JPEG 或 PNG 格式的二进制 blob 形式返回静态地图。标头包含静态图像的缓存控制、内容类型和版本等元数据。
+ `CacheControl`：指定地图图像的缓存配置。
+ `ContentType`：表示地图图像的格式（JPEG 或 PNG）。
+ `ETag`：静态地图图像版本的标识符。
+ `Blob`：以 JPEG 或 PNG 格式呈现地图图像。

# 自定义静态地图
<a name="customizing-static-maps"></a>

**注意**  
静态地图仅支持卫星样式。有关更多信息，请参阅 [AWS 地图样式和功能](map-styles.md)。

本节概述了如何对使用 Amazon Location Service 生成的静态地图进行自定义。它涵盖了多种功能，例如调整地图的位置、大小、语言、比例尺、叠加层和属性，使您可以根据自身的具体要求定制地图。

欲了解更多信息，请参阅[GetStaticMap](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetStaticMap.html)《*亚马逊定位服务 API 参考*》。

## 位置
<a name="customizing-static-maps-position"></a>

位置支持定义地图的中心和边界。您可以通过设置中心坐标、边界框或使用缩放级别来控制地图的焦点，从而确定要显示的区域范围。要了解其工作原理，请参阅[如何获取特定位置的静态地图](get-static-map-specific-position.md)。
+ `Center`：使用经度和纬度坐标来确定地图的中心点。
+ `Radius`：指定将在静态地图上显示的半径（与中心的距离）。
+ `Bounding Box`：定义地图上的一个矩形区域，通过提供左上角和右下角的坐标进行设置。
+ `Zoom`：控制地图的缩放级别。较高缩放级别能在较小区域内显示较多细节，而较低缩放级别则在较大区域内显示较少细节。

## 尺寸和质量
<a name="customizing-static-maps-dimension-quality"></a>

您可以通过设定静态地图的尺寸（高度和宽度）和添加填充来对静态地图的大小和视觉质量进行自定义，从而更好地呈现标记和其他元素。要了解其工作原理，请参阅[如何获取特定尺寸的静态地图](get-static-map-specific-dimension.md)。
+ `Height and Width`：通过定义静态地图图像的高度和宽度（以像素为单位）来指定其大小。
+ `Padding`：在地图边缘周围添加额外空间，以便在放置标记、线条或形状时能有更好的可视化效果。

## 比例尺
<a name="customizing-static-maps-scale"></a>

比例尺能够控制地图的比例，并确定测量距离的单位（公里、英里）。这有助于准确呈现地图的大小和距离关系。要了解其工作原理，请参阅[如何为静态地图添加比例尺](add-scale-static-map.md)。
+ `Scale Unit`：定义地图比例尺的单位（例如，公里或英里），让用户能够准确测量地图上的距离。

## 叠加层
<a name="customizing-static-maps-overlay"></a>

您可以添加标记、用于显示路线的线条、用于显示区域的多边形等。要了解其工作原理，请参阅[如何向静态地图添加标记](add-marker-static-map.md)、[如何向静态地图添加线条](how-to-add-line-static.md)或[如何向静态地图添加路线](how-to-add-route.md)。

# 静态地图上的叠加
<a name="overlaying-static-map"></a>

本节介绍了如何使用 Amazon Location Service 将其他信息叠加到静态地图上。您可以通过添加各种地理特征（例如点、线和多边形）对静态地图进行自定义，以增强地图的可视化表示。Amazon Location Service 支持多种格式，包括 GeoJSON 和紧凑叠加层格式，以提供灵活高效的添加叠加层的方法。

欲了解更多信息，请参阅[GetStaticMap](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetStaticMap.html)《*亚马逊定位服务 API 参考*》。

## 使用 GeoJSON
<a name="overlaying-static-map-geojson"></a>

GeoJSON 是一种多功能格式，支持在静态地图上叠加自定义数据。通过定义点、线和多边形等地理特征，您可以增强地图的可视化表示，为用户提供有价值的背景信息。GeoJSON 得到了广泛支持，在样式设置和自定义地图叠加层方面具有灵活性，因此是显示区域、绘制路线或展示空间关系的理想格式。

借助 Amazon Location Service，您可以利用 GeoJSON 将基于位置的动态功能直接添加到静态地图上。这样便可创建高度可定制的叠加层，这些叠加层可根据您的特定业务需求进行定制。GeoJSON 支持多种几何类型（包括 `Point`、`LineString`、`Polygon` 和 `MultiPolygon`），允许您显示从标记和路线到复杂区域表示等各种特征。

## 颜色
<a name="overlaying-static-map-geojson-colors"></a>

设置 GeoJSON 特征的样式时，您可以灵活地定义颜色。您可以使用不同的格式指定颜色，例如十六进制值（如 \$1ff0000 代表红色），或使用 alpha 透明度（如 \$1ff000080 表示半透明的红色）。这可确保您的叠加层在视觉上与地图样式保持一致。如果未指定颜色，则系统将应用所选地图样式的默认颜色。

## 绘制顺序
<a name="overlaying-static-map-drawing-order"></a>

自定义叠加层按特定顺序绘制，以保持清晰度，避免视觉混乱。在 Amazon Location Service 中，多边形、线和点等叠加特征将显示在底图上方，但在地图标签下方。绘制顺序优先考虑多边形，其次是线，然后是点或标记。

## 测量单位
<a name="overlaying-static-map-measurement-units"></a>

对于 `width` 和 `outline-width` 之类的属性，您可以使用不同的测量单位来指定大小，包括像素（px）、米（m）、公里（km）、英里（mi）和百分比（%）。百分比单位会根据默认值对属性进行调整，从而为叠加层的样式设置提供更大的灵活性。

## 几何类型
<a name="overlaying-static-map-geometry-types"></a>

Amazon Location Service 支持多种 GeoJSON 几何类型，例如 `Point`、`LineString`、`Polygon` 和 `MultiPolygon`。可以使用 GeoJSON 中的属性对象对每种几何类型进行样式设置和调整，从而可以对地图上的标记、路线和区域进行广泛自定义。

## 使用紧凑叠加层
<a name="overlaying-static-map-compact-overlay"></a>

**注意**  
紧凑叠加层支持以下几何类型：点、线和多边形。它不支持 `multiPoint`、`multiLine` 或 `multiPolgyon`。

借助紧凑叠加层选项，您可以使用单个查询参数在静态地图上高效地显示多个几何体。这种精简方法简化了请求格式并缩小了请求的大小，从而使传输叠加层数据更加方便。客户可以在一个查询参数中输入多种几何类型及其相应的样式属性，Amazon Location Service 将通过按指定方式解析和渲染叠加层来处理这项繁重的工作。

使用紧凑叠加层格式时，请注意，请求 URL 的大小存在限制。尽管 Amazon Location Service 优化了查询，但请确保您的请求保持在合理范围内，尤其是在处理多个几何体及其相关属性时。

## Format
<a name="overlaying-static-map-compact-overlay-format"></a>

紧凑叠加层格式的结构如下：`geometry_type:geometry;property_1=value_1;property_2=value_2|geometry_type:geometry;property_1=value_1...`

每种几何图形类型都与其样式属性一起定义。多个几何体通过管道运算符（\$1）进行分隔，每个几何体的各属性通过分号进行分隔。

## 支持的几何类型
<a name="overlaying-static-map-supported-geometry-types"></a>

Amazon Location Service 支持多种几何类型，包括 `Point`、`MultiPoint`、`LineString`、`Polygon` 和 `MultiPolygon`。这些几何类型可在同一查询参数中使用紧凑叠加层格式进行组合和样式设置。

## 样式属性
<a name="overlaying-static-map-styling-properties"></a>

每个几何体均可使用各种样式属性（如颜色、轮廓颜色、大小等）进行自定义。利用这些属性，您可以控制地图上每个几何体的外观，从而确保叠加层符合您的业务需求。

# 操作方法
<a name="maps-how-to"></a>

本节包含有关如何使用地图 API 的各种操作方法指南和示例。

**Topics**
+ [如何使用动态地图](dynamic-maps-how-to.md)
+ [如何使用静态地图](static-maps-how-to.md)

# 如何使用动态地图
<a name="dynamic-maps-how-to"></a>

这些操作方法主题提供了全面的演练，教您如何使用 Amazon Location Service 增强地图应用程序。从显示交互式地图到添加标记、线条和多边形，这些教程演示了如何利用诸如设置地图控件、添加自定义图标和处理实时数据之类的基本功能。此外，这些主题还涵盖了本地化和国际化方面的内容，例如设置首选语言、调整政治观点，以及通过根据用户的位置或视角自定义地图内容来确保遵守当地法律。

每个操作方法都旨在便于访问，并附有使用 MapLibre GL JS 在 Web 应用程序中实现这些功能的 step-by-step说明。无论您的目标是使用自定义图标和弹出窗口打造动态地图体验，还是针对特定的政治视角和语言来定制地图视图，这些示例都将帮助您实现目标，同时确保为不同地区的用户提供丰富的本地化地图绘制体验。这些教程将确保您能够充分利用 Amazon Location Service 的各项功能，涵盖从基本的地图绘制功能到复杂的地缘政治和本地化需求等方面。

**Topics**
+ [如何显示地图](how-to-display-a-map.md)
+ [如何在地图上添加控件](how-to-add-control-on-map.md)
+ [如何在地图上添加标记](how-to-add-marker-on-map.md)
+ [如何在地图上添加图标](how-to-add-icon-on-map.md)
+ [如何在地图上添加线条](how-to-add-line-on-map.md)
+ [如何在地图上添加多边形](how-to-add-polygon-on-map.md)
+ [如何向地图添加弹出窗口](how-to-add-popup-to-map.md)
+ [如何为地图设置首选语言](how-to-set-preferred-language-map.md)
+ [如何设置地图的政治观点](how-to-set-political-view-map.md)
+ [如何在地图上筛选 POI](how-to-filter-poi-map.md)
+ [如何创建地形图](how-to-create-topographic-maps.md)
+ [如何在地图上显示实时路况](how-to-set-real-time-traffic-map.md)
+ [如何创建物流地图](how-to-create-logistic-map.md)
+ [如何在地图上显示公交详情](how-to-show-transit-details-map.md)
+ [如何创建 3D 地图](how-to-create-a-3d-map.md)

# 如何显示地图
<a name="how-to-display-a-map"></a>

Amazon Location Service 支持使用我们的地图样式显示交互式和非交互式地图。请参阅 [AWS 地图样式和功能](map-styles.md)，了解更多信息。

## 交互式地图
<a name="interactive-map"></a>

在本示例中，您将显示一张允许用户缩放、平移、捏合和俯仰的交互式地图。

### 交互式地图代码示例
<a name="interactive-map-web-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [25.24, 36.31], // starting position [lng, lat]
                zoom: 2, // starting zoom
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 将地图平移范围限制在某个区域之内
<a name="restrict-map-panning"></a>

在本示例中，您将限制地图的平移范围，使其不会超出定义的边界。

### 限制地图平移代码示例
<a name="restrict-map-panning-web-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            var bounds = [
                [90.0, -21.943045533438166], // Southwest coordinates
                [146.25, 31.952162238024968] // Northeast coordinates
            ];

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                maxBounds: bounds, // Sets bounds of SE Asia
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 非交互式地图
<a name="non-interactive-map"></a>

在本示例中，您将通过禁用用户交互来显示非交互式地图。

### 非交互式地图代码示例
<a name="non-interactive-map-web-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [25.24, 36.31], // starting position [lng, lat]
                zoom: 2, // starting zoom
                interactive: false, // Disable pan & zoom handlers
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

# 如何在地图上添加控件
<a name="how-to-add-control-on-map"></a>

Amazon Location Service 允许您向地图添加多个控件，包括导航、地理位置、全屏、比例尺和归因控件。
+ **导航控件**：包含缩放按钮和一个指南针。
+ **地理定位控件**：提供一个使用浏览器地理位置 API 在地图上定位用户的按钮。
+ **全屏控件**：包含一个用于切换地图进入和退出全屏模式的按钮。
+ **比例尺控件**：显示地图上某段距离与实际地面相应距离的比率。
+ **归因控件**：显示地图的归因信息。默认情况下，归因控件会扩展（无论地图宽度如何）。

您可以将控件添加到地图的任何角落：左上角、左下角、右下角或右上角。

## 添加地图控件
<a name="add-map-controls"></a>

在以下示例中，您将添加上面列出的地图控件。

### 地图控件代码示例
<a name="web-code-example"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Map Controls</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [-123.13203602550998, 49.28726257639254], // starting position [lng, lat]
                zoom: 10, // starting zoom
                attributionControl: false, // hide default attributionControl in bottom left
            });

            // Adding controls to the map
            map.addControl(new maplibregl.NavigationControl()); // Zoom and rotation controls
            map.addControl(new maplibregl.FullscreenControl()); // Fullscreen control
            map.addControl(new maplibregl.GeolocateControl()); // Geolocation control
            map.addControl(new maplibregl.AttributionControl(), 'bottom-left'); // Attribution in bottom-left
            map.addControl(new maplibregl.ScaleControl(), 'bottom-right'); // Scale control in bottom-right
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 开发人员提示
<a name="developer-tips"></a>

### 导航控件选项
<a name="navigationcontrol-options"></a>

```
new maplibregl.NavigationControl({ 
    showCompass: true, // show or hide compass (default: true)
    showZoom: true // show or hide zoom controls (default: true)
});
```

### 地理定位控件选项
<a name="geolocatecontrol-options"></a>

```
new maplibregl.GeolocateControl({ 
    positionOptions: { enableHighAccuracy: true }, // default: false
    trackUserLocation: true // default: false
});
```

### 归因控件选项
<a name="attributioncontrol-options"></a>

```
new maplibregl.AttributionControl({
    compact: true, // compact (collapsed) mode (default: false)
});
```

### 比例尺控件选项
<a name="scalecontrol-options"></a>

```
new maplibregl.ScaleControl({ 
    maxWidth: 100, // width of the scale (default: 50)
    unit: 'imperial' // imperial or metric (default: metric)
});
```

### 全屏控件选项
<a name="fullscreencontrol-options"></a>

```
map.addControl(new maplibregl.FullscreenControl({
    container: document.querySelector('body') // container for fullscreen mode
}));
```

# 如何在地图上添加标记
<a name="how-to-add-marker-on-map"></a>

使用 Amazon Location，您可以添加固定标记和可拖动标记，还可以根据自己的数据和偏好来自定义标记的颜色。

## 添加固定标记
<a name="add-marker"></a>

### 固定标记代码示例
<a name="web-code-example-fixed-marker"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Add marker on a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";  // e.g., Standard, Monochrome, Hybrid, Satellite  
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [0, 0], // starting position [lng, lat]
                zoom: 1, // starting zoom
            });

            const marker = new maplibregl.Marker() // Create fixed marker
                .setLngLat([85.1376, 25.5941]) // Set coordinates [long, lat] for marker (e.g., Patna, BR, IN)
                .addTo(map); // Add marker to the map
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 添加可拖动标记
<a name="add-draggable-marker"></a>

### 可拖动标记代码示例
<a name="web-code-example-draggable-marker"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Add draggable marker on a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";  // e.g., Standard, Monochrome, Hybrid, Satellite  
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [0, 0], // starting position [lng, lat]
                zoom: 1, // starting zoom
            });

            const marker = new maplibregl.Marker({ draggable: true }) // Create draggable marker
                .setLngLat([85.1376, 25.5941]) // Set coordinates [long, lat] for marker (e.g., Patna, BR, IN)
                .addTo(map); // Add marker to the map
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 更改标记颜色
<a name="change-marker-color"></a>

### 彩色标记代码示例
<a name="web-code-example-change-marker-color"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Adding colorful marker on a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Monochrome";  // e.g., Standard, Monochrome, Hybrid, Satellite  
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [0, 0], // starting position [lng, lat]
                zoom: 1, // starting zoom
            });

            const marker = new maplibregl.Marker({ color: "black" }) // Create colored marker
                .setLngLat([85.1376, 25.5941]) // Set coordinates [long, lat] for marker (e.g., Patna, BR, IN)
                .addTo(map); // Add marker to the map
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 添加多个标记
<a name="add-multiple-markers"></a>

### 多标记代码示例
<a name="web-code-example-multiple-markers"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Adding multiple markers on a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";  // e.g., Standard, Monochrome, Hybrid, Satellite  
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const colorScheme ="Dark"; // e.g., Dark, Light (default)
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?color-scheme=${colorScheme}&key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [0, 0], // starting position [lng, lat]
                zoom: 1, // starting zoom
            });

            const locations = [
                { lng: 85.1376, lat: 25.5941, label: 'Patna', color: '#FF5722' }, 
                { lng: 77.1025, lat: 28.7041, label: 'Delhi', color: '#2196F3' }, 
                { lng: 77.5946, lat: 12.9716, label: 'Bangalore', color: '#FF9800' }, 
                { lng: 78.4867, lat: 17.3850, label: 'Hyderabad', color: '#9C27B0' }, 
                { lng: -87.6298, lat: 41.8781, label: 'Chicago', color: '#4CAF50' }, 
                { lng: -122.3321, lat: 47.6062, label: 'Seattle', color: '#FFC107' }, 
                { lng: 4.3517, lat: 50.8503, label: 'Brussels', color: '#3F51B5' },   
                { lng: 2.3522, lat: 48.8566, label: 'Paris', color: '#E91E63' },   
                { lng: -0.1276, lat: 51.5074, label: 'London', color: '#795548' },  
                { lng: 28.0473, lat: -26.2041, label: 'Johannesburg', color: '#673AB7' },  
                { lng: -123.1216, lat: 49.2827, label: 'Vancouver', color: '#FF5722' }, 
                { lng: -104.9903, lat: 39.7392, label: 'Denver', color: '#FF9800' }, 
                { lng: -97.7431, lat: 30.2672, label: 'Austin', color: '#3F51B5' }  
            ];

            // Loop through the locations array and add a marker for each one
            locations.forEach(location => {           
                const marker = new maplibregl.Marker({ color: location.color, draggable: true }) // Create colored marker
                    .setLngLat([location.lng, location.lat]) // Set longitude and latitude
                    .addTo(map); // Add marker to the map
            }); 
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

# 如何在地图上添加图标
<a name="how-to-add-icon-on-map"></a>

Amazon Location Service 允许在地图上添加图标，最好是 PNG 格式的图标。您可以向特定地理位置添加图标，并根据需要设置其样式。

## 添加静态图标
<a name="add-static-icon"></a>

在本示例中，您将使用外部 URL 通过符号图层在地图上添加图标。

### 静态图标代码示例
<a name="web-code-example-static-icon"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Static icon on map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";  // e.g., Standard, Monochrome, Hybrid, Satellite  
            const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', // container id
                style: styleUrl, // style URL
                center: [-123.1144289, 49.2806672], // starting position [lng, lat] (e.g., Vancouver)
                zoom: 12, // starting zoom
            });

            map.on('load', async () => {
                image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/1/1e/Biking_other.png');
                map.addImage('biking', image.data);
                map.addSource('point', {
                    'type': 'geojson',
                    'data': {
                        'type': 'FeatureCollection',
                        'features': [
                            {
                                'type': 'Feature',
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [-123.1144289, 49.2806672]
                                }
                            }
                        ]
                    }
                });
                map.addLayer({
                    'id': 'points',
                    'type': 'symbol',
                    'source': 'point',
                    'layout': {
                        'icon-image': 'biking',
                        'icon-size': 0.25
                    }
                });
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

# 如何在地图上添加线条
<a name="how-to-add-line-on-map"></a>

借助 Amazon Location Service，您可以将预先记录的 GPS 轨迹作为线串添加到动态地图，也可以将实时 GPS 轨迹添加到动态地图。

## 添加预先记录的线条
<a name="add-pre-recorded-line"></a>

在本示例中，您将预先记录的 GPS 轨迹作为 GeoJSON（main.js）添加到动态地图。为此，您需要向地图添加一个源（如 GeoJSON）和一个带有所选线条样式的图层。

### 预先记录的线条代码示例
<a name="web-code-example-pre-recorded-line"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Add a line on the map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
        <script src='main.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map',
                style: styleUrl,
                center: [-123.126575, 49.290585],
                zoom: 12.5
            });

            map.on('load', () => {
                map.addSource('vancouver-office-to-stanley-park-route', {
                    type: 'geojson',
                    data: routeGeoJSON
                });

                map.addLayer({
                    id: 'vancouver-office-to-stanley-park-route',
                    type: 'line',
                    source: 'vancouver-office-to-stanley-park-route',
                    layout: {
                        'line-cap': 'round',
                        'line-join': 'round'
                    },
                    paint: {
                        'line-color': '#008296',
                        'line-width': 2
                    }
                });
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------
#### [ main.js ]

```
const routeGeoJSON = {
    type: "FeatureCollection",
    features: [
        {
            type: "Feature",
            geometry: {
                type: "LineString",
                coordinates: [
                    [-123.117011, 49.281306],
                    [-123.11785, 49.28011],
                    ...
                    [-123.135735, 49.30106]
                ]
            },
            properties: {
                name: "Amazon YVR to Stanley Park",
                description: "An evening walk from Amazon office to Stanley Park."
            }
        }
    ]
};
```

------

## 实时添加线条
<a name="add-real-time-line"></a>

在本示例中，您将模拟逐个添加新 GPS 坐标以创建实时 GPS 轨迹的过程。这对于跟踪实时数据更新非常有用。

### 实时线条代码示例
<a name="web-code-example-real-time-line"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Add a line on the map in real-time</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
        <script src='main.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map',
                style: styleUrl,
                center: [-123.126575, 49.290585],
                zoom: 12.5
            });

            map.on('load', () => {
                const coordinates = routeGeoJSON.features[0].geometry.coordinates;
                routeGeoJSON.features[0].geometry.coordinates = [coordinates[0], coordinates[20]];

                map.addSource('vancouver-office-to-stanley-park-route', {
                    type: 'geojson',
                    data: routeGeoJSON
                });

                map.addLayer({
                    id: 'vancouver-office-to-stanley-park-route',
                    type: 'line',
                    source: 'vancouver-office-to-stanley-park-route',
                    layout: {
                        'line-cap': 'round',
                        'line-join': 'round'
                    },
                    paint: {
                        'line-color': '#008296',
                        'line-width': 2
                    }
                });

                map.jumpTo({center: coordinates[0], zoom: 14});
                map.setPitch(30);

                let i = 0;
                const timer = window.setInterval(() => {
                    if (i < coordinates.length) {
                        routeGeoJSON.features[0].geometry.coordinates.push(coordinates[i]);
                        map.getSource('vancouver-office-to-stanley-park-route').setData(routeGeoJSON);
                        map.panTo(coordinates[i]);
                        i++;
                    } else {
                        window.clearInterval(timer);
                    }
                }, 100);
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------
#### [ main.js ]

```
const routeGeoJSON = {
    type: "FeatureCollection",
    features: [
        {
            type: "Feature",
            geometry: {
                type: "LineString",
                coordinates: [
                    [-123.117011, 49.281306],
                    [-123.11785, 49.28011],
                    ...
                    [-123.135735, 49.30106]
                ]
            },
            properties: {
                name: "Amazon YVR to Stanley Park",
                description: "An evening walk from Amazon office to Stanley Park."
            }
        }
    ]
};
```

------

## 开发人员提示
<a name="developer-tips"></a>

**适合边界：**可以通过计算线条坐标的边界来使线条适合地图边界：

```
const coordinates = routeGeoJSON.features[0].geometry.coordinates;
const bounds = coordinates.reduce((bounds, coord) => bounds.extend(coord), new maplibregl.LngLatBounds(coordinates[0], coordinates[0]));
map.fitBounds(bounds, { padding: 20 });
```

# 如何在地图上添加多边形
<a name="how-to-add-polygon-on-map"></a>

Amazon Location Service 支持向地图添加多边形。您可以根据业务需求来设置多边形的样式，包括添加填充和边框样式。

## 添加多边形
<a name="add-polygon"></a>

在本示例中，您将向地图添加一个多边形，并使用填充颜色和边框来设置其样式。

### 多边形代码示例
<a name="web-code-example-polygon"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Overlay a Polygon on a Map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
        <script src='main.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map',
                style: styleUrl,
                center: [-123.13203602550998, 49.28726257639254],
                zoom: 16
            });

            map.on('load', () => {
                map.addSource('barclayHeritageSquare', {
                    type: 'geojson',
                    data: barclayHeritageSquare
                });

                map.addLayer({
                    id: 'barclayHeritageSquare-fill',
                    type: 'fill',
                    source: 'barclayHeritageSquare',
                    layout: {},
                    paint: {
                        'fill-color': '#008296',
                        'fill-opacity': 0.25
                    }
                });

                map.addLayer({
                    id: 'barclayHeritageSquare-outline',
                    type: 'line',
                    source: 'barclayHeritageSquare',
                    layout: {},
                    paint: {
                        'line-color': '#008296',
                        'line-width': 2
                    }
                });
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------
#### [ main.js ]

```
const barclayHeritageSquare = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "park_id": 200,
                "park_name": "Barclay Heritage Square",
                "area_ha": 0.63255076039675,
                "park_url": "http://covapp.vancouver.ca/parkfinder/parkdetail.aspx?inparkid=200"
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [-123.1320948511985, 49.287379401361406],
                        [-123.13179672786798, 49.2871908081159],
                        [-123.13148154587924, 49.28739992437733],
                        [-123.1313830551372, 49.28733617069321],
                        [-123.13118648745055, 49.287208851500054],
                        [-123.13128257706838, 49.28714532642171],
                        [-123.13147941881572, 49.28727228533418],
                        ...
                        [-123.13177619357138, 49.28759081706052],
                        [-123.1320948511985, 49.287379401361406]
                    ]
                ]
            }
        }
    ]
};
```

------

# 如何向地图添加弹出窗口
<a name="how-to-add-popup-to-map"></a>

Amazon Location Service 支持向地图添加弹出窗口。您可以添加简单的弹出窗口、标记上的点击触发式弹出窗口、悬停触发式弹出窗口，以及用于多个标记的弹出窗口。

## 添加您的第一个弹出窗口
<a name="add-first-popup"></a>

在本示例中，您将添加您的第一个弹出窗口。

### 第一个弹出窗口代码示例
<a name="first-popup-web"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map',
                style: styleUrl,
                center: [-96, 37.8],
                zoom: 2
            });

            const popup = new maplibregl.Popup({closeOnClick: false})
                .setLngLat([-96, 37.8])
                .setHTML('<h1>Hello USA!</h1>')
                .addTo(map);
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 点击标记时显示弹出窗口
<a name="show-popup-on-click"></a>

在本示例中，您将向一个标记附加弹出窗口，并在点击时显示该弹出窗口。

### 点击标记时弹出窗口示例
<a name="click-popup-web"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const centralpark_nyc = [-73.966,40.781];
            const map = new maplibregl.Map({
                container: 'map',
                style: styleUrl,
                center: centralpark_nyc,
                zoom: 13
            });

            const popup = new maplibregl.Popup({offset: 25}).setText(
                'Central Park, NY is one of the most filmed locations in the world, appearing in over 240 feature films since 1908.'
            );

            new maplibregl.Marker()
                .setLngLat(centralpark_nyc)
                .setPopup(popup)
                .addTo(map);
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 将光标悬停在标记上时显示弹出窗口
<a name="show-popup-on-hover"></a>

在本示例中，您将向一个标记附加弹出窗口，并在将光标悬停在标记上时显示该弹出窗口。

### 光标悬停在标记上时弹出窗口示例
<a name="hover-popup-web"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "<API_KEY>";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            const centralpark_nyc = [-73.966,40.781];
            const map = new maplibregl.Map({
                container: 'map',
                style: styleUrl,
                center: centralpark_nyc,
                zoom: 13
            });

            const marker = new maplibregl.Marker().setLngLat([-73.968285, 40.785091]).addTo(map);
            const popup = new maplibregl.Popup({ offset: 25 })
                .setHTML("<h3>Central Park</h3><p>Welcome to Central Park, NYC!</p>");

            const markerElement = marker.getElement();
            markerElement.addEventListener('mouseenter', () => {
                popup.setLngLat([-73.968285, 40.785091]).addTo(map);
            });
            markerElement.addEventListener('mouseleave', () => {
                popup.remove();
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 点击多个标记时显示弹出窗口
<a name="popup-on-multiple-markers"></a>

在本示例中，您将向多个标记附加弹出窗口，并在点击时显示该弹出窗口。

### 点击多个标记时弹出窗口示例
<a name="popup-on-multiple-markers-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div id="map"></div>
        <script>
            const apiKey = "Your API Key";
            const mapStyle = "Monochrome";  
            const awsRegion = "eu-central-1";
            const colorScheme ="Light";
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?color-scheme=${colorScheme}&key=${apiKey}`;

            const map = new maplibregl.Map({
                container: 'map', 
                style: styleUrl, 
                center: [-123.126979, 49.2841563],
                zoom: 15,
                minZoom: 13,
                maxZoom: 17
            });

            const locations = [
                { id: 1, lat: 49.281108, lng: -123.117049, name: "Amazon - YVR11 office" },
                { id: 2, lat: 49.285580, lng: -123.115806, name: "Amazon - YVR20 office" },
                { id: 3, lat: 49.281661, lng: -123.114174, name: "Amazon - YVR14 office" },
                { id: 4, lat: 49.280663, lng: -123.114379, name: "Amazon - YVR26 office" },
                { id: 5, lat: 49.285343, lng: -123.129119, name: "Amazon - YVR25 office" }
            ];

            const geojson = {
                type: "FeatureCollection",
                features: locations.map(location => ({
                    type: "Feature",
                    properties: { id: location.id, name: location.name },
                    geometry: {
                        type: "Point",
                        coordinates: [location.lng, location.lat]
                    }
                }))
            };
            
            map.on('load', async () => {
                try {
                    const image = await loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Amazon_Web_Services_Logo.svg/1200px-Amazon_Web_Services_Logo.svg.png');
                    map.addImage('aws', image);

                    map.addSource('places', { type: 'geojson', data: geojson });

                    map.addLayer({
                        'id': 'places',
                        'type': 'symbol',
                        'source': 'places',
                        'layout': {
                            'icon-image': 'aws',
                            'icon-size': 0.025,
                            'icon-allow-overlap': true
                        }
                    });

                    const popup = new maplibregl.Popup({ closeButton: false, closeOnClick: false });

                    map.on('click', 'places', (e) => {
                        map.getCanvas().style.cursor = 'pointer';
                        const coordinates = e.features[0].geometry.coordinates.slice();
                        const name = e.features[0].properties.name;
                        popup.setLngLat(coordinates).setHTML(name).addTo(map);
                    });

                    map.on('mouseleave', 'places', () => {
                        map.getCanvas().style.cursor = '';
                        popup.remove();
                    });
                } catch (error) {
                    console.error('Error loading image:', error);
                }
            });

            async function loadImage(url) {
                return new Promise((resolve, reject) => {
                    const img = new Image();
                    img.crossOrigin = 'anonymous';
                    img.onload = () => resolve(img);
                    img.onerror = (error) => reject(error);
                    img.src = url;
                });
            }
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 将光标悬停在多个标记上时显示弹出窗口
<a name="popup-on-hover-multiple-markers"></a>

在本示例中，您将向多个标记附加弹出窗口，并在将光标悬停在标记上时显示该弹出窗口。

### 光标悬停在多个标记上时弹出窗口示例
<a name="popup-on-hover-multiple-markers-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body>
        <!-- Map container --> 
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "You API Key";
            const mapStyle = "Monochrome";  // eg. Standard, Monochrome, Hybrid, Satellite  
            const awsRegion = "eu-central-1"; // eg. us-east-2, us-east-1, etc.
            const colorScheme ="Light"; // eg Dark, Light (default)
            const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?color-scheme=${colorScheme}&key=${apiKey}`;

            // Initialize the map
            const map = new maplibregl.Map({
                container: 'map', // Container id
                style: styleUrl, // Style URL
                center: [-123.126979, 49.2841563], // Starting position [lng, lat]
                zoom: 15, // Starting zoom
                minZoom: 13, // Minimum zoom level
                maxZoom: 17 // Maximum zoom level
            });

            const locations = [
                { id: 1, lat: 49.281108, lng: -123.117049, name: "Amazon - YVR11 office" },
                { id: 2, lat: 49.285580, lng: -123.115806, name: "Amazon - YVR20 office" },
                { id: 3, lat: 49.281661, lng: -123.114174, name: "Amazon - YVR14 office" },
                { id: 4, lat: 49.280663, lng: -123.114379, name: "Amazon - YVR26 office" },
                { id: 5, lat: 49.285343, lng: -123.129119, name: "Amazon - YVR25 office" }
            ];

            // Convert locations to GeoJSON
            const geojson = {
                type: "FeatureCollection",
                features: locations.map(location => ({
                    type: "Feature",
                    properties: { 
                        id: location.id,
                        name: location.name // Use the name property for popup
                    },
                    geometry: {
                        type: "Point",
                        coordinates: [location.lng, location.lat] // GeoJSON uses [lng, lat]
                    }
                }))
            };
            
            // Add the GeoJSON source and layers when the map loads
            map.on('load', async () => {
                try {
                    // Load the PNG image for the marker
                    const image = await loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Amazon_Web_Services_Logo.svg/1200px-Amazon_Web_Services_Logo.svg.png'); // Ensure this URL points to a valid PNG
                    map.addImage('aws', image);

                    // Add a GeoJSON source
                    map.addSource('places', {
                        type: 'geojson',
                        data: geojson
                    });

                    // Add a layer showing the places with custom icons
                    map.addLayer({
                        'id': 'places',
                        'type': 'symbol',
                        'source': 'places',
                        'layout': {
                            'icon-image': 'aws',
                            'icon-size': 0.025, // Adjust as needed
                            'icon-allow-overlap': true // Allow icons to overlap
                        }
                    });

                    // Create a popup
                    const popup = new maplibregl.Popup({
                        closeButton: false,
                        closeOnClick: false
                    });

                    // Event handlers for mouse enter and leave
                    map.on('mouseenter', 'places', (e) => {
                        map.getCanvas().style.cursor = 'pointer';
                        const coordinates = e.features[0].geometry.coordinates.slice();
                        const name = e.features[0].properties.name;

                        // Set popup content and position
                        popup.setLngLat(coordinates).setHTML(name).addTo(map);
                    });

                    map.on('mouseleave', 'places', () => {
                        map.getCanvas().style.cursor = '';
                        popup.remove();
                    });
                } catch (error) {
                    console.error('Error loading image:', error);
                }
            });

            // Helper function to load the image
            async function loadImage(url) {
                return new Promise((resolve, reject) => {
                    const img = new Image();
                    img.crossOrigin = 'anonymous'; // Enable CORS
                    img.onload = () => resolve(img);
                    img.onerror = (error) => reject(error);
                    img.src = url;
                });
            }
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; } 
html, body, #map { height: 100%; }
```

------

# 如何为地图设置首选语言
<a name="how-to-set-preferred-language-map"></a>

Amazon Location Service 允许您通过更新特定语言的样式描述符，在客户端设置首选语言。您可以设置首选语言，并在嵌入的位置以该语言显示内容。否则，将回退到另一种语言。

**注意**  
有关更多信息，请参阅 [本地化和国际化](maps-localization-internationalization.md)。

## 将首选语言设置为日语并显示日本地图
<a name="set-preferred-language-japanese"></a>

在本示例中，您将设置更新样式，以日语（ja）显示地图标签。

### 将首选语言设置为日语的示例
<a name="set-preferred-language-japanese-example"></a>

------
#### [ index.html ]

```
<html>
<head>
    <link href="https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="main.js"></script>
</head>
<body>
    <div id="map" />
    <script>
        const apiKey = "Add Your Api Key";
        const mapStyle = "Standard";
        const awsRegion = "eu-central-1";
        const initialLocation = [139.76694, 35.68085]; //Japan   
        
        async function initializeMap() {
            // get updated style object for preferred language. 
            const styleObject = await getStyleWithPreferredLanguage("ja");
            // Initialize the MapLibre map with the fetched style object
            const map = new maplibregl.Map({
                container: 'map',
                style: styleObject,
                center: initialLocation,
                zoom: 15,
                hash:true,
            });
            map.addControl(new maplibregl.NavigationControl(), "top-left");
        
            return map; 
        }
  
        initializeMap();
    </script>
</body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; }
#map { height: 100vh; }
```

------
#### [ main.js ]

```
async function getStyleWithPreferredLanguage(preferredLanguage) {
    const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

    return fetch(styleUrl)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        })
        .then(styleObject => {
            if (preferredLanguage !== "en") {
                styleObject = setPreferredLanguage(styleObject, preferredLanguage);
            }

            return styleObject;
        })
        .catch(error => {
            console.error('Error fetching style:', error);
        });
}

const setPreferredLanguage = (style, language) => {
    let nextStyle = { ...style };

    nextStyle.layers = nextStyle.layers.map(l => {
        if (l.type !== 'symbol' || !l?.layout?.['text-field']) return l;
        return updateLayer(l, /^name:([A-Za-z\-\_]+)$/g, `name:${language}`);
    });

    return nextStyle;
};

const updateLayer = (layer, prevPropertyRegex, nextProperty) => {
    const nextLayer = {
        ...layer,
        layout: {
            ...layer.layout,
            'text-field': recurseExpression(
                layer.layout['text-field'],
                prevPropertyRegex,
                nextProperty
            )
        }
    };
    return nextLayer;
};

const recurseExpression = (exp, prevPropertyRegex, nextProperty) => {
    if (!Array.isArray(exp)) return exp;
    if (exp[0] !== 'coalesce') return exp.map(v =>
        recurseExpression(v, prevPropertyRegex, nextProperty)
    );

    const first = exp[1];
    const second = exp[2];

    let isMatch =
    Array.isArray(first) &&
    first[0] === 'get' &&
    !!first[1].match(prevPropertyRegex)?.[0];

    isMatch = isMatch && Array.isArray(second) && second[0] === 'get';
    isMatch = isMatch && !exp?.[4];

    if (!isMatch) return exp.map(v =>
        recurseExpression(v, prevPropertyRegex, nextProperty)
    );

    return [
        'coalesce',
        ['get', nextProperty],
        ['get', 'name:en'],
        ['get', 'name']
    ];
};
```

------

## 根据最终用户的浏览器语言设置首选语言
<a name="set-preferred-language-browser"></a>

在本示例中，您将设置更新样式，以用户的设备语言显示地图标签。

### 根据浏览器语言设置首选语言的示例
<a name="set-preferred-language-browser-code"></a>

------
#### [ index.html ]

```
<html>
<head>
    <link href="https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="main.js"></script>
</head>
<body>
    <div id="map" />
    <script>
        const apiKey = "Add Your Api Key";
        const mapStyle = "Standard";
        const awsRegion = "eu-central-1";
        const initialLocation = [139.76694, 35.68085]; //Japan     
        const userLanguage = navigator.language || navigator.userLanguage;
        const languageCode = userLanguage.split('-')[0];

        async function initializeMap() {
             const styleObject = await getStyleWithPreferredLanguage(languageCode);
             const map = new maplibregl.Map({
                 container: 'map',
                 style: styleObject,
                 center: initialLocation,
                 zoom: 15,
                 hash:true,
             });
             map.addControl(new maplibregl.NavigationControl(), "top-left");
             return map; 
        }

        initializeMap();
    </script>
</body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; }
#map { height: 100vh; }
```

------
#### [ main.js ]

```
async function getStyleWithPreferredLanguage(preferredLanguage) {
    const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

    return fetch(styleUrl)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        })
        .then(styleObject => {
            if (preferredLanguage !== "en") {
                styleObject = setPreferredLanguage(styleObject, preferredLanguage);
            }

            return styleObject;
        })
        .catch(error => {
            console.error('Error fetching style:', error);
        });
}

const setPreferredLanguage = (style, language) => {
    let nextStyle = { ...style };

    nextStyle.layers = nextStyle.layers.map(l => {
        if (l.type !== 'symbol' || !l?.layout?.['text-field']) return l;
        return updateLayer(l, /^name:([A-Za-z\-\_]+)$/g, `name:${language}`);
    });

    return nextStyle;
};

const updateLayer = (layer, prevPropertyRegex, nextProperty) => {
    const nextLayer = {
        ...layer,
        layout: {
            ...layer.layout,
            'text-field': recurseExpression(
                layer.layout['text-field'],
                prevPropertyRegex,
                nextProperty
            )
        }
    };
    return nextLayer;
};

const recurseExpression = (exp, prevPropertyRegex, nextProperty) => {
    if (!Array.isArray(exp)) return exp;
    if (exp[0] !== 'coalesce') return exp.map(v =>
        recurseExpression(v, prevPropertyRegex, nextProperty)
    );

    const first = exp[1];
    const second = exp[2];

    let isMatch =
    Array.isArray(first) &&
    first[0] === 'get' &&
    !!first[1].match(prevPropertyRegex)?.[0];

    isMatch = isMatch && Array.isArray(second) && second[0] === 'get';
    isMatch = isMatch && !exp?.[4];

    if (!isMatch) return exp.map(v =>
        recurseExpression(v, prevPropertyRegex, nextProperty)
    );

    return [
        'coalesce',
        ['get', nextProperty],
        ['get', 'name:en'],
        ['get', 'name']
    ];
};
```

------

# 如何设置地图的政治观点
<a name="how-to-set-political-view-map"></a>

您可以使用 Amazon Location Service 设置政治观点，确保您的应用程序符合当地法律。您可以设置政治观点，从不同的政治视角来比较地图。

**注意**  
有关更多信息，请参阅 [本地化和国际化](maps-localization-internationalization.md)。

## 设置政治观点并与国际视角进行比较
<a name="set-political-view"></a>

在本示例中，您将根据两种不同的政治观点创建和比较地图：一种是国际视角，另一种是土耳其对塞浦路斯的立场。

### 政治观点比较示例
<a name="set-political-view-compare-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Display a map</title>
        <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
        <script src="https://unpkg.com/@mapbox/mapbox-gl-sync-move@0.3.1"></script>
        <script src='main.js'></script>
    </head>
    <body>
        <!-- Map container -->
        <div class="maps">
        <div id="internationalView"></div>
        <div id="turkeyView"></div>
        </div>
        <script>

            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "eu-central-1";

            // International perspective without political-view query parameter
            const internationalViewMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

            // Turkey perspective with political-view query parameter
            const turkeyViewMapStyleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?political-view=TUR&key=${apiKey}`;

            const internationalViewMap = new maplibregl.Map({
                container: 'internationalView', // container id
                style: internationalViewMapStyleUrl, // style URL
                center: [33.0714561, 35.1052139], // starting position [lng, lat]
                zoom: 7.5,
                validateStyle: false, // Disable style validation for faster map load
            });

            const turkeyViewMap = new maplibregl.Map({
                container: 'turkeyView', // container id
                style: turkeyViewMapStyleUrl, // style URL
                center: [33.0714561, 35.1052139],
                zoom: 7.5,
                validateStyle: false, // Disable style validation for faster map load
            });

            // Sync map zoom and center
            syncMaps(internationalViewMap, turkeyViewMap);

            // Informational popup for international view
            new maplibregl.Popup({closeOnClick: false})
                .setLngLat([33, 35.5])
                .setHTML('<h4>International view <br> recognizes <br> Cyprus</h4>')
                .addTo(internationalViewMap);

            // Informational popup for Turkey's view
            new maplibregl.Popup({closeOnClick: false})
                .setLngLat([33, 35.5])
                .setHTML('<h4>Turkey does not <br> recognize <br> Cyprus</h4>')
                .addTo(turkeyViewMap);
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body { height: 100%; }
#internationalView, #turkeyView { height: 100%; width: 100%; }
.maps {
    display: flex;
    width: 100%;
    height: 100%;
}
```

------

# 如何在地图上筛选 POI
<a name="how-to-filter-poi-map"></a>

Amazon Location Service 允许您选择与您的用例相关的 POI (point-of-interest) 类别。请参阅[丰富的 POI](https://docs.aws.amazon.com/location/latest/developerguide/standard-map-style.html#rich-poi)，了解有关标准地图样式的更多信息 

## 筛选 POI
<a name="test-collapse-me"></a>

在本示例中，您将显示一张允许用户按 POI 类别进行筛选的交互式地图。

------
#### [ Index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>POI demo</title>
        <meta property="og:description" content="" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css" />
        <link rel='stylesheet' href='style.css' />
        <script src="https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js"></script>

    </head>
    <body>

        <div id="map"></div>
        <ul id="buttons"></ul>
        <script>
            // -------------------------------------------------------------------------------------------
            // Function to set layer state
            // -------------------------------------------------------------------------------------------

            const initialLayerState = {
                Buildings: {
                    layers: ['poi_900_areas_buildings'],
                    visibility: 'visible'
                },
                'Business & Services': {
                    layers: ['poi_700_business_services'],
                    visibility: 'visible'
                },
                Shopping: { layers: ['poi_600_shopping'], visibility: 'visible' },
                'Leisure & Outdoors': {
                    layers: ['poi_550_leisure_outdoor'],
                    visibility: 'visible'
                },
                Facilities: { layers: ['poi_800_facilities'], visibility: 'visible' },
                Transit: { layers: ['poi_400_transit'], visibility: 'visible' },
                'Sights & Museums': {
                    layers: ['poi_300_sights_museums'],
                    visibility: 'visible'
                },
                'Food & Drink': {
                    layers: ['poi_100_food_drink'],
                    visibility: 'visible'
                },
                'Going Out & Entertainment': {
                    layers: ['poi_200_going_out_entertainment'],
                    visibility: 'visible'
                },
                Accommodations: {
                    layers: ['poi_500_accommodations'],
                    visibility: 'visible'
                },
                Parks: { layers: ['poi_landuse_park'], visibility: 'visible' },
                'Public Complexes': {
                    layers: ['poi_landuse_public_complex'],
                    visibility: 'visible'
                }
            };

            // -------------------------------------------------------------------------------------------
            // Setup auth and state
            // -------------------------------------------------------------------------------------------

            let state = { ...initialLayerState };

                const API_KEY = "<api key>"; // check how to create api key for Amazon Location
                const AWS_REGION = "eu-central-1"; // Replace with your AWS region

                const mapStyle = "Standard";
                const colorScheme = "Light";


            // Style URL
            const styleUrl = `https://maps.geo.${AWS_REGION}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${API_KEY}&color-scheme=${colorScheme}`;


            // Render the map with the stylesheet
            map = new maplibregl.Map({
                container: 'map',
                style: styleUrl,
                center: [-73.966148, 40.781803],
                zoom: 17
            });

            const buttonContainer = document.getElementById('buttons');

            for (const category of Object.keys(state)) {
                const newButton = document.createElement('li');
                newButton.classList.add('button');
                newButton.classList.add('active');
                newButton.id = category;

                // Each config has a label
                newButton.textContent = category;

                // On click, we want to switch the value between 'on' and 'off'
                // We could check the config for available options in more complex cases
                newButton.onclick = () => {
                    onClickCategory(category);
                };

                // Append the button to our button container
                buttonContainer.appendChild(newButton);
            }

            // -------------------------------------------------------------------------------------------
            // LAYER VISIBILITY FUNCTION
            // -------------------------------------------------------------------------------------------

            // On click, get the stylesheet, update the language, and set the style
            const onClickCategory = category => {
                const categoryState = state[category];
                const { visibility, layers } = categoryState;

                let nextState;

                // For active button styling
                const activeButton = document.getElementById(category);

                if (visibility === 'visible') {
                    nextState = 'none';
                    activeButton.classList.remove('active');
                } else {
                    nextState = 'visible';
                    activeButton.classList.add('active');
                }

                layers.forEach(id =>
                    map.setLayoutProperty(id, 'visibility', nextState)
                );

                state[category].visibility = nextState;
            };
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body {
    margin: 0;
    padding: 0;
}
html,
body,
#map {
    height: 100%;
}


#buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0;
    min-width: 100px;
    max-height: calc(100% - 2rem);
    overflow: auto;
    padding: 1rem;
    background-color: white;
    margin: 0;
}

.button {
    display: inline-block;
    cursor: pointer;
    padding: 8px;
    border-radius: 3px;
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: #8a8a8a;
    font-family: sans-serif;
    font-weight: bold;
}

.button:first-child {
    margin-top: 0;
}

.active {
    background: #ee8a65;
}
```

------

# 如何创建地形图
<a name="how-to-create-topographic-maps"></a>

Amazon Location Service 允许您使用地形和等高线密度要素创建地形图，以可视化海拔变化和地理特征。

## 显示山体阴影
<a name="show-hillshade"></a>

Terrain 功能允许您对山体阴影、海拔变化和相关的地理要素进行可视化。

### 山体阴影示例
<a name="hillshade-example"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Terrain Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?terrain=Hillshade&key=${apiKey}`,
                center: [-119.5383, 37.8651], // Yosemite coordinates for terrain visibility
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 使用等高线密度线显示高程
<a name="show-contour-density"></a>

Amazon Location Service 允许您在地图中添加等高线密度功能。这提供了地理陡度和海拔变化的可视化。

### 等高线密度示例
<a name="contour-density-example"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Contour Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?contour-density=Medium&key=${apiKey}`,
                center: [-119.3047, 37.7887], 
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

## 同时显示山体阴影线和等高线密度线
<a name="show-hillshade-contour"></a>

使用 Amazon Location Service，您可以在地图上组合山体阴影和等高线密度功能，以实现全面的地形可视化。这可以增强深度感知能力，并全面了解地形变化和地形特征。

### 带有等高线密度的山体阴影示例
<a name="hillshade-contour-example"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hillshade and Contour Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?contour-density=Medium&terrain=Hillshade&key=${apiKey}`,
                center: [-119.3047, 37.7887],
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```

------

# 如何在地图上显示实时路况
<a name="how-to-set-real-time-traffic-map"></a>

 使用 Amazon Location Service，您可以在地图上添加交通要素。它提供实时交通数据，以显示当前的交通状况，例如当前的道路拥堵、施工和事故，从而帮助您做出路线选择。

## 绘制一张包含实时路况的地图
<a name="how-to-set-real-time-traffic"></a>

此示例说明如何使用实时交通数据创建地图。

### 实时流量示例
<a name="how-to-set-real-time-traffic-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Traffic Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?traffic=All&key=${apiKey}`,
                center: [-74.0060 ,40.7128], // New York City coordinates for traffic visibility
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}
```

------

# 如何创建物流地图
<a name="how-to-create-logistic-map"></a>

该 TravelModes 功能允许您使用亚马逊定位服务（Amazon Location Service）构建物流地图。 TravelModes 显示卡车导航的相关路线信息以及相关的道路限制。使用 [Tran TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-show-transit-details-map.html) sit 显示公共交通详情。

## 使用 Truck 创建地图 TravelMode
<a name="how-to-create-truck-map"></a>

此示例说明如何使用`Truck``TravelMode`为物流路径创建地图。

### 卡车示例
<a name="how-to-create-truck-map-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Truck Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?travel-modes=Truck&key=${apiKey}`,
                center: [-74.0060 ,40.7128],
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}
```

------

# 如何在地图上显示公交详情
<a name="how-to-show-transit-details-map"></a>

Amazon Location Service 允许您在地图上添加公交功能。`Transit``TravelMode`显示公共交通的路线信息，例如颜色编码的火车线路。另请查看如何设置[物流](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-logistic-map.html)以 TravelMode获取其他选项。

## 创建包含公交详情的地图
<a name="how-to-show-transit-map"></a>

此示例说明如何使用公共交通工具公交创建包含公交详细信息的地图。 TravelMode 

### 公交示例
<a name="how-to-show-transit-map-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Transit Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?travel-modes=Transit&key=${apiKey}`,
                center: [-74.0060 ,40.7128],
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}
```

------

# 如何创建 3D 地图
<a name="how-to-create-a-3d-map"></a>

Amazon Location Service 允许您`Terrain3D`向地图添加三维特征，例如将高程数据显示为三维表面，或者`Buildings3D`显示具有高度和体积的城市结构。

## 创建包含三维地形细节的地图
<a name="how-to-show-3d-terrain-map"></a>

此示例说明如何使用`Terrain3D`参数创建地图。

### Terrain3D 示例
<a name="how-to-show-3d-terrain-map-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3D Terrain</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?terrain=Terrain3D&key=${apiKey}`,
                center: [7.6583, 45.9763],
                zoom: 12,
                pitch: 60, // Tilt angle (0-85 degrees)
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}
```

------

## 创建包含三维建筑物细节的地图
<a name="how-to-show-3d-buildings-map"></a>

此示例说明如何使用`Buildings3D`参数创建地图。

### Builds3D 示例
<a name="how-to-show-3d-buildings-map-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3D Buildings</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style:
                `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?buildings=Buildings3D&key=${apiKey}`,
                center: [7.6583, 45.9763],
                zoom: 12,
                pitch: 60, // Tilt angle (0-85 degrees)
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}
```

------

## 启用/禁用 Globe 视图
<a name="how-to-enable-disable-globe-view"></a>

此示例说明如何启用或禁用 Globe 视图投影。默认情况下，Globe 视图处于启用状态。

### Globe 视图示例
<a name="how-to-enable-disable-globe-view-code"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Globe View</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style:
                `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`,
                center: [-74.5, 40],
                zoom: 2,
                validateStyle: false, // Disable style validation for faster map load
            });

            map.on('style.load', () => {
                // Globe view is enabled by default
                // To disable globe view, uncomment the next line:
                // map.setProjection({});
            });
        </script>
    </body>
</html>
```

------
#### [ style.css ]

```
body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}
```

------

# 如何使用静态地图
<a name="static-maps-how-to"></a>

这些操作方法主题为使用叠加层和视觉元素对静态地图进行自定义，以及为利用 Amazon Location Service 的地图功能提供了分步指导。每份指南都会引导您完成关键任务，例如调整地图尺寸、在缩放或半径之间进行选择，以及添加各种地理空间元素，例如标记、多边形、线条和邻近圆圈。这些指南采用紧凑格式和 GeoJSON 格式，以确保在样式设置和配置方面具有灵活性。

无论您是在为面向客户的应用程序优化地图，还是进行地理空间分析，这些主题都会为您提供明确的指导，帮助您根据具体要求来定制静态地图。通过仔细研究这些示例，您将了解如何优化地图展示效果，以及如何有效地管理地理数据以满足各种业务需求。

**Topics**
+ [如何获取特定位置的静态地图](get-static-map-specific-position.md)
+ [如何获取特定尺寸的静态地图](get-static-map-specific-dimension.md)
+ [生成静态地图时如何在 radius 和 zoom 之间做出选择](choose-radius-vs-zoom.md)
+ [如何为静态地图添加比例尺](add-scale-static-map.md)
+ [如何向静态地图添加标记](add-marker-static-map.md)
+ [如何向静态地图添加线条](how-to-add-line-static.md)
+ [如何向静态地图添加路线](how-to-add-route.md)
+ [如何向静态地图添加多边形](how-to-add-polygon-static.md)
+ [如何为静态地图设置语言](set-language-static-map.md)
+ [如何向静态地图添加邻近圆圈](how-to-add-proximity-circle.md)

# 如何获取特定位置的静态地图
<a name="get-static-map-specific-position"></a>

在本主题中，您将了解如何根据特定参数从 Amazon Location Service 检索静态地图。您将了解如何为中心位置、边界框和一组有界位置生成静态地图。提供的示例将帮助您自定义地图的宽度、高度和样式。

**注意**  
生成静态地图时必须传递 `map` 或 `map@2x`。

## 获取中心位置的地图图像
<a name="get-map-center-position"></a>

在本示例中，您将创建一个宽度为 `1024`、高度为 `1024` 的地图图像，中心坐标设置为 `-123.1143,49.2763`，其中 `longitude=-123.1143` 且 `latitude=49.2763`，缩放级别为 `15`。

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=15&center=-123.1156126,49.2767046&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of a coastal city with dense urban layout, harbor, and large stadium visible.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-center.png)


------

## 获取边界框的地图图像
<a name="get-map-bounding-box"></a>

在本示例中，您将通过设置东南亚地区的边界框来生成该区域的地图图像。

`bbox` 格式为 `{southwest_longitude},{southwest_latitude},{northeast_longitude},{northeast_latitude}`。

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounding-box=90.00,-21.94,146.25,31.95&key=API_KEY
```

------
#### [ Response image ]

![\[Satellite view of Southeast Asia, showing mainland, islands, and surrounding waters.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-bounding-box.png)


------

## 获取有界位置的地图图像
<a name="get-map-bounded-positions"></a>

在本示例中，您将生成一张覆盖巴黎多个必游之地的地图，每个景点都用其坐标（经度、纬度）进行了标注。有界位置包括：埃菲尔铁塔、卢浮宫博物馆、巴黎圣母院、香榭丽舍大街、凯旋门、圣心大教堂、卢森堡花园、奥赛博物馆、协和广场和巴黎歌剧院。

边界位置的格式为 `{longitude1},{latitude1},{longitude2},{latitude2} ... {longitudeN},{latitudeN}`。

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounded-positions=2.2945,48.8584,2.3376,48.8606,2.3500,48.8529,2.3076,48.8698,2.2950,48.8738,2.3431,48.8867,2.3372,48.8462,2.3266,48.8600,2.3212,48.8656,2.3317,48.8719&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of Paris showing dense urban layout, Seine River, and iconic landmarks.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-bounding-position.png)


------

# 如何获取特定尺寸的静态地图
<a name="get-static-map-specific-dimension"></a>

在本主题中，您将了解如何使用 Amazon Location Service 为静态地图设置尺寸（高度和宽度）。通过自定义地图图像的尺寸，您可以在性能、视觉质量和可用性之间取得平衡。`width` 和 `height` 的最大值均为 1400 像素，最小值为 64 像素。结果的最大大小为 6 MB。

此外，您还可以使用 `bbox` 和 `bounds` 参数以及 `padding` 来确保地图边缘附近的特征能够完全显示出来，而不会被裁剪掉。

## 获取具有特定高度和宽度的地图图像
<a name="get-map-specific-dimension"></a>

在本示例中，您将创建芬兰赫尔辛基的低分辨率和中等分辨率的地图图像。

------
#### [ Request URL for low-resolution thumbnail ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=200&height=200&zoom=11.5&center=24.9460,60.1690&key=API_KEY
```

------
#### [ Response (Thumbnail 200x200) ]

![\[Aerial view of a coastal city with intricate waterways, islands, and urban development.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-specific-dimension-low.png)


------
#### [ Request URL for mid-resolution image ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700&zoom=13&center=24.9460,60.1690&key=API_KEY
```

------
#### [ Response image (700x700) ]

![\[Aerial view of a coastal city with dense urban development, harbors, and surrounding waters.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-specific-dimension-mid.png)


------

## 获取四周均带填充的地图图像
<a name="get-map-with-padding"></a>

在本示例中，您将使用芬兰赫尔辛基的几个必游之地及其坐标（经度、纬度）生成地图，提供带填充和不带填充两种版本。

------
#### [ Request URL with padding ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=150&bounded-positions=24.9526,60.1692,24.9850,60.1465,24.9270,60.1725,24.9226,60.1826,24.9509,60.1675,24.9566,60.1685,24.9457,60.1674,24.9397,60.1719,24.9414,60.1715,24.9387,60.1720&key=API_KEY
```

------
#### [ Response image (with padding) ]

![\[Aerial view of a coastal city with dense urban areas, harbors, and surrounding islands.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-specific-dimension-padding.png)


------
#### [ Request URL without padding ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&bounded-positions=24.9526,60.1692,24.9850,60.1465,24.9270,60.1725,24.9226,60.1826,24.9509,60.1675,24.9566,60.1685,24.9457,60.1674,24.9397,60.1719,24.9414,60.1715,24.9387,60.1720&key=API_KEY
```

------
#### [ Response image (without padding) ]

![\[Aerial view of a coastal city with dense urban areas, harbors, and small islands.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-specific-dimension-no-padding.png)


------

# 生成静态地图时如何在 radius 和 zoom 之间做出选择
<a name="choose-radius-vs-zoom"></a>

在本主题中，您将了解当使用 Amazon Location Service 生成静态地图时，如何在使用 `radius` 或 `zoom` 之间做出选择。`radius` 参数可以更精确地控制覆盖区域，因此非常适合那些已知确切覆盖范围的面向客户的应用程序。当您想要调整所显示细节的级别时，`zoom` 参数更适合用于地理空间分析。

## 使用 radius
<a name="with-radius"></a>

在本示例中，您将使用带有中心位置的 `radius` 参数来创建斯里兰卡的地图图像。

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700&center=80.60596,7.76671&radius=235000&scale-unit=KilometersMiles&key=API_KEY
```

------
#### [ Response image ]

![\[Satellite view of Sri Lanka, showing the teardrop-shaped island nation surrounded by ocean.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-radius.png)


------

## 使用 zoom
<a name="with-zoom"></a>

在本示例中，您将使用带有中心位置的 `zoom` 参数来创建斯里兰卡的地图图像。

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=700&height=700&zoom=8&center=80.60596,7.76671&scale-unit=KilometersMiles&key=API_KEY
```

------
#### [ Response image ]

![\[Satellite view of Sri Lanka, showing the teardrop-shaped island nation surrounded by ocean.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-zoom.png)


------

# 如何为静态地图添加比例尺
<a name="add-scale-static-map"></a>

在本主题中，您将了解如何在通过 Amazon Location Service 生成的静态地图的右下角显示比例尺。比例尺可以显示单个单位（例如 `Miles` 或 `Kilometers`），也可以同时显示两个单位（例如 `KilometersMiles` 或 `MilesKilometers`，其中一个单位显示在顶部，另一个单位显示在底部）。

## 添加显示单个单位的比例尺
<a name="add-scale-single-unit"></a>

在本示例中，您将显示芬兰赫尔辛基的地图，右下角比例尺设置为 `Kilometers`。

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=13.5&center=24.9189564,60.1645772&scale-unit=Kilometers&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of a coastal city with dense urban areas, waterways, and islands.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-scale-single.png)


------

## 添加显示两个单位的比例尺
<a name="add-scale-both-units"></a>

在本示例中，您将显示芬兰赫尔辛基的地图，右下角比例尺上显示 `Kilometers` 和 `Miles`，其中一个单位显示在另一个单位之上。

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=14&center=24.9189564,60.1645772&scale-unit=KilometersMiles&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of a coastal city with dense urban areas, harbors, and islands surrounded by water.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-scale-both.png)


------

# 如何向静态地图添加标记
<a name="add-marker-static-map"></a>

在本主题中，您将了解如何向使用 Amazon Location Service 生成的静态地图添加标记。您可以自定义标记的图标、标签、大小、颜色和其他样式选项。这样便可使用与地图目的相符的视觉提示突出显示特定位置。

## 标记样式
<a name="marker-styling"></a>


| 名称 | 类型 | 默认值 | 描述 | 
| --- | --- | --- | --- | 
| `style` | 字符串 | `marker` | 点几何体的样式。要创建标记，请将该值设置为 `marker`，或不在 GeoJSON 的属性对象中包含 `style` 属性。 | 
| `icon` | 字符串 | `pin` | 标记图标类型。可用值包括：`cp`（邻近圆圈）、`diamond`、`pin`、`poi`、`square`、`triangle`、`bubble`。 | 
| `label` | 字符串 | `<empty>` | 要在坐标处显示的文本。要设置自动标签，请使用以下值：`$alpha`（拉丁字母）或 `$num`（阿拉伯数字）。 | 
| `color` | 颜色 | 取决于样式 | 图标颜色。 | 
| `outline-color` | 颜色 | 取决于样式 | 指定图标轮廓颜色。 | 
| `text-color` | 颜色 | 取决于样式 | 标签文本颜色。 | 
| `text-outline-color` | 颜色 | 取决于样式 | 文本轮廓颜色。 | 
| `outline-width` | 整数 | `0`（已关闭） | 文本轮廓宽度。 | 
| `size` | 字符串 | `medium` | 标签和图标大小。可用值：`small`、`medium`、`large`。 | 

## 向地图图像添加标记
<a name="add-marker-single"></a>

在本示例中，您将在温哥华卑诗体育馆（BC Place）的地图图像上放置一个带有标签的标记。

`Geo JSON`:

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -123.11210,
          49.2767875
        ]
        },
      "properties": {
          "color":"#EE4B2B",
          "size":"large",
          "label":"BC Place, Vancouver",
          "text-color":"#0000FF"
       }
    }
  ]
}
```

`Compact`:

```
point: -123.11210,49.27678;
label=BC Place, Vancouver;
size=large;
text-color=#0000FF;
color=#EE4B2B
```

------
#### [ Request URL ]

使用 GeoJSON 叠加

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=15&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%23EE4B2B%22,%22size%22%3A%22large%22,%22label%22%3A%22BC%20Place,%20Vancouver%22,%22text-color%22%3A%22%230000FF%22%7D,%22geometry%22%3A%7B%22coordinates%22%3A%5B-123.11210974152168,49.27678753813112%5D,%22type%22%3A%22Point%22%7D%7D%5D%7D&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of Vancouver's downtown and harbor, with BC Place stadium marked.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-add-marker.png)


------

## 向地图图像添加多个标记
<a name="add-multiple-markers"></a>

在本示例中，您将使用相应坐标（经度、纬度）为芬兰赫尔辛基的必游之地添加标记。您也可以应用填充来确保地图能够妥善容纳所有标记。

**注意**  
可用的标记图标类型包括：`cp`（对于邻近圆圈）、`diamond, pin, poi, square, triangle, bubble`。

`Geo JSON`:

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "MultiPoint",
        "coordinates": [
          [24.9526, 60.1692],
          [24.9270, 60.1725],
          [24.9226, 60.1826],
          [24.9509, 60.1675],
          [24.9566, 60.1685],
          [24.9457, 60.1674],
          [24.9397, 60.1719],
          [24.9414, 60.1715],
          [24.9387, 60.1720]
        ]
      },
      "properties": {
        "icon":"diamond",
        "label":"$num",
        "size":"large",
        "text-color":"%23972E2B",
        "text-outline-color":"%23FFF",
        "text-outline-width":2
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=150&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22MultiPoint%22,%22coordinates%22%3A%5B%5B24.9526,60.1692%5D,%5B24.927,60.1725%5D,%5B24.9226,60.1826%5D,%5B24.9509,60.1675%5D,%5B24.9566,60.1685%5D,%5B24.9457,60.1674%5D,%5B24.9397,60.1719%5D,%5B24.9414,60.1715%5D,%5B24.9387,60.172%5D%5D%7D,%22properties%22%3A%7B%22icon%22%3A%22diamond%22,%22label%22%3A%22%24num%22,%22size%22%3A%22large%22,%22text-color%22%3A%22%23972E2B%22,%22text-outline-color%22%3A%22%23FFF%22,%22text-outline-width%22%3A2%7D%7D%5D%7D&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of a city with lakes, buildings, roads, and numbered markers indicating points of interest.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-add-multi-markers.png)


------

## 更改地图图像中的标记颜色
<a name="change-marker-color"></a>

在本示例中，您将使用不同颜色的气泡标记来表示世界各地的城市。您可以自定义标记的颜色、标签和其他属性以适应地图的上下文。

`Geo JSON`:

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [85.1376, 25.5941]
      },
      "properties": {
        "label": "Patna",
        "icon": "bubble",
        "color": "#FF5722",
        "outline-color": "#D74D3D",
        "text-color": "#FFFFFF"
      }
    },
    .....redacted.....
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [2.3522, 48.8566]
      },
      "properties": {
        "label": "Paris, France",
        "icon": "bubble",
        "color": "#FF9800",
        "outline-color": "#D76B0B",
        "text-color": "#FFFFFF"
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1400&height=1024&padding=150&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B85.1376,25.5941%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Patna%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FF5722%22,%22outline-color%22%3A%22%23D74D3D%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B105.8542,21.0285%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Hanoi,%20Vietnam%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%232196F3%22,%22outline-color%22%3A%22%231A78C2%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B116.4074,39.9042%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Beijing,%20China%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FF9800%22,%22outline-color%22%3A%22%23D76B0B%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B106.9101,47.918%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Ulaanbaatar,%20Mongolia%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%239C27B0%22,%22outline-color%22%3A%22%237B1FA2%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B151.2093,-33.8688%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Sydney,%20Australia%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%234CAF50%22,%22outline-color%22%3A%22%23388E3C%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B174.7633,-41.2865%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Wellington,%20New%20Zealand%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FFC107%22,%22outline-color%22%3A%22%23FFA000%22,%22text-color%22%3A%22%23000000%22%7D%7D%5D%7D&key=API_KEY
```

------
#### [ Response image ]

![\[World map showing locations of major cities across continents with colored labels.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-change-marker-color.png)


------

# 如何向静态地图添加线条
<a name="how-to-add-line-static"></a>

 在本主题中，您将了解如何使用 Amazon Location Service 向静态地图添加线条。我们将介绍支持的样式选项，介绍如何使用 GeoJSON 定义线条，以及如何应用颜色、宽度和轮廓等自定义样式。我们还将探讨如何对线宽等属性使用不同的测量单位。

## 支持的样式设置
<a name="supported-styling"></a>


| 名称 | 类型 | 默认值 | 描述 | 
| --- | --- | --- | --- | 
| `color` | 颜色 | 取决于样式 | 线条颜色。 | 
| `width` | 整数/字符串 | 2 | 线宽。有关更多信息，请参阅 [如何向静态地图添加线条](#how-to-add-line-static)。 | 
| `outline-color`  | 颜色 | 取决于样式 | 线条轮廓颜色。 | 
|  `outline-width`  | 整数/字符串 | 0（已关闭） | 轮廓的宽度。有关更多信息，请参阅 [如何向静态地图添加线条](#how-to-add-line-static)。 | 

## 支持的单位
<a name="supported-unit"></a>


| 单位 | 描述 | 
| --- | --- | 
| 整数，例如 `5` | 像素 | 
| 没有单位的字符串，例如 `"5"` | 像素 | 
| `"px"` | 像素 | 
| `"m"` | 米 | 
|  `"km"`  | 公里 | 
| `"mi"` | 英里 | 
| `"ft"` | 英尺 | 
| `"yd"` | 码 | 
| `"%"` | 特定属性的默认值百分比（以像素为单位）。例如，如果 `width` 的默认值为 `2` 像素，则 `200%` 为 `4` 像素。`%` 是敏感字符，必须在请求 URL 中将其编码为 `%25`。 | 

## 添加线条
<a name="add-a-line"></a>

 在本示例中，您将添加一条从温哥华某个地点到斯坦利公园的线。这条线是使用具有所定义坐标的 GeoJSON 格式创建的。

------
#### [ Request ]

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-123.11813, 49.28246],
          [-123.11967, 49.28347],
          [-123.12108, 49.28439],
          [-123.12216, 49.28507],
          [-123.12688, 49.28812],
          [-123.1292, 49.28964],
          [-123.13216, 49.2916],
          [-123.13424, 49.29291],
          [-123.13649, 49.2944],
          [-123.13678, 49.29477],
          [-123.13649, 49.29569],
          [-123.13657, 49.29649],
          [-123.13701, 49.29715],
          [-123.13584, 49.29847],
          [-123.13579, 49.29935],
          [-123.13576, 49.30018],
          [-123.13574, 49.30097]
        ]
      },
      "properties": {
        "name": "To Stanley Park",
        "description": "An evening walk to Stanley Park."
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22name%22%3A%22To%20Stanley%20Park%22,%22description%22%3A%22An%20evening%20walk%20to%20Stanley%20Park.%22%7D%7D%5D%7D&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of coastal city with dense urban area, marina, and surrounding forests.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-add-line.png)


------

## 为线条添加样式
<a name="add-styling"></a>

 在本示例中，您将为前一个示例中添加的线条设置样式。这包括定义线条的颜色、宽度、轮廓颜色和轮廓宽度，以自定义线条在地图上的视觉外观。

------
#### [ Request ]

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-123.11813, 49.28246],
          [-123.11967, 49.28347],
          [-123.12108, 49.28439],
          [-123.12216, 49.28507],
          [-123.12688, 49.28812],
          [-123.1292, 49.28964],
          [-123.13216, 49.2916],
          [-123.13424, 49.29291],
          [-123.13649, 49.2944],
          [-123.13678, 49.29477],
          [-123.13649, 49.29569],
          [-123.13657, 49.29649],
          [-123.13701, 49.29715],
          [-123.13584, 49.29847],
          [-123.13579, 49.29935],
          [-123.13576, 49.30018],
          [-123.13574, 49.30097]
        ]
      },
      "properties": {
        "color": "#6d34b3", 
        "width": "9m",
        "outline-color": "#a8b9cc",  
        "outline-width": "2px"
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22color%22%3A%22%236d34b3%22,%22width%22%3A%229m%22,%22outline-color%22%3A%22%23a8b9cc%22,%22outline-width%22%3A%222px%22%7D%7D%5D%7D&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of coastal city with dense urban area, marina, and surrounding forests.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-add-line-styling.png)


------

# 如何向静态地图添加路线
<a name="how-to-add-route"></a>

在本主题中，您将了解如何使用 Amazon Location Service 向静态地图添加路线。您将完成使用 CalculateRoutes API 获取路线的步骤，然后使用 GeoJSON 以及点和线的自定义样式在静态地图上对其进行可视化。

## 添加路线的步骤
<a name="steps-to-add-route"></a>

1. 从 `CalculateRoutes` API 获取路线。移除位于同一直线上的坐标以优化线串，防止查询字符串达到其极限。

1. 根据经过优化的坐标集，创建 GeoJSON 对象。

1. 取线串的第一个和最后一个点，然后添加点几何体来标记起点和终点位置。

1. 根据业务需求设置点和线串的样式，调整颜色、大小和标签等属性。

## 使用紧凑样式添加路线
<a name="add-route-using-compact-style"></a>

在本示例中，您将向[如何向静态地图添加线条](how-to-add-line-static.md)中创建的线条添加一条包含起点和终点的路线。该路线将使用自定义样式进行定义，包括起点和终点的颜色、大小和标签。

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-123.11813, 49.28246],
          [-123.11967, 49.28347],
          [-123.12108, 49.28439],
          [-123.12216, 49.28507],
          [-123.12688, 49.28812],
          [-123.1292, 49.28964],
          [-123.13216, 49.2916],
          [-123.13424, 49.29291],
          [-123.13649, 49.2944],
          [-123.13678, 49.29477],
          [-123.13649, 49.29569],
          [-123.13657, 49.29649],
          [-123.13701, 49.29715],
          [-123.13584, 49.29847],
          [-123.13579, 49.29935],
          [-123.13576, 49.30018],
          [-123.13574, 49.30097]
        ]
      },
      "properties": {
        "color": "#000000", 
        "width": "20m",
        "outline-color": "#a8b9cc",  
        "outline-width": "2px"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-123.11813, 49.28246]
      },
      "properties": {
        "label": "Pacific Centre",
        "icon": "bubble",
        "size": "large",
        "color": "#34B3A4",
        "outline-color": "#006400",
        "text-color": "#FFFFFF"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-123.13574, 49.30097]
      },
      "properties": {
        "label": "Stanley Park",
        "icon": "bubble",
        "size": "large",
        "color": "#B3346D",
        "outline-color": "#FF0000",
        "text-color": "#FFFFFF"
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22LineString%22,%22coordinates%22%3A%5B%5B-123.11813,49.28246%5D,%5B-123.11967,49.28347%5D,%5B-123.12108,49.28439%5D,%5B-123.12216,49.28507%5D,%5B-123.12688,49.28812%5D,%5B-123.1292,49.28964%5D,%5B-123.13216,49.2916%5D,%5B-123.13424,49.29291%5D,%5B-123.13649,49.2944%5D,%5B-123.13678,49.29477%5D,%5B-123.13649,49.29569%5D,%5B-123.13657,49.29649%5D,%5B-123.13701,49.29715%5D,%5B-123.13584,49.29847%5D,%5B-123.13579,49.29935%5D,%5B-123.13576,49.30018%5D,%5B-123.13574,49.30097%5D%5D%7D,%22properties%22%3A%7B%22color%22%3A%22%23000000%22,%22width%22%3A%2220m%22,%22outline-color%22%3A%22%23a8b9cc%22,%22outline-width%22%3A%222px%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22Point%22,%22coordinates%22%3A%5B-123.11813,49.28246%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Pacific%20Centre%22,%22icon%22%3A%22bubble%22,%22size%22%3A%22large%22,%22color%22%3A%22%2334B3A4%22,%22outline-color%22%3A%22%23006400%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%22Point%22,%22coordinates%22%3A%5B-123.13574,49.30097%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Stanley%20park%22,%22icon%22%3A%22bubble%22,%22size%22%3A%22large%22,%22color%22%3A%22%23B3346D%22,%22outline-color%22%3A%22%23FF0000%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D%5D%7D&key=API_KEY
```

------
#### [ Response image ]

![\[Aerial view of Vancouver with Stanley Park and Pacific Centre marked, showing urban layout and coastline.\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/static-add-route-compact.png)


------

# 如何向静态地图添加多边形
<a name="how-to-add-polygon-static"></a>

可以通过在建筑物和位置周围指定一个多边形，在地图上突出显示该建筑物和位置，例如五角大楼（位于华盛顿特区）。

## 添加一个多边形
<a name="polygon-single"></a>

在本示例中，您在地图上为五角大楼建筑物添加一个多边形（五边形）。

------
#### [ Geo JSON ]

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "coordinates": [
          [
            [
              -77.0579282196337,
              38.87264268371487
            ],
            [
              -77.05868880963534,
              38.87003145971428
            ],
            [
              -77.05560979468949,
              38.86876862025221
            ],
            [
              -77.05305311263672,
              38.87059509268525
            ],
            [
              -77.0546384387842,
              38.872985132206225
            ],
            [
              -77.0579282196337,
              38.87264268371487
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=600&height=1024&padding=200&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22coordinates%22%3A%5B%5B%5B-77.0579282196337,38.87264268371487%5D,%5B-77.05868880963534,38.87003145971428%5D,%5B-77.05560979468949,38.86876862025221%5D,%5B-77.05305311263672,38.87059509268525%5D,%5B-77.0546384387842,38.872985132206225%5D,%5B-77.0579282196337,38.87264268371487%5D%5D%5D,%22type%22%3A%22Polygon%22%7D%7D%5D%7D&key=your_API_Key
```

------
#### [ Response image ]

![\[显示围绕五角大楼的多边形的示例地图。\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/mapsV2/addPolygonStaticMap.png)


------

## 添加样式多边形
<a name="polygon-restyle"></a>

在本示例中，我们重新设置上一示例中所示多边形的样式。我们用另一种颜色（**\$1E3F70550**）画这个多边形。颜色分量如下所示。
+ **E3** 表示红色分量。
+ **F7** 表示绿色分量。
+ **05** 表示蓝色分量。
+ **50** 表示 alpha（不透明度）分量。

------
#### [ Geo JSON ]

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "coordinates": [
          [
            [
              -77.0579282196337,
              38.87264268371487
            ],
            [
              -77.05868880963534,
              38.87003145971428
            ],
            [
              -77.05560979468949,
              38.86876862025221
            ],
            [
              -77.05305311263672,
              38.87059509268525
            ],
            [
              -77.0546384387842,
              38.872985132206225
            ],
            [
              -77.0579282196337,
              38.87264268371487
            ]
          ]
        ],
        "type": "Polygon"
      },
      "properties": {
        "color": "#E3F70550"
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=100&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22coordinates%22%3A%5B%5B%5B-77.0579282196337,38.87264268371487%5D,%5B-77.05868880963534,38.87003145971428%5D,%5B-77.05560979468949,38.86876862025221%5D,%5B-77.05305311263672,38.87059509268525%5D,%5B-77.0546384387842,38.872985132206225%5D,%5B-77.0579282196337,38.87264268371487%5D%5D%5D,%22type%22%3A%22Polygon%22%7D,%22properties%22%3A%7B%22color%22%3A%22%23E3F70550%22%7D%7D%5D%7D&key=your_API_Key
```

------
#### [ Response image ]

![\[显示围绕五角大楼的另一种颜色多边形的示例地图。\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-color.png)


------

## 添加多个多边形
<a name="polygon-multiple"></a>

在本示例中，我们添加多个多边形，以突出显示纽约市的多个公园。

------
#### [ Geo JSON ]

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "color": "#00800050"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -73.95824708489555,
              40.80055774655358
            ],
            [
              -73.9818875523859,
              40.76810261850716
            ],
            [
              -73.9729556303776,
              40.7642422333698
            ],
            [
              -73.94916953372382,
              40.79699323614054
            ],
            [
              -73.95824708489555,
              40.80055774655358
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "color": "#FF000050"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -73.94432602794981,
              40.80634757577718
            ],
            [
              -73.94607200977896,
              40.803869579741644
            ],
            [
              -73.94301654157768,
              40.80263972513214
            ],
            [
              -73.94127055974795,
              40.805099411561145
            ],
            [
              -73.94432602794981,
              40.80634757577718
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "color": "#0000FF50"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -73.9947948382843,
              40.7691390468232
            ],
            [
              -73.99564708262241,
              40.76802192177411
            ],
            [
              -73.99372953286147,
              40.76723992306512
            ],
            [
              -73.99289367783732,
              40.76835706126087
            ],
            [
              -73.9947948382843,
              40.7691390468232
            ]
          ]
        ]
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=100&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%2300800050%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.95824708489555,40.80055774655358%5D,%5B-73.9818875523859,40.76810261850716%5D,%5B-73.9729556303776,40.7642422333698%5D,%5B-73.94916953372382,40.79699323614054%5D,%5B-73.95824708489555,40.80055774655358%5D%5D%5D%7D%7D,%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%23FF000050%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.94432602794981,40.80634757577718%5D,%5B-73.94607200977896,40.803869579741644%5D,%5B-73.94301654157768,40.80263972513214%5D,%5B-73.94127055974795,40.805099411561145%5D,%5B-73.94432602794981,40.80634757577718%5D%5D%5D%7D%7D,%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%230000FF50%22%7D,%22geometry%22%3A%7B%22type%22%3A%22Polygon%22,%22coordinates%22%3A%5B%5B%5B-73.9947948382843,40.7691390468232%5D,%5B-73.99564708262241,40.76802192177411%5D,%5B-73.99372953286147,40.76723992306512%5D,%5B-73.99289367783732,40.76835706126087%5D,%5B-73.9947948382843,40.7691390468232%5D%5D%5D%7D%7D%5D%7D&key=your_API_Key
```

------
#### [ Response image ]

![\[显示围绕 NYC 中公园的多个多边形的示例地图。\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/mapsV2/addPolygonStaticMap-multiple.png)


------

# 如何为静态地图设置语言
<a name="set-language-static-map"></a>

如果不想使用默认语言，可以为静态地图设置语言。

在本示例中，对于通常默认使用日语文本的东京某个位置，请求时使用的是英语，从而覆盖了区域默认值。

该示例显示了在请求中提供语言时的响应图像，以及未提供语言时的响应图像。相应的标签反映了显示所请求语言的地图与显示默认语言的地图之间的区别。

------
#### [ Request URL - English set as the language ]

```
https://maps.geo.us-east-1.amazonaws.com/v2/static/map?center=139.4575,35.539&style=Standard&lang=en&height=700&width=700&zoom=14
```

------
#### [ Response image ]

![\[显示围绕五角大楼的多边形的示例地图。\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/mapsV2/setLanguageEnglishStaticMap.png)


------

------
#### [ Request URL - default language ]

```
https://maps.geo.us-east-1.amazonaws.com/v2/static/map?center=139.4575,35.539&style=Standard&height=700&width=700&zoom=14
```

------
#### [ Response image ]

![\[显示围绕五角大楼的多边形的示例地图。\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/mapsV2/setLanguageDefaultStaticMap.png)


------

# 如何向静态地图添加邻近圆圈
<a name="how-to-add-proximity-circle"></a>

邻近圆圈可在报告或估计的设备或用户位置的准确性方面提供重要见解。通过在报告点周围显示一个圆圈，告知用户：由于多种因素会影响定位精度，实际位置可能位于这个圆圈内的任意位置。这种更清晰的说明有助于做出明智决策，并提高导航的安全性。

在本示例中，您在巴黎埃菲尔铁塔附近添加一个 500 米的邻近圆圈。

------
#### [ Request ]

```
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          2.298151,
          48.855921
        ]
      },
      "properties": {
        "style": "circle",
        "color": "#007BFF50",
        "width": "500m"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          2.298151,
          48.855921
        ]
      },
      "properties": {
        "icon": "cp",
        "color": "#007BFF",
        "text-color":"#DC3545",
        "text-outline-color":"#007BFF",
        "outline-width":"20px",
        "label": "You are here",
        "size": "large"
      }
    }
  ]
}
```

------
#### [ Request URL ]

```
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map@2x?style=Satellite&width=700&height=700&zoom=17&center=2.2958,48.8570&geojson-overlay=%7B%20%20%22type%22%3A%20%22FeatureCollection%22,%20%20%22features%22%3A%20%5B%20%20%20%20%7B%20%20%20%20%20%20%22type%22%3A%20%22Feature%22,%20%20%20%20%20%20%22geometry%22%3A%20%7B%20%20%20%20%20%20%20%20%22type%22%3A%20%22Point%22,%20%20%20%20%20%20%20%20%22coordinates%22%3A%20%5B%20%20%20%20%20%20%20%20%20%202.298151,%20%20%20%20%20%20%20%20%20%2048.855921%20%20%20%20%20%20%20%20%5D%20%20%20%20%20%20%7D,%20%20%20%20%20%20%22properties%22%3A%20%7B%20%20%20%20%20%20%20%20%22style%22%3A%20%22circle%22,%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23007BFF50%22,%20%20%20%20%20%20%20%20%22width%22%3A%20%22500m%22%20%20%20%20%20%20%7D%20%20%20%20%7D,%20%20%20%20%7B%20%20%20%20%20%20%22type%22%3A%20%22Feature%22,%20%20%20%20%20%20%22geometry%22%3A%20%7B%20%20%20%20%20%20%20%20%22type%22%3A%20%22Point%22,%20%20%20%20%20%20%20%20%22coordinates%22%3A%20%5B%20%20%20%20%20%20%20%20%20%202.298151,%20%20%20%20%20%20%20%20%20%2048.855921%20%20%20%20%20%20%20%20%5D%20%20%20%20%20%20%7D,%20%20%20%20%20%20%22properties%22%3A%20%7B%20%20%20%20%20%20%20%20%22icon%22%3A%20%22cp%22,%20%20%20%20%20%20%20%20%22color%22%3A%20%22%23007BFF%22,%20%20%20%20%20%20%20%20%22text-color%22%3A%22%23DC3545%22,%20%20%20%20%20%20%20%20%22text-outline-color%22%3A%22%23007BFF%22,%20%20%20%20%20%20%20%20%22outline-width%22%3A%2220px%22,%20%20%20%20%20%20%20%20%22label%22%3A%20%22You%20are%20here%22,%20%20%20%20%20%20%20%20%22size%22%3A%20%22large%22%20%20%20%20%20%20%7D%20%20%20%20%7D%20%20%5D%7D&key=your_API_Key             
```

------
#### [ Response image ]

![\[显示围绕埃菲尔铁塔的邻近圆圈的示例地图。\]](http://docs.aws.amazon.com/zh_cn/location/latest/developerguide/images/mapsV2/addPproximityCircleStaticMap.png)


------

# 管理成本和使用量
<a name="maps-whats-next"></a>

在继续了解 Amazon Location 地图时，务必掌握如何管理服务容量，如何确保遵守使用量限制，以及如何通过配额和 API 优化获得最佳结果。通过采用提高性能和准确性的最佳实践，您可以定制应用程序，以高效处理与地点相关的查询并尽可能地减少 API 请求次数。

**Topics**
+ [Amazon Location Service 的最佳实践](maps-best-practices.md)
+ [地图定价](maps-pricing.md)
+ [地图配额和使用量](map-quota-and-usage.md)

# Amazon Location Service 的最佳实践
<a name="maps-best-practices"></a>

使用 Amazon Location Service 时务必遵循最佳实践，这可确保您的地图在性能、准确性和用户体验方面得到优化。本节概述了使用静态地图、地理边界和 GeoJSON 数据以增强地图功能和可视化效果时的关键注意事项。

## 动态地图
<a name="next-dynamic-maps"></a>

以下是一些在 Amazon Location Service 中使用动态地图的最佳实践。

### 渲染优化 MapLibre
<a name="next-dynamic-rendering"></a>

以下是一些 MapLibre 有助于优化 AWS 地图样式渲染的功能。有关更多信息，请参阅 [AWS 地图样式和功能](map-styles.md)。

#### 跳过样式验证
<a name="next-dynamic-validation"></a>

如果您使用的是 AWS 地图样式，`validateStyle`请设置为`false`。这将关闭加载时的样式验证，从而加快初始地图的加载速度。使用 AWS 地图样式时无需进行样式验证，因为这些样式已经过预先验证。

------
#### [ Example ]

```
const map = new maplibregl.Map({
    container: 'map', // ID of the div where the map will render
    style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`, // Map style URL
    center: [0, 0], // Starting position [lng, lat]
    zoom: 2, // Starting zoom
    validateStyle: false, // Disable style validation for faster map load
});
```

------
#### [ Explanation ]
+ `validateStyle: true`：这样可以根据 MapLibre GL 样式规范验证地图样式。如果样式存在任何问题，将会记录在控制台中。
+ 如果将其设置为 `false`，则地图将跳过样式验证过程，这可能会加快加载速度，但不会进行错误检查。

------

#### 预热地图
<a name="next-dynamic-prewarm"></a>

对于可能在用户浏览应用程序时多次创建和销毁地图的单页应用程序 (SPAs)，预热功能可以减少地图被销毁后重新创建地图的延迟。

此功能仅推荐用于 SPAs。

## 静态地图
<a name="next-static-maps"></a>

### 边界，边界框（方框）
<a name="bounds-bbox"></a>

处理地图和地理数据时，准确定义边界框（`bbox`）和边界参数至关重要，因为它们决定了感兴趣的地理区域。任何不准确之处都可能导致不良结果。

**确保精准边界**  
确保指定的边界能够精确地表示想要显示的区域。即使是细微的不准确之处也可能会裁剪或排除所需区域的某些部分，从而无法实现可视化目的。

**验证适当的缩放级别**  
地图的缩放级别会根据指定的边界或 bbox 自动计算得出。验证生成的缩放级别是否为整个感兴趣区域提供了恰当的细节和清晰的可见性。如果缩放比例过高或过低，地图可能无法有效地传达所需的信息。

**检查自定义叠加层的可见性**  
将 bbox 或边界与自定义叠加层（如 GeoJSON 特征）结合使用时，请确保特征的范围位于生成的地图图像内。超出边界的特征可能会被裁剪或省略，从而导致可视化效果不完整或具有误导性。

**对 bbox 使用填充**  
将 bbox 与填充参数结合使用，以确保地图边缘附近的特征能够完全显示出来，而不会被裁剪掉。

通过精确定义 bbox 和边界参数，您可以确保地图正确反映所要描绘的地理区域，提供适当的细节级别，并有效地整合自定义叠加层或数据层。

## GeoJSON
<a name="geojson-best-practices"></a>

使用 GeoJSON 数据时，通过缩小 GeoJSON 来优化查询字符串有助于遵守查询字符串的限制，这尤其适用于大型数据集。

# 地图定价
<a name="maps-pricing"></a>

根据地图请求的类型和 API 调用的执行次数，Amazon Location Service 为其地图 API 提供具有竞争力的价格。本节概述了动态和静态地图的定价结构。

有关详细的定价信息，请参阅 [Amazon Location Service 定价](https://aws.amazon.com/location/pricing/)。

## 动态地图
<a name="dynamic-maps-pricing"></a>

地图 API 的定价基于 `GetTiles` API 检索的图块数量

其他与地图相关的 API（例如 `GetGlyphs`、`GetStyleDescriptor` 和 `GetSprites`）均免费。

## 静态地图图像
<a name="static-maps-pricing"></a>

静态地图图像的定价基于向 `GetStaticMap` API 发出的请求数量。每次请求获取静态地图图像都会计入定价计算中。

# 地图配额和使用量
<a name="map-quota-and-usage"></a>

Amazon Location Service 对动态和静态地图都设置了特定的服务配额和使用量限制。设置这些限制是为了确保所有用户都能公平使用资源并获得高效性能。以下是每项服务的服务配额和可调整限额。

## 服务配额
<a name="service-quota"></a>

Amazon Location Service 为设置默认配额 APIs 以帮助管理服务容量，可以在[AWS 服务配额管理控制台中查看这些配额](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas)。您可以通过[自助控制台](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas)申请增加配额，每个 API 的配额最多为默认限额的两倍。

如果配额限制超过默认限额的两倍，请通过自助服务控制台申请，自助服务控制台将自动提交支持票证。或者，联系高级支持团队。

申请增加配额不会直接产生费用，但是更高的使用量可能会导致服务成本增加，因为这会消耗额外的资源。有关更多信息，请参阅 [使用服务配额来管理配额](manage-quotas.md)。

### 动态地图
<a name="dynamic-map-quota"></a>


| API 名称 | 默认 | 最大可调整限额 | 超过最大可调整限额 | 
| --- | --- | --- | --- | 
|  `GetTiles`  |  2000  |  4000  | 在[服务配额控制台](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas)上申请或联系支持团队 | 

### 静态地图
<a name="static-map-quota"></a>


| API 名称 | 默认 | 最大可调整限额 | 超过最大可调整限额 | 
| --- | --- | --- | --- | 
|  `GetStaticMap`  |  50  |  100  | 在[服务配额控制台](https://console.aws.amazon.com/servicequotas/home#!/services/geo/quotas)上申请或联系支持团队 | 

## 使用量限制
<a name="other-usage-limits"></a>


| API 名称 | 限制 | 值 | 
| --- | --- | --- | 
|  `GetStyleDescriptor`  |  每个 IP 地址每秒的最大请求数。  |  5000  | 
|  `GetGlyphys`  |  每个 IP 地址每秒的最大请求数。  | 5000 | 
|  `GetSprites`  |  每个 IP 地址每秒的最大请求数。  | 5000 | 
|  `GetStaticMap`  |  压缩后的响应有效载荷大小。  |  6 MB  | 
|  `GetTiles`  |  压缩后的响应有效载荷大小。  |  6 MB  | 

## 术语
<a name="terms-to-use"></a>

有关更多信息，请参阅 [使用条款和数据属性](data-attribution.md)。