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.
İpucu
Sembol katmanları varsayılan olarak veri kaynağındaki tüm geometrilerin koordinatlarını işler. Katmanı yalnızca nokta geometrisi özelliklerini işleyebilecek şekilde sınırlamak ['==', ['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 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));
});
}
İ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 allowOverlap
iconOptions
özelliğini olarak true
ayarlayı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 ö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]
}
}));
});
});
}
Not
Yukarıdaki örnekte kullanılan görüntü dosyasının bir kopyası için bkz . GitHub'da showers.png .
İ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.
İ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: