Haritaya sembol katmanı ekleme

Veri kaynağına bir simge Bağlan ve belirli bir noktada simge veya metin işlemek için bu simgeyi 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 simge 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ş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 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.


İ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'].


İ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. Bu çeşitli stil seçeneklerini test etmek için bir araç aşağıdadır.


İpucu

Yalnızca simge katmanıyla metin işlemek istediğinizde, simge seçeneklerinin 'none'özelliğini olarak ayarlayarak image simgeyi gizleyebilirsiniz.

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: