Harita oluşturma

Makale
07/04/2023

Bu makalede harita oluşturmanın ve haritaya animasyon eklemenin yolları gösterilmektedir.

Harita yükleme

Eşleme yüklemek için Map sınıfının yeni bir örneğini oluşturun. Eşlemeyi başlatırken, eşlemeyi işlemek için bir DIV öğesi kimliği geçirin ve haritayı yüklerken kullanılacak bir dizi seçenek geçirin. Ad alanında atlas varsayılan kimlik doğrulama bilgileri belirtilmezse, harita yüklenirken bu bilgilerin harita seçeneklerinde belirtilmesi gerekir. Eşleme, performans için birkaç kaynağı zaman uyumsuz olarak yükler. Bu nedenle, harita örneğini oluşturduktan sonra eşlemeye bir ready veya load olayı ekleyin ve ardından olay işleyicisine eşlemeyle etkileşim kuran daha fazla kod ekleyin. Olay, ready harita program aracılığıyla etkileşime geçmek için yeterli kaynak yüklediği anda tetikleniyor. Olay, load ilk harita görünümü tamamen yüklendikten sonra tetikleniyor.

Aynı sayfaya birden çok harita yükleyebilirsiniz. Aynı sayfaya birden çok harita yüklemeyi gösteren örnek kod için Azure Haritalar Örnekleri'ndeki Birden Çok Harita'ya bakın. Bu örneğin kaynak kodu için bkz . Birden Çok Haritalar kaynak kodu.

Haritadaki tutturma kılavuzunu gösteren ekran görüntüsü.

İpucu

Aynı sayfada birden çok harita kullanırken aynı veya farklı kimlik doğrulaması ve dil ayarlarını kullanabilirsiniz.

Dünyanın tek bir kopyasını gösterme

Harita geniş bir ekranda uzaklaştırıldığında, dünyanın birden çok kopyası yatay olarak görünür. Bu seçenek bazı senaryolar için idealdir, ancak diğer uygulamalar için dünyanın tek bir kopyasını görmek tercih edilir. Bu davranış, haritalar renderWorldCopies seçeneği falseolarak ayarlanarak uygulanır.

//Only allow one copy of the world be rendered when zoomed out.
renderWorldCopies: false

Harita seçenekleri

Orada bir harita oluştururken, haritanın nasıl çalıştığını özelleştirmek için geçirilebilen birkaç farklı seçenek türü vardır:

CameraOptions ve CameraBoundOptions , haritanın görüntülemesi gereken alanı belirtmek için kullanılır.
ServiceOptions , haritanın haritayı destekleyen hizmetlerle nasıl etkileşim kuracağını belirtmek için kullanılır.
StyleOptions , eşlemenin stillendirilip işlenmesini belirtmek için kullanılır.
UserInteractionOptions , kullanıcı haritayla etkileşim kurarken haritanın nasıl ulaşacağını belirtmek için kullanılır.

Bu seçenekler, eşleme , , setServiceOptionssetStyleve setUserInteraction işlevleri kullanılarak setCamerayüklendikten sonra da güncelleştirilebilir.

Harita kamerasını denetleme

Haritanın kamerasını kullanarak haritanın görüntülenen alanını ayarlamanın iki yolu vardır. Haritayı yüklerken kamera seçeneklerini ayarlayabilirsiniz. Alternatif olarak, harita görünümünü program aracılığıyla güncelleştirmek için harita yüklendikten sonra istediğiniz zaman bu seçeneği çağırabilirsiniz setCamera .

Kamerayı ayarlama

Harita kamerası, harita tuvalinin görünüm penceresi içinde görüntülenenleri denetler. Kamera seçenekleri başlatılırken veya haritalar işlevine geçirilirken harita setCamera seçeneklerine geçirilebilir.

// Set the camera options when creating the map.
// Map properties, such as center and zoom level, are part of the CameraOptions
var map = new atlas.Map('map', {
    center: [-122.33, 47.6],
    zoom: 12

    //Additional map options.
};

//Update the map camera at anytime using setCamera function.
map.setCamera({
    center: [-110, 45],
    zoom: 5 
});

Orta ve yakınlaştırma düzeyi gibi harita özellikleri, CameraOptions özelliklerinin bir parçasıdır.

Kamera sınırlarını ayarlama

Harita kamerasını güncelleştirmek için sınırlayıcı bir kutu kullanılabilir. Sınırlayıcı kutu nokta verilerinden hesaplandıysa, simge boyutunu dikkate almak için genellikle kamera seçeneklerinde bir piksel doldurma değeri belirtmek yararlı olur. Bu piksel doldurma, noktaların harita görünüm penceresi kenarından düşmemesini sağlamaya yardımcı olur.

map.setCamera({
    bounds: [-122.4, 47.6, -122.3, 47.7],
    padding: 10
});

Aşağıdaki kodda, aracılığıyla new atlas.Map()bir Map nesnesi oluşturulur. gibi CameraBoundsOptions eşleme özellikleri, Map sınıfının setCamera işlevi aracılığıyla tanımlanabilir. Sınırlar ve doldurma özellikleri kullanılarak setCameraayarlanır.

Harita görünümüne animasyon ekleme

Haritanın kamera seçeneklerini ayarlarken animasyon seçenekleri de ayarlanabilir. Bu seçenekler, kamerayı taşımak için geçmesi gereken animasyon türünü ve süresini belirtir.

map.setCamera({
    center: [-122.33, 47.6],
    zoom: 12,
    duration: 1000,
    type: 'fly'  
});

Aşağıdaki kodda, ilk kod bloğu bir harita oluşturur ve enter ve yakınlaştırma eşleme stillerini ayarlar. İkinci kod bloğunda animasyon düğmesi için bir tıklama olayı işleyicisi oluşturulur. Bu düğme seçildiğinde, setCameraişlev CameraOptions ve AnimationOptions için bazı rastgele değerlerle çağrılır.

<!DOCTYPE html>
 <html>
 <head>

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
  <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
  <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
  
  
    <script type="text/javascript">
    var map;
    
    function InitMap()
    {
        map = new atlas.Map('myMap', {
        center: [-122.33, 47.6],
        zoom: 12,
        view: 'Auto',
        style: 'road',

      
        // Add authentication details for connecting to Azure Maps.
        authOptions: {
          // Get an Azure Maps key at https://azuremaps.com/.
          authType: 'subscriptionKey',
          subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }      
      });
    }
    
    /* Animate map view to set camera location
       to random points on the map*/
    function animateMap() {
      map.setCamera({
      zoom: Math.random() *2 + 12,
      duration: 1000,
      type: 'fly'  
      });
    }
  </script>

  <style>
    button {
      position: absolute;
      top: 10px;
      left: 10px;
    }  
  </style>

</head>

<html style='width:100%;height:100%;'> 
  <body onload="InitMap()" style='width:100%;height:100%;padding:0;margin:0;'> 
    <div id='myMap' style='position:relative;width:100%;height:100%;'></div>
  <button onclick="animateMap()">Animate Maps</button>
  <div id="my-text-box"></div>
  </body>
</html>

Haritaya Animasyon Ekle etiketli bir düğmenin gösterildiği ve basıldığında haritanın yakınlaştırmasına veya uzaklaştırmasına neden olan ekran görüntüsü.

İstek dönüştürmeleri

Bazen harita denetimi tarafından yapılan HTTP isteklerini değiştirebilmek yararlı olabilir. Örneğin:

Parola korumalı hizmetler için kutucuk isteklerine daha fazla üst bilgi ekleyin.
İstekleri ara sunucu hizmeti aracılığıyla çalıştırmak için URL'leri değiştirin.

Haritanın hizmet seçenekleri , eşleme tarafından yapılan tüm istekleri yapılmadan önce değiştirmek için kullanılabilecek bir transformRequest seçeneğine sahiptir. transformRequest seçeneği, iki parametre alan bir işlevdir: dize URL'si ve isteğin ne için kullanıldığını gösteren bir kaynak türü dizesi. Bu işlev bir RequestParameters sonucu döndürmelidir.

transformRequest: (url: string, resourceType: string) => RequestParameters

İstek dönüşümü kullanırken, en az bir RequestParameters özellik içeren bir url nesne döndürmeniz gerekir. Bir nesneye dahil RequestParameters edilebilecek özellikler şunlardır.

Seçenek	Tür	Açıklama
body	string	POST isteği gövdesi.
Kimlik bilgileri	`'same-origin'` \| `'include'`	Çıkış noktaları arası istek (COR) kimlik bilgileri ayarını belirtmek için kullanılır. Çıkış noktaları arası isteklerle tanımlama bilgileri göndermek için 'include' kullanın.
Üstbilgi	object	İstekle birlikte gönderilecek üst bilgiler. nesnesi, dize değerlerinin anahtar değer çiftidir.
method	`'GET'` \| `'POST'` \| `'PUT'`	Yapılacak istek türü. `'GET'` varsayılan değerdir.
tür	`'string'` \| `'json'` \| `'arrayBuffer'`	POST yanıt gövdesinin biçimi.
url	string	İstenecek URL.

Haritaya eklediğiniz içerikle en ilgili kaynak türleri aşağıdaki tabloda listelenmiştir:

Kaynak Türü	Açıklama
Görüntü	SymbolLayer veya ImageLayer ile kullanılacak görüntü isteği.
Kaynak	TileJSON isteği gibi kaynak bilgileri için istek. Temel eşleme stillerinden gelen bazı istekler de kaynak bilgilerini yüklerken bu kaynak türünü kullanır.
Kutucuk	Kutucuk katmanından gelen istek (raster veya vektör).
WFS	Uzamsal GÇ modülündeki bir `WfsClient` OGC Web Özellik Hizmeti'ne yönelik istek. Daha fazla bilgi için bkz. WFS hizmetine bağlanma.
WebMapService	Uzamsal GÇ modülündeki dosyasından `OgcMapLayer` bir WMS veya WMTS hizmetine yönelik istek. Daha fazla bilgi için bkz. Open Geospatial Consortium'dan (OGC) harita katmanı ekleme.

burada, genellikle yoksayılan ve istek dönüşümünden geçirilen ve temel eşleme stilleriyle ilgili bazı kaynak türleri verilmiştir: StyleDefinitions, Style, SpriteImage, SpriteJSON, Glifler, İlişkilendirme.

Aşağıdaki örnekte, isteğe üst bilgi olarak bir kullanıcı adı ve parola ekleyerek tüm isteklerin boyutuna https://example.com nasıl değiştirileceği gösterilmektedir.

var map = new atlas.Map('myMap', {
    transformRequest: function (url, resourceType) {
        //Check to see if the request is to the specified endpoint.
        if (url.indexOf('https://examples.com') > -1) {
            //Add custom headers to the request.
            return {
                url: url,
                header: {
                    username: 'myUsername',
                    password: 'myPassword'
                }
            };
        }

        //Return the URL unchanged by default.
        return { url: url };
    },

    authOptions: {
        authType: 'subscriptionKey',
        subscriptionKey: '<Your Azure Maps Key>'
    }
});