共用方式為


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

注意

Azure 地圖服務 Creator 淘汰

Azure 地圖服務 Creator 室內地圖服務現在已被取代,且將於 2025/9/30 淘汰。 如需詳細資訊,請參閱 Azure 地圖服務 Creator 的生命周期結束公告

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

必要條件

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

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

開啟樣式

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

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

視覺效果樣式編輯器中開啟功能表的螢幕擷取畫面。

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

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

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

視覺效果樣式編輯器中開啟對話方塊的螢幕擷取畫面。

選取 [取得地圖設定清單] 按鈕,以取得與作用中 Creator 資源相關聯的每個地圖設定清單。

視覺效果樣式編輯器中開啟樣式對話方塊的螢幕擷取畫面,其中已醒目提示 [選取地圖設定] 下拉式清單。

注意

如果地圖設定是建立為自訂樣式的一部分,且具有使用者提供的別名,該別名將會出現在地圖設定下拉式清單中,否則只會出現 mapConfigurationId。 您可以使用 tileset Get HTTP 要求並傳入地圖底圖集識別碼,找到任何指定地圖底圖集的預設地圖設定識別碼:

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

回應本文中會傳回 mapConfigurationId,例如:

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

選取所需的地圖設定之後,樣式的下拉式清單隨即出現。

選取所需的樣式之後,請選取 [載入選取的樣式] 按鈕。

關於開啟樣式對話方塊

視覺效果樣式編輯器中 [開啟樣式] 對話方塊的螢幕擷取畫面,其中包含已編號的每個編輯欄位,每個數字與下表中的數字相互關聯。

# 描述
1 您的 Azure 地圖服務帳戶訂用帳戶金鑰
2 選取 Azure 地圖服務帳戶的地理位置。
3 地圖設定識別碼和別名的清單。
4 與所選地圖設定相關聯的樣式清單。

修改樣式

在視覺效果編輯器中開啟您的樣式之後,即可開始修改室內地圖的各種元素,例如變更會議室、辦公室或洗手間的背景色彩。 您也可以變更標籤的字型大小,例如辦公室號碼,並定義出現在不同縮放層級的內容。

變更背景色彩

若要變更指定圖層中所有單位的背景色彩,請將滑鼠指標放在所需的單位上方,然後使用滑鼠左鍵加以選取。 您會看到一個快顯功能表,其中顯示與單位相關類別相關聯的圖層。 選取要在其中更新樣式屬性的圖層之後,該圖層便已準備好在左側窗格中更新。

視覺效果樣式編輯器中單位圖層快顯對話方塊的螢幕擷取畫面。

開啟調色盤,並選取您想要變更所選單位的色彩。

視覺效果樣式編輯器中調色盤的螢幕擷取畫面。

基本地圖

視覺效果編輯器工具列上的基本地圖下拉式清單會顯示一份基本地圖樣式清單,這些樣式會影響您室內地圖所屬的基本地圖樣式屬性。 這不會影響室內地圖的樣式元素,但可讓您查看室內地圖使用各種基礎地圖的外觀。

視覺效果編輯器工具列中基本地圖下拉式清單的螢幕擷取畫面。

儲存自訂樣式

當您對樣式進行所需的變更後,請將變更儲存至您的 Creator 資源。 您可以使用變更覆寫樣式,或建立新的樣式。

若要儲存您的變更,請選取工具列上的 [儲存] 按鈕。

視覺效果樣式編輯器中儲存功能表的螢幕擷取畫面。

[上傳樣式和地圖設定] 對話方塊隨即顯示:

視覺效果樣式編輯器中上傳樣式與地圖設定對話方塊的螢幕擷取畫面。

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

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

別名的一些重要須知:

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

警告

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

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

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

視覺效果樣式編輯器中上傳完整對話方塊的螢幕擷取畫面,其中顯示樣式識別碼、地圖組態識別碼和地圖組態別名的值。

提示

請記下該地圖設定別名值,當您在 Azure 地圖服務中開發應用程式時具現化地圖物件的 Indoor Manager 時,會需要此值。 此外,請記下樣式識別碼,它可在其他地圖底圖集重複使用。

自訂類別

Azure 地圖服務 Creator 定義了一個類別清單。 當您建立資訊清單時,您會將設施中的每個單位與 unitProperties 物件中的其中一個類別建立關聯。

在某些情況下,您可能想要建立新類別。 例如,您可能想要能夠將不同的樣式屬性套用至具備殘障人士專用設施的所有會議室,例如電話室配備具有螢幕的電話,為聽障人士顯示通話者所說的內容。

若要這麼做,請先在資訊清單 JSON 中,針對所需的 categoryName 和所需的 unitName 輸入所需的值,然後再上傳您的繪圖套件。

此螢幕擷取畫面顯示資訊清單中的自訂類別名稱。

在視覺效果編輯器中檢視且沒有預設樣式時,類別名稱不會與任何圖層相關聯。 若要將樣式套用至該圖層,建立新的圖層,並將新的類別新增至該圖層。

此螢幕擷取畫面顯示變更資訊清單中的類別名稱之後,所顯示的圖層差異。

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

此螢幕擷取畫面顯示視覺效果編輯器工具列中圖層窗格中的複製按鈕,以及顯示新圖層名稱的圖層識別碼,其與原始圖層相同,並在結尾加入 dash 複本。

建立新圖層之後,您必須將新的類別名稱與其建立關聯。 此操作可藉由編輯複製的圖層以移除現有的類別並新增類別來完成。

例如,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。 選取之後,您可以進行樣式編輯。

快顯功能表的螢幕擷取畫面,其中顯示選取手機 11 單位時出現的新圖層。

下一步