Azure Maps - 室內地圖 (Indoor Maps) 文件範例操作演練 (III)

自從 Microsoft 推出地圖服務到目前為止,曾歷經了相當多的改朝換代的地圖服務方式,在此不論過去的功過,先把目光投向 Azure 上近期推出的其中一項雲端的 PaaS 服務: Azure Maps。

Azure Maps 所提供的服務當中,也提供了室內地圖 (Indoor Maps) 的部分,讓地圖的應用不再侷限於室外資訊的使用,而是可以朝向室內來發展,例如: 在停車場當中車道與車位佔用資訊、展場或市集的攤位販售資訊、辦公大樓的各會議室資訊是否使用中(或其溫度、濕度狀況監控)...等,這些都可以進一步協助應用廠商,完成在某個室內地域中處理其資訊的最後一哩路,讓使用者在獲取地域資料上能更加透明與便利。

其詳細介紹可參閱微軟提供的 Blog:
https://azure.microsoft.com/zh-tw/blog/azure-maps-creator-now-available-in-preview/

而此篇要根據前兩篇的設定來建立 Web 的前端頁面,其參考文件為
https://docs.microsoft.com/zh-tw/azure/azure-maps/how-to-use-indoor-module



首先,打開自行熟悉的 HTML 編輯相關的 IDE 工具(在本文選擇使用 Visual Studio Code)建立一份基本的 HTML 網頁頁面:



其原始碼如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <title>My Azure Map: Indoor Maps Demo</title>
    </head>
    <body>

    </body>
</html>



接著,在網頁當中要針對 Indoor Maps 使用時所需的 javascript 跟 css 引用,如文件上所提及:



原始碼如下:


  <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
  <script src="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.js"></script>
  <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
  <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/indoor/0.1/atlas-indoor.min.css" type="text/css"/>

文件上也有提到可以安裝 "azure-map-indoor package" 到本地端網頁中來直接內部使用,本文採用直接透過 cdn 引用方式使用 sdk。

 

接著就回到編輯器中把上述步驟的 javascript 與 css 原始碼加入到 <head></head> 之間:



接著就是在這個網頁頁面上撰寫一些基本的 html/css 的部分:


上圖 點 1 的原始碼如下:

<style>
   html, body {
       width: 100%;
       height: 100%;
       padding: 0;
       margin: 0;
   }
      
   #map-id {
       width: 100%;
       height: 100%;
   }
<style>

上圖 點 2 的原始碼如下:

<div id="map-id"></div>

 

接著在加入 javascript 的部分:


點 2 、點 3 皆在前一篇文章已經建立好,請直接使用。

其原始碼如下:

<script>
  const subscriptionKey = "<你的 Azure Maps 訂閱 ShareKey>";
  const tilesetId = "<你在 Maps Creator 服務中建立的 tilesetId>";
  const statesetId = "<你在 Maps Creator 服務中建立的 statesetId>";

  const map = new atlas.Map("map-id", {
    //use your facility's location
    center: [-122.13315, 47.63637],
    //or, you can use bounds: [ # , # , # , # ] and replace # with your Map bounds
    style: "blank",
    subscriptionKey,
    zoom: 19,
  });

  const levelControl = new atlas.control.LevelControl({
    position: "top-right",
  });

  const indoorManager = new atlas.indoor.IndoorManager(map, {
    levelControl, //level picker
    tilesetId,
    statesetId, //optional
  });

  if (statesetId.length > 0) {
    indoorManager.setDynamicStyling(true);
  }

  map.events.add("levelchanged", indoorManager, (eventData) => {
    //put code that runs after a level has been changed
    console.log("The level has changed:", eventData);
  });

  map.events.add("facilitychanged", indoorManager, (eventData) => {
    //put code that runs after a facility has been changed
    console.log("The facility has changed:", eventData);
  });
</script>
這是練習測試程式,為了簡化程序所以直接把 Azure Maps 的金鑰寫在 javascript 當中,請勿直接把此網頁發佈到網際網路可存取的網站上。
其整份網頁原始碼可參考微軟官方文件:
https://docs.microsoft.com/zh-tw/azure/azure-maps/how-to-use-indoor-module#example-use-the-indoor-maps-module

其 ShareKey、tilesetId、statesetId 的值,請替換成自己所建立的服務來使用。
 
接著就可以使用瀏覽器來瀏覽此網頁:

此範例的展示為三個樓層的會議室(或攤位),可以了解是否有被佔用等資訊。
(但因前篇跳過了一些步驟沒有實作其測試,只能瀏覽三個層樓的規劃狀態)

有興趣的人可以再參考此篇文件的介紹來完成:
 "https://docs.microsoft.com/zh-tw/azure/azure-maps/indoor-map-dynamic-styling"
 
以上介紹,希望有幫助到各位開始了解 Azure Maps 的 Indoor Maps 服務使用。


 


I'm a Microsoft MVP - Developer Technologies (From 2015 ~).
MVP_Logo

I focus on the following topics: Xamarin Technology, Azure, Mobile DevOps, and Microsoft EM+S.

If you want to know more about them, welcome to my website:
https://jamestsai.tw 


相關 Xamarin(.Forms) 推廣活動與課程,請詳見下列 Accupass (活動通) 列表:
https://www.accupass.com/organizer/detail/1910170752158115281580
 

本部落格文章之圖片相關後製處理皆透過 Techsmith 公司 所贊助其授權使用之 "Snagit" 與 "Snagit Editor" 軟體製作。