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

为室内地图创建自定义样式(预览版)

使用 Azure Maps Creator 创建室内地图时,将应用默认样式。 本文讨论如何自定义这些样式元素。

先决条件

使用 Creators 可视化编辑器创建自定义样式

虽然可以使用 Creators Rest API 修改你的室内地图样式,但 Creator 还提供了一个可视化样式编辑器来创建不需要编码的自定义样式。 本文重点介绍了如何使用此样式编辑器创建自定义样式。

开放式

在 Azure Maps Creator 服务中创建室内地图时,会自动为你创建默认样式。 要自定义室内地图的样式元素,请打开该默认样式。

打开样式编辑器并选择“打开”工具栏按钮。

A screenshot of the open menu in the visual style editor.

“打开样式”对话框打开。

在“输入 Azure Maps 订阅密钥”字段中输入你的订阅密钥

接下来,在下拉列表中选择与你的订阅密钥关联的地理位置。

A screenshot of the open dialog box in the visual style editor.

选择“获取地图配置列表”按钮以获取与活动 Creator 资源关联的每个地图配置的列表。

A screenshot of the open style dialog box in the visual style editor with the Select map configuration drop-down list highlighted.

注意

如果地图配置作为自定义样式的一部分创建且具有用户提供的别名,该别名会显示在地图配置下拉列表中,否则只会显示 mapConfigurationId。 任何给定图块集的默认地图配置 ID 可以通过使用 tileset get HTTP 请求并传入图块集 ID 来找到:

https://{geography}.atlas.microsoft.com/tilesets/{tilesetId}?2023-03-01-preview

在响应的正文中返回 mapConfigurationId,例如:

"defaultMapConfigurationId": "68d74ad9-4f84-99ce-06bb-19f487e8e692"

选择所需的地图配置后,将显示样式的下拉列表。

选择所需样式后,选择“加载所选样式”按钮。

关于打开样式对话框

A screenshot of the Open Style dialog box in the visual style editor, with each edit field numbered, each number correlates to the numbers in the following table.

# 说明
1 你的 Azure Maps 帐户订阅密钥
2 选择 Azure Maps 帐户的地理位置。
3 地图配置 ID 和别名的列表。
4 与所选地图配置关联的样式列表。

修改样式

在可视化编辑器中打开你的样式后,可以开始修改室内地图的各种元素,例如更改会议室、办公室或洗手间的背景颜色。 还可以更改办公室编号等标签的字体大小,并定义不同缩放级别显示的内容。

更改背景颜色

要更改指定层中所有单元的背景颜色,请将鼠标指针放在所需的单元上,然后使用鼠标左键选择。 会看到弹出菜单,显示与该单位关联的类别相关联的图层。 选择要更新样式属性的图层后,会在左侧窗格中看到该图层已准备好更新。

A screenshot of the unit layer pop-up dialog box in the visual style editor.

打开调色板并选择要将所选单元更改为的颜色。

A screenshot of the color pallet in the visual style editor.

基本地图

可视化编辑器工具栏上的底图下拉列表显示了底图样式列表,这些样式会影响你的室内地图所属的底图的样式属性。 它不会影响室内地图的样式元素,但允许查看室内地图与各种基本地图的外观。

A screenshot of the base maps drop-down list in the visual editor toolbar.

保存自定义样式

对样式进行所需的更改后,将更改保存到你的 Creator 资源。 可以使用更改覆盖样式,也可以创建新样式。

要保存更改,请选择工具栏上的“保存”按钮。

A screenshot of the save menu in the visual style editor.

此时会显示 “上传样式和地图配置 ”对话框:

A screenshot of the upload style and map configuration dialog box in the visual style editor.

下表描述了你看到的四个字段。

属性 说明
样式说明 此样式的用户定义说明。
地图配置说明 此地图配置的用户定义说明。
地图配置别名 用于引用此地图配置的别名。
以编程方式引用时,如果未提供别名,通过地图配置 ID 引用地图配置。

关于别名需要了解的一些重要事项:

  1. 可以使用字母数字字符(0-9、az、AZ)、连字符 (-) 和下划线 (_) 命名。
  2. 可用于引用基础地图对象来代替该对象的 ID。 这一点尤其重要,因为地图配置都不能更新,这意味着每次保存任何更改时,都会生成新 ID,但别名可以保持不变,因此在多次修改后引用别名会减少出错的几率。

警告

不允许有重复的别名。 如果使用现有地图配置的别名,则别名指向的地图配置将被覆盖,现有地图配置将被删除,并且对该 ID 的引用将导致错误。 有关详细信息,请参阅概念文章中的地图配置

在每个必填字段中输入值后,选择“上传地图配置”按钮以将样式和地图配置数据保存到你的 Creator 资源。

成功上传自定义样式后,你将看到“上传完成”对话框,其中显示了样式 ID、地图配置 ID 和地图配置别名的值。 有关详细信息,请参阅自定义样式设置映射配置

A screenshot of the upload complete dialog box in the visual style editor showing values for the Style ID, Map configuration ID and the map configuration alias.

提示

记下地图配置别名值,在 Azure Maps 中开发应用程序时,在实例化地图对象的室内管理器这一步需要这个值。 此外,请记下样式 ID,该 ID 可重复用于其他图块集。

自定义类别

Azure Maps Creator 定义了一个类别列表。 创建清单时,你将设施中的每个单元与 unitProperties 对象中的这些类别之一相关联。

有时你可能想要创建一个新类别。 例如,可能希望能够将不同的样式属性应用于为残疾人提供特殊住宿的所有房间,例如电话室,其电话屏幕会显示呼叫者对有听力障碍的人说的话。

为此,请在上传绘图包之前,在清单 JSON 中的 categoryName 中为所需的 unitName 输入所需的值。

A screenshot showing the custom category name in the manifest.

在可视化编辑器中查看时,类别名称不与任何层关联,并且没有默认样式。 要对其应用样式,需要新建图层并向其新增类别。

A screenshot showing the difference in the layers that appear after changing the category name in the manifest.

要创建新图层,请选择现有图层上的复制按钮。 这会创建所选图层的副本,你可以根据需要对其进行修改。 接下来,通过在 ID 字段中输入新名称来重命名图层。 在本例中,我们输入了 indoor_unit_room_accessible。

A screenshot the duplicate button in the layers pane in the visual editor toolbar, along with the layer ID showing the name of the new layer that is the same as the original layer with a dash copy added to the end.

创建新图层后,你需要将新类别名称与其关联。 为此,请编辑复制的层以删除现有类别并添加新类别。

例如,JSON 可能如下所示:

{
  "id": "indoor_unit_room_accessible",
  "type": "fill",
  "filter": [
    "all",
    ["has", "floor0"],
    [
      "any",
      [
        "case",
        [
          "==",
          [
            "typeof",
            ["get", "categoryName"]
          ],
          "string"
        ],
        [
          "==",
          ["get", "categoryName"],
          "room.accessible.phone"
        ],
        false
      ]
    ]
  ],
  "layout": {"visibility": "visible"},
  "metadata": {
    "microsoft.maps:layerGroup": "unit"
  },
  "minzoom": 16,
  "paint": {
    "fill-antialias": true,
    "fill-color": [
      "string",
      ["feature-state", "color"],
      "rgba(230, 230, 230, 1)"
    ],
    "fill-opacity": 1,
    "fill-outline-color": "rgba(120, 120, 120, 1)"
  },
  "source-layer": "Indoor unit",
  "source": "{tilesetId}"
}

只有与筛选器匹配的要素才会显示在地图上。 你需要编辑筛选器以删除你不想出现在地图上的任何类别并添加新类别。

例如,筛选器 JSON 可能如下所示:

[
  "all",
  ["has", "floor0"],
  [
    "any",
    [
      "case",
      [
        "==",
        [
          "typeof",
          ["get", "categoryName"]
        ],
        "string"
      ],
      [
        "==",
        ["get", "categoryName"],
        "room.accessible.phone"
      ],
      false
    ]
  ]
]

现在,在地图中选择该单位时,弹出菜单具有新的图层 ID,如果遵循此示例,则为 indoor_unit_room_accessible。 选择后,你可以进行样式编辑。

A screenshot of the pop-up menu showing the new layer appearing when the phone 11 unit is selected.

后续步骤