Haritaya sembol katmanı ekleme

Bir simgeyi bir veri kaynağına bağlayın ve belirli bir noktada simge veya metin işlemek için kullanın.

Sembol katmanları WebGL kullanılarak işlenir. Haritada büyük nokta koleksiyonlarını işlemek için bir sembol katmanı kullanın. HTML işaretçisiyle karşılaştırıldığında, sembol katmanı haritada daha iyi performansla çok sayıda nokta verisi işler. Ancak sembol katmanı stil oluşturma için geleneksel CSS ve HTML öğelerini desteklemez.

Harita görüntüsü sprite yöneticisi, sembol katmanı tarafından kullanılan özel görüntüleri yükler. Aşağıdaki görüntü biçimlerini destekler:

• JPEG
• PNG
• SVG
• BMP
• GIF (animasyon yok)

Sembol katmanı ekleme

Haritaya bir sembol katmanı ekleyebilmeniz için önce birkaç adım uygulamanız gerekir. İlk olarak bir veri kaynağı oluşturun ve haritaya ekleyin. Bir sembol katmanı oluşturun. Ardından, verileri veri kaynağından almak için veri kaynağını sembol katmanına geçirin. Son olarak, işlenecek bir şey olması için veri kaynağına veri ekleyin.

Aşağıdaki kod, yüklendikten sonra haritaya nelerin eklenmesi gerektiğini gösterir. Bu örnek, bir sembol katmanı kullanarak haritada tek bir noktayı işler.

//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
map.sources.add(dataSource);

//Create a symbol layer to render icons and/or text at points on the map.
var layer = new atlas.layer.SymbolLayer(dataSource);

//Add the layer to the map.
map.layers.add(layer);

//Create a point and add it to the data source.
dataSource.add(new atlas.data.Point([0, 0]));

Haritaya eklenebilen dört farklı nokta veri türü vardır:

• GeoJSON Noktası geometrisi - Bu nesne yalnızca bir noktanın koordinatını içerir ve başka bir şey içermez. Yardımcı atlas.data.Point sınıfı, bu nesneleri kolayca oluşturmak için kullanılabilir.
• GeoJSON MultiPoint geometrisi - Bu nesne birden çok noktanın koordinatlarını içerir ve başka bir şey içermez. Yardımcı atlas.data.MultiPoint sınıfı, bu nesneleri kolayca oluşturmak için kullanılabilir.
• GeoJSON Özelliği - Bu nesne herhangi bir GeoJSON geometrisini ve geometriyle ilişkili meta verileri içeren bir özellik kümesinden oluşur. Yardımcı atlas.data.Feature sınıfı, bu nesneleri kolayca oluşturmak için kullanılabilir.
• atlas.Shape sınıfı GeoJSON özelliğine benzer. Her ikisi de GeoJSON geometrisi ve geometriyle ilişkilendirilmiş meta verileri içeren bir özellik kümesinden oluşur. Veri kaynağına GeoJSON nesnesi eklenirse, bir katmanda kolayca işlenebilir. Ancak, bu GeoJSON nesnesinin koordinatlar özelliği güncelleştirilirse, veri kaynağı ve eşleme değişmez. Bunun nedeni, JSON nesnesinde güncelleştirme tetikleme mekanizması olmamasıdır. Şekil sınıfı, içerdiği verileri güncelleştirmek için işlevler sağlar. Bir değişiklik yapıldığında, veri kaynağı ve harita otomatik olarak bildirilir ve güncelleştirilir.

Aşağıdaki kod örneği bir GeoJSON Noktası geometrisi oluşturur ve güncelleştirmeyi kolaylaştırmak için bunu atlas.Shape sınıfına geçirir. Haritanın merkezi başlangıçta bir simgeyi işlemek için kullanılır. Haritaya, tetiklendiğinde farenin koordinatları şekiller setCoordinates işleviyle birlikte kullanılacak şekilde bir tıklama olayı eklenir. Fare koordinatları tıklama olayı sırasında kaydedilir. Ardından, setCoordinates simgenin haritadaki konumunu güncelleştirir.

function InitMap()
{
    var map = new atlas.Map('myMap', {
        center: [-122.33, 47.64],
        zoom: 13,
        view: "Auto",

        //Add authentication details for connecting to Azure Maps.
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }
    });

    //Wait until the map resources are ready.
    map.events.add('ready', function () {

      /*Create a data source and add it to the map*/
      var dataSource = new atlas.source.DataSource();
      map.sources.add(dataSource);
      var point = new atlas.Shape(new atlas.data.Point([-122.33, 47.64]));
      //Add the symbol to the data source.
      dataSource.add([point]);

      /* Gets co-ordinates of clicked location*/
      map.events.add('click', function(e){
        /* Update the position of the point feature to where the user clicked on the map. */
        point.setCoordinates(e.position);
      });

      //Create a symbol layer using the data source and add it to the map
      map.layers.add(new atlas.layer.SymbolLayer(dataSource, null));
    });
}

Simge katmanına özel simge ekleme

Sembol katmanları WebGL kullanılarak işlenir. Bu nedenle simge görüntüleri gibi tüm kaynaklar WebGL bağlamı içine yüklenmelidir. Bu örnek, harita kaynaklarına nasıl özel simge ekleneceğini gösterir. Bu simge daha sonra harita üzerinde özel bir simgeyle nokta verilerini işlemek için kullanılır. textField Sembol katmanının özelliği için bir ifadenin belirtilmesi gerekir. Bu durumda, sıcaklık özelliğini işlemek istiyoruz. Sıcaklık bir sayı olduğundan bir dizeye dönüştürülmesi gerekir. Ayrıca buna "°F" eklemek istiyoruz. Bu birleştirmeyi yapmak için bir ifade kullanılabilir; ['concat', ['to-string', ['get', 'temperature']], '°F']öğesini seçin.

function InitMap()
{
    var map = new atlas.Map('myMap', {
        center: [-73.985708, 40.75773],
        zoom: 12,
        view: "Auto",

        //Add authentication details for connecting to Azure Maps.
        authOptions: {
            authType: 'subscriptionKey',
            subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
        }
    });

    map.events.add('ready', function () {

      //Load the custom image icon into the map resources.
      map.imageSprite.add('my-custom-icon', '/images/icons/showers.png').then(function () {

        //Create a data source and add it to the map.
        var datasource = new atlas.source.DataSource();
        map.sources.add(datasource);

        //Create a point feature and add it to the data source.
        datasource.add(new atlas.data.Feature(new atlas.data.Point([-73.985708, 40.75773]), {
          temperature: 64
        }));

        //Add a layer for rendering point data as symbols.
        map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
          iconOptions: {
            //Pass in the id of the custom icon that was loaded into the map resources.
            image: 'my-custom-icon',

            //Optionally scale the size of the icon.
            size: 0.5
          },
          textOptions: {
            //Convert the temperature property of each feature into a string and concatenate "°F".
            textField: ['concat', ['to-string', ['get', 'temperature']], '°F'],

            //Offset the text so that it appears on top of the icon.
            offset: [0, -2]
          }
        }));
      });
    });
}

Simge katmanını özelleştirme

Sembol katmanında birçok stil seçeneği vardır. Sembol Katmanı Seçenekleri örneği, sembol katmanının işlemeyi etkileyen farklı seçeneklerini gösterir. Bu örneğin kaynak kodu için bkz . Sembol Katmanı Seçenekleri kaynak kodu.

Sonraki adımlar

Bu makalede kullanılan sınıflar ve yöntemler hakkında daha fazla bilgi edinin:

Haritalarınıza eklenecek daha fazla kod örneği için aşağıdaki makalelere bakın: