Azure Haritalar İç Mekan Haritaları modülünü özel stiller ile kullanma (önizleme)

Makale
09/25/2024

Not

Azure Haritalar Creator'ın kullanımdan kaldırılması

Azure Haritalar Creator iç mekan harita hizmeti artık kullanım dışıdır ve 30.09.25 tarihinde kullanımdan kaldırılacaktır. Daha fazla bilgi için bkz. Azure Haritalar Oluşturucunun Kullanım Süresi Sonu Duyurusu.

Azure Haritalar Web SDK'sı, Azure Haritalar Creator hizmetlerinde oluşturulan iç mekan haritalarını işlemenizi sağlayan bir İç Mekan Haritaları modülü içerir.

Azure Haritalar Creator kullanarak iç mekan haritası oluşturduğunuzda varsayılan stiller uygulanır. Azure Haritalar Creator artık Stil Rest API'sini veya görsel stil düzenleyicisini seçin.

Önkoşullar

Azure Haritalar hesabı
Azure Haritalar Oluşturucu kaynağı
Abonelik anahtarı
Harita yapılandırma diğer adı veya kimliği. Daha fazla bilgi için bkz . eşleme yapılandırma API'si.

Azure Haritalar İç Mekan Haritaları modülü aracılığıyla iç mekan haritalarını özel stiller ile işlemek için harita yapılandırması alias (veya mapConfigurationId) gereklidir.

İç Mekan Haritaları modülünü ekleme

Azure Haritalar İç Mekan modülünü iki yoldan biriyle yükleyebilir ve ekleyebilirsiniz.

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 <head> öğesinde aşağıdakilere script ve stylesheet başvurulara başvurun:

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

İsterseniz Azure Haritalar İç Mekan modülünü de indirebilirsiniz. İç Azure Haritalar modülü, Azure Haritalar hizmetlerine erişmek için bir istemci kitaplığı içerir. Aşağıdaki adımlar, İç mekan modülünün web uygulamanıza nasıl yükleneceğini ve yükleneceğini gösterir.

En son azure-maps-indoor paketini yükleyin.
```
>npm install azure-maps-indoor
```
Azure Haritalar İç Mekan modülü JavaScript'i bir kaynak dosyaya aktarın:
```
import * as indoor from "azure-maps-indoor";
```
Ayrıca, çeşitli denetimlerin doğru görüntülenmesi için CSS Stil Sayfası'nı da eklemeniz gerekir. Bağımlılıkları paketlemek ve kodunuzu paketlemek için bir JavaScript paketleyicisi kullanıyorsanız nasıl yapıldığına ilişkin paketleyicinizin belgelerine bakın. Webpack için genellikle style-loader'da bulunan belgelerle birlikte ve css-loader ile style-loaderyapılır.

Başlamak için style-loader ve css-loader'ı yükleyin:
```
npm install --save-dev style-loader css-loader
```
Kaynak dosyanızın içinde atlas-indoor.min.css içeri aktar:
```
import "azure-maps-indoor/dist/atlas-indoor.min.css";
```
Ardından, Webpack yapılandırmasının modül kuralları bölümüne yükleyiciler ekleyin:
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
Daha fazla bilgi edinmek için bkz. Azure Haritalar eşleme denetimi npm paketini kullanma.

Etki alanını ayarlama ve Map nesnesinin örneğini oluşturma

Harita etki alanını, Oluşturucu kaynağınızın konumuyla eşleşen bir ön ekle ayarlayın; US EUörneğin:

atlas.setDomain('us.atlas.microsoft.com');

Daha fazla bilgi için bkz. Azure Haritalar hizmet coğrafi kapsamı.

Ardından, eşleme yapılandırma nesnenizin veya özelliğine mapConfigurationId alias ayarlanmış eşleme yapılandırması nesnesiyle bir Map nesnesinin örneğini oluşturarak öğesini styleAPIVersion 2023-03-01-previewolarak ayarlayın.

Map nesnesi, sonraki adımda İç Mekan Yöneticisi nesnesinin örneğini görüntülemek için kullanılacaktır. Aşağıdaki kod, styleAPIVersion ile mapConfigurationMap nesnesinin örneğini oluşturma ve etki alanı kümesini eşleme işlemini gösterir:

const subscriptionKey = "<Your Azure Maps Subscription Key>";
const region = "<Your Creator resource region: us or eu>"  
const mapConfiguration = "<map configuration alias or ID>"  
atlas.setDomain(`${region}.atlas.microsoft.com`);

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
  authOptions: { 
      authType: 'subscriptionKey',
      subscriptionKey: subscriptionKey
  },
  zoom: 19,

  mapConfiguration: mapConfiguration,
  styleAPIVersion: '2023-03-01-preview'
});

İç Mekan Yöneticisi örneği oluşturma

Kutucukların iç mekan haritası stilini yüklemek için İç Mekan Yöneticisi'ni örneklemeniz gerekir. Map nesnesini sağlayarak İç Mekan Yöneticisi'nin örneğini oluşturma. Kodunuz aşağıdaki JavaScript kod parçacığı gibi görünmelidir:

const indoorManager = new atlas.indoor.IndoorManager(map, {
});

İç mekan düzeyinde seçici denetimi

İç Mekan Düzeyi Seçici denetimi, işlenen haritanın düzeyini değiştirmenize olanak tanır. İsteğe bağlı olarak, İç Mekan Yöneticisi aracılığıyla İç Mekan Düzeyi Seçici denetimini başlatabilirsiniz. Düzey denetimi seçicisini başlatmaya ilişkin kod aşağıdadır:

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

İç mekan etkinlikleri

İç Azure Haritalar modülü, Eşleme nesnesi olaylarını destekler. Bir düzey veya özellik değiştiğinde Map nesnesi olay dinleyicileri çağrılır. Bir düzey veya tesis değiştiğinde kodu çalıştırmak istiyorsanız, kodunuzu olay dinleyicisinin içine yerleştirin. Aşağıdaki kod, olay dinleyicilerinin Map nesnesine nasıl eklenebileceğini 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 sırasıyla eventData veya olayını çağıran levelchanged düzey veya facilitychanged tesis hakkında bilgi tutar. Bir düzey değiştiğindeeventData, nesnesi , yeni levelNumberve diğer meta verileri içerirfacilityId. Bir tesis değiştiğindeeventData, nesne yeni , yeni facilityIdlevelNumberve diğer meta verileri içerir.

Örnek: özel stil: WebSDK'de harita yapılandırmasını kullanma (önizleme)

Azure Haritalar Creator kullanarak iç mekan haritası oluşturduğunuzda varsayılan stiller uygulanır. Azure Haritalar Creator artık iç mekan stillerinizi özelleştirmeyi de destekliyor. Daha fazla bilgi için bkz . İç mekan haritaları için özel stiller oluşturma. Oluşturucu ayrıca görsel bir stil düzenleyicisi de sunar.

Özel stillerinizi oluşturmak için İç mekan haritaları için özel stiller oluşturma nasıl yapılır makalesini izleyin. Değişikliklerinizi kaydettikten sonra harita yapılandırma diğer adını not edin.
Azure Haritalar İç Mekan modülünü yüklemek için Azure Content Delivery Network seçeneğini kullanın.
Yeni HTML dosyası oluşturma
HTML üst bilgisinde Azure Haritalar İç mekan modülü JavaScript ve stil sayfasına başvurun.
Harita etki alanını Oluşturucu kaynağınızın konumuyla eşleşen bir ön ekle ayarlayın: atlas.setDomain('us.atlas.microsoft.com'); Oluşturucu kaynağınız ABD bölgesinde oluşturulduysa veya atlas.setDomain('eu.atlas.microsoft.com'); Oluşturucu kaynağınız AB bölgesinde oluşturulduysa.
Map nesnesini başlatın. Map nesnesi aşağıdaki seçenekleri destekler:
- Subscription keyAzure Haritalar abonelik anahtarınızdır.
- center , iç harita merkezi konumunuz için bir enlem ve boylam tanımlar. için center bir değer sağlamak istemiyorsanız için boundsbir değer sağlayın. Biçim şu şekilde centergörünmelidir: [-122.13315, 47.63637].
- bounds kutucuk kümesi eşleme verilerini kapsayan en küçük dikdörtgen şekildir. için bounds bir değer ayarlamak istemiyorsanız için centerbir değer ayarlayın. Kutucuk Kümesi Listesi API'sini çağırarak harita sınırlarınızı bulabilirsiniz. Kutucuk Kümesi Listesi API'si bbox, ayrıştırabileceğiniz ve öğesine atayabileceğiniz boundsöğesini döndürür. Biçim şu şekilde boundsgörünmelidir: [# batı, # güney, # doğu, # kuzey].
- mapConfiguration haritada görüntülemek istediğiniz özel stilleri tanımlayan eşleme yapılandırmasının kimliği veya diğer adı, 1. adımdaki eşleme yapılandırma kimliğini veya diğer adını kullanın.
- style görüntülenen harita yapılandırmanızdan başlangıç stilini ayarlamanıza olanak tanır. Ayarlanmadıysa, stil eşleştirme eşleme yapılandırmasının varsayılan yapılandırması kullanılır.
- zoom haritanız için en düşük ve en yüksek yakınlaştırma düzeylerini belirtmenize olanak tanır.
- styleAPIVersion: pass '2023-03-01-preview' (Özel Stil genel önizleme aşamasındayken gereklidir)
Ardından, İç Mekan Yöneticisi seçeneklerinin bir parçası olarak örneği gösterilen İç Mekan Düzeyi Seçici denetimiyle İç Mekan Yöneticisi modülünü oluşturun.
Eşleme nesnesi olay dinleyicileri ekleyin.

İpucu

Eşleme yapılandırmasına veya alias kullanılarak başvurulurmapConfigurationId. Bir harita yapılandırmasını her düzenlediğinizde veya değiştirdiğinizde, kimliği değişir ancak diğer adı aynı kalır. Harita yapılandırmasına uygulamalarınızdaki diğer adıyla başvurmanız önerilir. Daha fazla bilgi için kavramlar makalesindeki harita yapılandırmasına bakın.

Dosyanız artık aşağıdaki HTML'ye benzer görünmelidir:

<!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/3/atlas.min.css" type="text/css" />
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/indoor/0.2/atlas-indoor.min.css" type="text/css"/>

    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
    <script src="https://atlas.microsoft.com/sdk/javascript/indoor/0.2/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 Subscription Key>";
      const mapConfig = "<Your map configuration id or alias>";
      const region = "<Your Creator resource region: us or eu>"    
      atlas.setDomain(`${region}.atlas.microsoft.com`);

      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
        authOptions: { 
            authType: 'subscriptionKey',
            subscriptionKey: subscriptionKey
        },
        zoom: 19,

        mapConfiguration: mapConfig,
        styleAPIVersion: '2023-03-01-preview'
      });

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

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

      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 bir web tarayıcısına yükleyin. Aşağıdaki görüntü gibi görünmelidir. Merdiven boşluğu özelliğini seçerseniz, sağ üst köşede düzey seçici görünür.

iç mekan haritası resmi