Haritaya sembol katmanı ekleme

Makale
06/27/2023

Bir simgeyi bir veri kaynağına bağlayın ve belirli bir noktada bir simgeyi veya metni 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ı harita üzerinde daha yüksek performansla çok sayıda nokta verisi işler. Ancak simge katmanı stil oluşturma için geleneksel CSS ve HTML öğelerini desteklemez.

İpucu

Sembol katmanları varsayılan olarak bir veri kaynağındaki tüm geometrilerin koordinatlarını işler. Katmanı yalnızca nokta geometrisi özelliklerini işleyebilecek şekilde sınırlandırmak ['==', ['geometry-type'], 'Point'] için katmanın özelliğini olarak ayarlayın filter veya ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']] isterseniz MultiPoint özelliklerini de ekleyebilirsiniz.

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 bunu haritaya ekleyin. Simge katmanı oluşturma. 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 harita üzerinde tek bir nokta oluşturur.

//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 verisi 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şkilendirilmiş 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 dizi özellik içerir. Veri kaynağına GeoJSON nesnesi eklenirse, bir katmanda kolayca işlenebilir. Ancak, bu GeoJSON nesnesinin coordinates özelliği güncelleştirilirse, veri kaynağı ve eşleme değişmez. Bunun nedeni, JSON nesnesinde bir güncelleştirmeyi tetikleyen bir mekanizma 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 sınıfına geçirir atlas.Shape . 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 simgesi setCoordinates haritada 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ı kullanılarak raptiye eklenmiş haritanın ekran görüntüsü.

İpucu

Varsayılan olarak, simge katmanları örtüşen simgeleri gizleyerek simgelerin işlenmesini iyileştirir. Yakınlaştırdıkça gizli simgeler görünür hale gelir. Bu özelliği devre dışı bırakmak ve tüm simgeleri her zaman işlemek için, seçeneklerin allowOverlapiconOptions özelliğini olarak trueayarlayın.

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 örnekte harita kaynaklarına nasıl özel simge ekleneceği gösterilmektedir. 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, temperature ö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'].

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', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/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]
          }
        }));
      });
    });
}

İpucu

Azure Haritalar web SDK'sı, simge katmanıyla kullanabileceğiniz çeşitli özelleştirilebilir görüntü şablonları sağlar. Daha fazla bilgi için Görüntü şablonlarını kullanma belgesine bakın.

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.

Haritanın sol tarafında etkileşimli olarak ayarlanabilen çeşitli sembol seçeneklerini içeren bir panel içeren haritanın ekran görüntüsü.