建立室內地圖的自訂樣式 (預覽版)

當您使用 Azure 地圖服務 Creator 建立室內地圖時,會套用預設樣式。 本文討論如何自訂這些樣式元素。

必要條件

使用 Creator 視覺效果編輯器建立自訂樣式

雖然您可以使用 Creators Rest API 修改室內地圖樣式,但 Creator 也會提供視覺效果樣式編輯器來建立不需要編碼的自訂樣式。 本文會著重於使用此樣式編輯器建立自訂樣式。

開啟樣式

當您在 Azure 地圖服務 Creator 服務中建立室內地圖時,系統會自動為您建立預設樣式。 若要自訂室內地圖的樣式元素,請開啟該預設樣式。

開啟 [樣式編輯器],並選取 [開啟] 工具列按鈕。

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

[開啟網站] 對話方塊隨即開啟。

在 [輸入您的 Azure 地圖服務訂用帳戶金鑰] 欄位中,輸入您的訂用帳戶金鑰

接下來,在下拉式清單中選取與您的訂用帳戶金鑰相關聯的地理位置。

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。 您可以使用 tileset Get HTTP 要求並傳入地圖底圖集識別碼,找到任何指定地圖底圖集的預設地圖設定識別碼:

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 地圖服務帳戶訂用帳戶金鑰
2 選取 Azure 地圖服務帳戶的地理位置。
3 地圖設定識別碼和別名的清單。
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.

下表描述您看到的四個欄位。

屬性 說明
樣式描述 此樣式的使用者定義描述。
地圖設定描述 此地圖設定的使用者定義描述。
地圖設定別名 用來參考此地圖設定的別名。
以程式設計方式參考時,如果未提供別名,則地圖設定識別碼必須參考地圖設定。

別名的一些重要須知:

  1. 可以使用英數位元 (0-9、a-z、A-Z)、連字號 (-) 和底線 (_) 來命名。
  2. 可用來參考基礎地圖設定,以取代該物件的識別碼。 這特別重要,因為地圖設定都無法更新,這表示每次儲存任何變更時,都會產生新的識別碼,但別名可以維持不變,讓參考在多次修改之後,比較不容易出錯。

警告

不允許重複的別名。 如果使用現有地圖設定的別名,將會覆寫別名所指向的地圖設定,並刪除現有地圖設定,而且該識別碼的參考將會發生錯誤。 如需詳細資訊,請參閱概念文章中的 地圖設定

當您在每個必要欄位中輸入值後,請選取 [上傳地圖設定] 按鈕,將樣式和地圖設定資料儲存到您的 Creator 資源。

成功上傳自訂樣式之後,您會看到 [上傳完成] 對話方塊,其中會顯示 [樣式識別碼]、[地圖設定識別碼] 和 [地圖設定別名] 的值。 如需詳細資訊,請參閱 自訂樣式地圖設定

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 地圖服務中開發應用程式時具現化地圖物件的 Indoor Manager 時,會需要此值。 此外,請記下樣式識別碼,它可在其他地圖底圖集重複使用。

自訂類別

Azure 地圖服務 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.

若要建立新圖層,請在現有圖層上選取重複按鈕。 這會建立所選圖層複本,您可以視需要修改。 接著,藉由在 [識別碼] 欄位中輸入新名稱,以重新命名圖層。 在此範例中,我們輸入 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
    ]
  ]
]

現在,當您在地圖中選取該單位時,快顯功能表會有新的圖層識別碼,如果按照此範例,則會是 indoor_unit_room_accessible。 選取之後,您可以進行樣式編輯。

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

下一步