你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站,请访问 https://docs.azure.cn

在栅格地图上呈现自定义数据

本文介绍如何使用具有图像合成功能的 Get Map Static Image 命令。 图像合成功能支持检索包含自定义数据和不同样式的静态栅格图块。

下面是自定义数据的示例:

  • 自定义图钉
  • 标签
  • 几何覆盖图层

提示

若要在网页上显示简单的地图,使用 Azure Maps Web SDK 通常比使用静态图像服务更经济高效。 Web SDK 使用地图图块。除非用户平移和缩放地图,否则每次加载地图时,它们通常只使用浏览器缓存生成事务的一小部分。 Azure Maps Web SDK 提供了禁用平移和缩放的选项。 此外,Azure Maps Web SDK 还提供了一组数据可视化选项,比静态地图 Web 服务提供的更丰富。

先决条件

重要

在 URL 示例中,将 {Your-Azure-Maps-Subscription-key} 替换为 Azure Maps 订阅密钥。

本文使用 Bruno 应用程序,但你也可以选择其他 API 开发环境。

注意

本文中的示例需要 Gen2 定价层中的 Azure Maps 帐户。

Azure Maps Gen1 定价层停用

Gen1 定价层现已弃用,并将于 2026 年 9 月 15 日开始停用。 Gen2 定价层将取代 Gen1(S0 和 S1)定价层。 如果你的 Azure Maps 帐户选择了 Gen1 定价层,你可以在停用之前切换到 Gen2 定价层,否则它会自动更新。 有关详细信息,请参阅管理 Azure Maps 帐户的定价层

获取具有自定义图钉和标签的静态图像

若要获取具有自定义图钉和标签的静态图像,请执行以下操作:

  1. 在 Bruno 应用中,选择“新建请求”。

  2. 将类型设置为 HTTP

  3. 输入请求的名称,例如 Get Map Static Image

  4. 选择 GET HTTP URL 方法。

  5. 输入以下 URL:

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=13&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center=-73.964085, 40.78477&path=lcFF0000|lw2|la0.60|ra700||-122.13230609893799 47.64599069048016&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Central Park%27-73.9657974+40.781971%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png
    
  6. 选择创建

  7. 选择请求 URL 右侧显示的“发送请求”箭头。

    将返回下图:

    具有标签的自定义图钉。

使用颜色和不透明度呈现多边形

可以使用带有路径参数的样式修改器来修改多边形的外观。

若要呈现具有颜色和不透明度设置的多边形,请执行以下操作:

  1. 在 Bruno 应用中,选择“新建请求”。

  2. 将类型设置为 HTTP

  3. 输入请求的名称,例如“GET Polygon”

  4. 选择 GET HTTP URL 方法。

  5. 将以下 URL 输入到呈现服务:

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=15&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&path=lc0000FF|fc0000FF|lw3|la0.80|fa0.50||-74.03995513916016 40.70090237454063|-74.04082417488098 40.70028420372218|-74.04113531112671 40.70049568385827|-74.04298067092896 40.69899904076542|-74.04271245002747 40.69879568992435|-74.04367804527283 40.6980961582905|-74.04364585876465 40.698055487620714|-74.04368877410889 40.698022951066996|-74.04168248176573 40.696444909137|-74.03901100158691 40.69837271818651|-74.03824925422668 40.69837271818651|-74.03809905052185 40.69903971085914|-74.03771281242369 40.699340668780984|-74.03940796852112 40.70058515602143|-74.03948307037354 40.70052821920425|-74.03995513916016 40.70090237454063&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Central Park%27-73.9657974+40.781971%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png&center=-74.040701, 40.698666&height=500&Width=500
    

    将返回下图:

    呈现不透明的多边形。

呈现具有自定义标签的圆和图钉

可以通过添加样式修饰符来修改图钉的外观。 例如,若要使图钉及其标签变得更大或更小,请使用 sc“比例样式”修饰符。 此修饰符采用大于零的值。 值为 1 即为标准比例。 大于 1 的值使图钉变大,而小于 1 的值使图钉变小。 有关样式修饰符的详细信息,请查看 Get Map Static Image 命令的 Path 参数。

若要呈现具有自定义标签的圆和图钉,请执行以下操作:

  1. 在 Bruno 应用中,选择“新建请求”。

  2. 将类型设置为 HTTP

  3. 输入请求的名称,例如“GET Polygon”

  4. 选择 GET HTTP URL 方法。

  5. 将以下 URL 输入到呈现服务:

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=14&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|sc1|al0.66|lc003C62|co002D62||'Microsoft Corporate Headquarters'-122.14131832122801 47.64690503939462|'Microsoft Visitor Center'-122.136828 47.642224|'Microsoft Conference Center'-122.12552547454833 47.642940335653996|'Microsoft The Commons'-122.13687658309935 47.64452336193245&height=700&Width=700
    
  6. 选择创建

  7. 选择请求 URL 右侧显示的“发送请求”箭头。

    将返回下图:

    呈现具有自定义图钉的圆。

  8. 接下来,通过修改 co 样式修饰符来更改图钉的颜色。 查看参数 pins 的值 (pins=default|la15+50|al0.66|lc003C62|co002D62|) 时,会看到当前颜色为 #002D62。 若要将颜色更改为 #41d42a,请将 #002D62 替换为 #41d42apins 参数现在为 pins=default|la15+50|al0.66|lc003C62|co41D42A|。 请求类似于以下 URL:

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=14&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center=-122.13230609893799,47.64599069048016&path=lcFF0000|lw2|la0.60|ra1000||-122.13230609893799 47.64599069048016&pins=default|la15+50|al0.66|lc003C62|co41D42A||'Microsoft Corporate Headquarters'-122.14131832122801  47.64690503939462|'Microsoft Visitor Center'-122.136828 47.642224|'Microsoft Conference Center'-122.12552547454833 47.642940335653996|'Microsoft The Commons'-122.13687658309935  47.64452336193245&height=700&Width=700 
    
  9. 选择创建

  10. 选择请求 URL 右侧显示的“发送请求”箭头。

    将返回下图:

    呈现具有已更新的图钉的圆。

同样,你可以更改、添加和删除其他样式修饰符。

添加交通层

若要获取在道路底图上呈现的交通层的静态图像,请使用参数 trafficLayer。 以下示例显示了具有交通层的地图,以及带有标签的图钉:

  1. 在 Bruno 应用中,选择“新建请求”。

  2. 将类型设置为 HTTP

  3. 输入请求的名称,例如获取地图静态图像 - 交通层

  4. 选择 GET HTTP URL 方法。

  5. 输入以下 URL:

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=14&tilesetId=microsoft.base.road&api-version=2024-04-01&language=en-us&center= -0.122427, 51.500867&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Westminster Bridge%27-0.122427+51.500867%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png&height=700&Width=700&trafficLayer=microsoft.traffic.relative.main 
    
  6. 选择创建

  7. 选择请求 URL 右侧显示的“发送请求”箭头。

    将返回下图:

    显示交通层的地图的屏幕截图,以及带有标签威斯敏斯特桥的自定义图钉。

使用深灰色样式创建地图

若要获取应用深灰色样式的静态图像,请将 TilesetId 参数设置为 microsoft.base.darkgrey

  1. 在 Bruno 应用中,选择“新建请求”。

  2. 将类型设置为 HTTP

  3. 输入请求的名称 ,例如获取地图静态图像 - 深灰色样式

  4. 选择 GET HTTP URL 方法。

  5. 输入以下 URL:

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=16&tilesetId=microsoft.base.darkgrey&api-version=2024-04-01&language=en-us&center=-95.360200,29.753452&pins=custom%7Cla15+50%7Cls12%7Clc003b61%7C%7C%27Westminster Bridge%27-0.122427+51.500867%7C%7Chttps%3A%2F%2Fsamples.azuremaps.com%2Fimages%2Ficons%2Fylw-pushpin.png&height=700&Width=700 
    
  6. 选择创建

  7. 选择请求 URL 右侧显示的“发送请求”箭头。

将返回下图:

地图的屏幕截图,其中显示了通过将图块集 ID 参数设置为 microsoft.base.darkgrey 创建的深灰色样式。

有关使用 TilesetId 参数提供的不同样式的详细信息,请参阅 Render - 获取 Map Tileset REST API 文档中的 TilesetId

使用图像样式创建地图

若要获取应用图像样式的静态图像,请将 TilesetId 参数设置为 microsoft.imagery

  1. 在 Bruno 应用中,选择“新建请求”。

  2. 将类型设置为 HTTP

  3. 输入请求的名称 ,例如获取地图静态图像 - 图像样式

  4. 选择 GET HTTP URL 方法。

  5. 输入以下 URL:

    https://atlas.microsoft.com/map/static?subscription-key={Your-Azure-Maps-Subscription-key}&zoom=16&tilesetId=microsoft.imagery&api-version=2024-04-01&language=en-us&center=-43.176141,-22.965458&height=700&Width=700
    
  6. 选择创建

  7. 选择请求 URL 右侧显示的“发送请求”箭头。

    将返回下图:

    地图的屏幕截图,其中显示了通过将图块集 ID 参数设置为 microsoft.imagery 创建的图像样式。

有关使用 TilesetId 参数提供的不同样式的详细信息,请参阅 Render - 获取 Map Tileset REST API 文档中的 TilesetId

后续步骤