Azure Haritalar İç Mekan Haritalar kullanma

Makale
08/28/2021
Okumak için 5 dakika

Azure Haritalar Web SDK'sı, Azure Haritalar İç Mekan modülünü içerir. Azure Haritalar İç Mekan modülü, Azure Haritalar Creator hizmetlerde oluşturulan iç mekan haritalarını işlemeye olanak sağlar.

Önkoşullar

Azure Haritalar hesabı yapma
Oluşturucu kaynağı oluşturma
Birincil anahtar veya abonelik anahtarıolarak da bilinen birincil abonelik anahtarını alın.
İç mekan tilesetId haritaları statesetId oluşturma öğreticisi tamamlayarak bir ve edinin. Azure Haritalar İç Mekan haritası modülüyle iç mekan haritalarını işlemek için bu Haritalar gerekir.

İç mekan Haritalar ekleme

Azure Haritalar İç Mekan modülünü yüklemek ve eklemek için iki farklı yol kullanabilirsiniz.

Azure Haritalar İç Mekan modülünün genel olarak barındırılan Azure Content Delivery Network sürümünü kullanmak için HTML dosyasının öğesinde aşağıdaki JavaScript ve Stil Sayfası <head> başvurularını kullanın:

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

Veya Azure Haritalar İç Mekan modülünü indirebilirsiniz. Azure Haritalar İç Mekan modülü, Azure Haritalar hizmetine erişmek için bir istemci kitaplığı içerir. İç mekan modülünü web uygulamanıza yüklemek ve yüklemek için aşağıdaki adımları izleyin.

azure-maps-iç mekan paketini yükleyin.
```
>npm install azure-maps-indoor
```

HTML dosyasının Haritalar Azure Haritalar İç Mekan modülü JavaScript ve <head> Stil Sayfası'ne bakın:

<link rel="stylesheet" href="node_modules/azure-maps-indoor/dist/atlas-indoor.min.css" type="text/css" />
<script src="node_modules/azure-maps-indoor/dist/atlas-indoor.min.js"></script>

Eşleme nesnesinin örneğini oluşturma

İlk olarak bir Eşleme nesnesi oluşturun. Sonraki adımda İç Mekan Yöneticisi nesnesinin örneğini oluşturmada Map nesnesi kullanılacaktır. Aşağıdaki kodda Map nesnesinin nasıl örneklen olduğu gösterilmiştir:

const subscriptionKey = "<Your Azure Maps Primary Subscription Key>";

const map = new atlas.Map("map-id", {
  //use your facility's location
  center: [-122.13203, 47.63645],
  //or, you can use bounds: [# west, # south, # east, # north] and replace # with your map's bounds
  style: "blank",
  view: 'Auto',
  authOptions: {
      authType: 'subscriptionKey',
      subscriptionKey: subscriptionKey
  },
  zoom: 19,
});

İç Mekan Yöneticisi örneği

İç mekan kutucuklarını yüklemek ve kutucukların harita stilini yüklemek için İç Mekan Yöneticisi'ni örneği olarak göster gerekir. Map nesnesini ve karşılık gelen nesnesini sağlayarak İç Mekan Yöneticisi'nin örneğini tilesetId oluşturma. Dinamik harita stillerini desteklemek isterseniz,geçişlisiniz. statesetId Değişken statesetId adı büyük/büyük/büyük harfe duyarlıdır. Kodunuz aşağıdaki JavaScript koduna benzer.

const tilesetId = "<tilesetId>";
const statesetId = "<statesetId>";

const indoorManager = new atlas.indoor.IndoorManager(map, {
    tilesetId: tilesetId,
    statesetId: statesetId // Optional
});

Sizin sağlarken durum verilerini yoklama etkinleştirmek için ve çağrısı statesetId sağlanız indoorManager.setDynamicStyling(true) gerekir. Yoklama durumu verileri, dinamik özelliklerin veya durumların durumunu dinamik olarak güncelleştirmenizi sağlar. Örneğin, oda gibi bir özelliğin adlı dinamik özelliği (durumu) occupancy olabilir. Uygulamanız, görsel harita içindeki değişikliği yansıtmak için herhangi bir durum değişikliğini yoklama isteğinde olabilir. Aşağıdaki kodda durum yoklamanın nasıl etkinleştirildikleri gösterilmiştir:

const tilesetId = "<tilesetId>";
const statesetId = "<statesetId>";

const indoorManager = new atlas.indoor.IndoorManager(map, {
    tilesetId: tilesetId,
    statesetId: statesetId // Optional
});

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

Coğrafi Ayarlar (İsteğe bağlı)

Bu kılavuzda, oluşturucu hizmetinizi Birleşik Devletler. Bu durumda bu bölümü atlayabilirsiniz. Ancak, Oluşturucu hizmetiniz Avrupa'da oluşturulduktan sonra aşağıdaki kodu ekleyin:

  indoorManager.setOptions({ geography: 'eu' });.

İç Mekan Düzeyi Seçici Denetimi

İç Mekan Düzeyi Seçici denetimi, işlenmiş haritanın düzeyini değiştirmenizi sağlar. İsteğe bağlı olarak İç Mekan Düzeyi Seçicisi'ni İç Mekan Yöneticisi aracılığıyla başlatabiliyoruz. Düzey denetim seçiciyi başlatma kodu şu şekildedir:

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

İç Mekan Olayları

Azure Haritalar İç Mekan modülü Map nesnesi olaylarını destekler. Bir düzey veya tesis değiştiğında Map nesnesi olay dinleyicileri çağrılır. Bir düzey veya tesisin değişmesi durumunda kodu çalıştırmak için kodunuzu olay dinleyicisi içine girin. Aşağıdaki kod, olay dinleyicilerinin Map nesnesine nasıl ekli olduğunu gösterir.

map.events.add("levelchanged", indoorManager, (eventData) => {

  //code that you want to run after a level has been changed
  console.log("The level has changed: ", eventData);
});

map.events.add("facilitychanged", indoorManager, (eventData) => {

  //code that you want to run after a facility has been changed
  console.log("The facility has changed: ", eventData);
});

değişkeni, eventData sırasıyla veya olayı çağıran düzey veya levelchanged facilitychanged tesisle ilgili bilgileri tutar. Düzey değiştiklerinde eventData nesnesi , yeni facilityId ve diğer meta levelNumber verileri içerir. Bir özellik değişirse nesnesi eventData yeni , yeni ve diğer meta verileri facilityId levelNumber içerir.

Örnek: İç Mekan Haritalar Kullanma

Bu örnekte, Web uygulamanıza Azure Haritalar İç Mekan modülünü nasıl kullanabileceğiniz gösterir. Örnek kapsamda sınırlı olsa da, Azure Haritalar İç Mekan modülünü kullanmaya başlamanız için ihtiyacınız olan temel bilgileri kapsar. Tam HTML kodu aşağıdaki adımların altında verilmiştir.

Azure Content Delivery Network İç Mekan modülünü yüklemek için Azure Haritalar seçeneğini kullanın.
Yeni html dosyası oluşturma
HTML üst bilgisinde, Azure Haritalar İç Mekan modülü JavaScript ve stil sayfası stillerine bakın.
Bir Eşleme nesnesi başlatma. Map nesnesi aşağıdaki seçenekleri destekler:
- Subscription key, Azure Haritalar birincil abonelik anahtarınızdır.
- center iç mekan harita merkezi konumunuz için enlem ve boylam tanımlar. için bir center değer sağlamak istemiyorsanız için bir değer bounds sağlar. Biçim şu şekilde center görünmektedir: [-122.13315, 47.63637].
- bounds , kutucuk kümesi eşleme verilerini kapsayan en küçük dikdörtgen şekildir. için bir bounds değer ayarlamak istemiyorsanız için bir değer center ayarlayın. Kutucuk Kümesi Listesi API'sini çağırarak eşleme sınırlarınızı bulabilirsiniz. Kutucuk Kümesi Listesi bbox API'si, ayrıştırarak atayabilirsiniz olan 'yi bounds döndürür. Biçim şu şekilde bounds görünmektedir: [# batı, # güney, # doğu, # kuzey].
- style arka plan rengini ayarlamaya olanak sağlar. Beyaz arka plan görüntülemek için style "boş" olarak tanımlayın.
- zoom , haritanız için en düşük ve en yüksek yakınlaştırma düzeylerini belirtmenize olanak sağlar.
Ardından İç Mekan Yöneticisi modülünü oluşturun. Azure Haritalar İç Mekan'a tilesetId attayın ve isteğe bağlı olarak statesetId ekleyin.
İç Mekan Düzeyi Seçicisi denetimi örneği.
Eşleme nesnesi olay dinleyicileri ekleyin.

Dosyanız artık aşağıdaki HTML'ye benzer şekilde görünmeli.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>Indoor Maps App</title>
    
    <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"/>

    <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>
      
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }

      #map-id {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map-id"></div>
    <script>
      const subscriptionKey = "<Your Azure Maps Primary Subscription Key>";
      const tilesetId = "<your tilesetId>";
      const statesetId = "<your statesetId>";

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

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

      const indoorManager = new atlas.indoor.IndoorManager(map, {
        levelControl: levelControl, //level picker
        tilesetId: tilesetId,
        statesetId: 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>
  </body>
</html>

İç mekan haritanızı görmek için bunu bir web tarayıcısına yükleme. Aşağıdaki görüntüde olduğu gibi görünmektedir. Well özelliğine tıklarsanız, düzey seçici sağ üst köşede görünür.

iç mekan haritası resmi