Simge katmanı ekleme (Android SDK)

Bu makalede, Azure Haritalar Android SDK'sını kullanarak bir veri kaynağındaki nokta verilerini harita üzerinde bir sembol katmanı olarak işleme gösterilmektedir. Sembol katmanları, noktaları harita üzerinde resim ve metin olarak işler.

Not

Android SDK'sı kullanımdan kaldırılmasını Azure Haritalar

Android için Azure Haritalar Yerel SDK artık kullanım dışıdır ve 31/3/25 tarihinde kullanımdan kaldırılacaktır. Hizmet kesintilerini önlemek için 31.03.25'e kadar Azure Haritalar Web SDK'sına geçin. Daha fazla bilgi için bkz. Android SDK geçiş kılavuzu Azure Haritalar.

İ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ırlandırmak için katmanın filter seçeneğini olarak eq(geometryType(), "Point")ayarlayın. MultiPoint özelliklerini de eklemek istiyorsanız, katmanın filter seçeneğini olarak any(eq(geometryType(), "Point"), eq(geometryType(), "MultiPoint"))ayarlayın.

Önkoşullar

Hızlı Başlangıç: Android uygulaması oluşturma belgesindeki adımları tamamladığınızdan emin olun. Bu makaledeki kod blokları haritalar onReady olay işleyicisine eklenebilir.

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.
DataSource source = new DataSource();
map.sources.add(source);

//Create a point and add it to the data source.
source.add(Point.fromLngLat(0, 0));

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

//Add the layer to the map.
map.layers.add(layer);
//Create a data source and add it to the map.
val source = DataSource()
map.sources.add(source)

//Create a point and add it to the data source.
source.add(Point.fromLngLat(0, 0))

//Create a symbol layer to render icons and/or text at points on the map.
val layer = SymbolLayer(source)

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

Haritaya eklenebilecek üç 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. Statik Point.fromLngLat yöntem, 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. Bu nesneleri oluşturmak için sınıfına MultiPoint bir nokta dizisi geçirin.
  • GeoJSON Özelliği - Bu nesne herhangi bir GeoJSON geometrisini ve geometriyle ilişkili meta verileri içeren bir özellik kümesinden oluşur.

Daha fazla bilgi için haritaya veri oluşturma ve ekleme ile ilgili Veri kaynağı oluşturma belgesine bakın.

Aşağıdaki kod örneği bir GeoJSON Noktası geometrisi oluşturur ve bunu GeoJSON Özelliğine geçirir ve özelliklerine bir title değer ekler. title özelliği, haritadaki simge simgesinin üzerinde metin olarak görüntülenir.

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

//Create a point feature.
Feature feature = Feature.fromGeometry(Point.fromLngLat(0, 0));

//Add a property to the feature.
feature.addStringProperty("title", "Hello World!");

//Add the feature to the data source.
source.add(feature);

//Create a symbol layer to render icons and/or text at points on the map.
SymbolLayer layer = new SymbolLayer(source, 
    //Get the title property of the feature and display it on the map.
    textField(get("title"))
);

//Add the layer to the map.
map.layers.add(layer);
//Create a data source and add it to the map.
val source = DataSource()
map.sources.add(source)

//Create a point feature.
val feature = Feature.fromGeometry(Point.fromLngLat(0, 0))

//Add a property to the feature.
feature.addStringProperty("title", "Hello World!")

//Add the feature to the data source.
source.add(feature)

//Create a symbol layer to render icons and/or text at points on the map.
val layer = SymbolLayer(
    source,  //Get the title property of the feature and display it on the map.
    textField(get("title"))
)

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

Aşağıdaki ekran görüntüsünde yukarıdaki kodun simge ve simge katmanıyla metin etiketi kullanarak nokta özelliğini işlemesi gösterilmektedir.

Nokta özelliği için simge ve metin etiketi görüntüleyen bir simge katmanı kullanılarak işlenen noktayla eşleme

İ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 ve textAllowOverlap seçeneklerini olarak trueayarlayıniconAllowOverlap.

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(Expression.toString(get("temperature")), literal("°F"))öğesini seçin.

//Load a custom icon image into the image sprite of the map.
map.images.add("my-custom-icon", R.drawable.showers);

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

//Create a point feature.
Feature feature = Feature.fromGeometry(Point.fromLngLat(-73.985708, 40.75773));

//Add a property to the feature.
feature.addNumberProperty("temperature", 64);

//Add the feature to the data source.
source.add(feature);

//Create a symbol layer to render icons and/or text at points on the map.
SymbolLayer layer = new SymbolLayer(source,
    iconImage("my-custom-icon"),
    iconSize(0.5f),

    //Get the title property of the feature and display it on the map.
    textField(concat(Expression.toString(get("temperature")), literal("°F"))),
    textOffset(new Float[]{0f, -1.5f})
);
//Load a custom icon image into the image sprite of the map.
map.images.add("my-custom-icon", R.drawable.showers)

//Create a data source and add it to the map.
val source = DataSource()
map.sources.add(source)

//Create a point feature.
val feature = Feature.fromGeometry(Point.fromLngLat(-73.985708, 40.75773))

//Add a property to the feature.
feature.addNumberProperty("temperature", 64)

//Add the feature to the data source.
source.add(feature)

//Create a symbol layer to render icons and/or text at points on the map.
val layer = SymbolLayer(
    source,
    iconImage("my-custom-icon"),
    iconSize(0.5f),  //Get the title property of the feature and display it on the map.
    textField(concat(Expression.toString(get("temperature")), literal("°F"))),
    textOffset(arrayOf(0f, -1.5f))
)

Bu örnek için aşağıdaki görüntü uygulamanın çizilebilir klasörüne yüklenir.

Yağmur yağmurlarının hava durumu simgesi görüntüsü
showers.png

Aşağıdaki ekran görüntüsünde, özel bir simge ve simge katmanıyla biçimlendirilmiş metin etiketi kullanarak bir nokta özelliğini işlemeye ilişkin yukarıdaki kod gösterilmektedir.

Bir nokta özelliği için özel simge ve biçimlendirilmiş metin etiketi görüntüleyen bir simge katmanı kullanılarak işlenen nokta ile eşleme

İpucu

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

Simge renklerini değiştirme

Azure Haritalar Android SDK'sı, varsayılan işaretçi simgesinin önceden tanımlanmış renk çeşitlemeleriyle birlikte gelir. Örneğin, marker-red bu katmandaki işaretçi simgesinin iconImage kırmızı bir sürümünü işlemek için simge katmanı seçeneğine geçirilebilir.

SymbolLayer layer = new SymbolLayer(source,
    iconImage("marker-red")
);
val layer = SymbolLayer(source,
    iconImage("marker-red")
)

Aşağıdaki tabloda, kullanılabilir tüm yerleşik simge resim adları listelenmiştir. Bu işaretçiler, geçersiz kılınabilecek renk kaynaklarından renklerini çeker. Ancak, bu işaretçilerden birinin rengini geçersiz kılma, bu simge görüntüsünü kullanan tüm katmanlara uygulanır.

Simge resmi adı Renk kaynağı adı
marker-default azure_maps_marker_default
marker-black azure_maps_marker_black
marker-blue azure_maps_marker_blue
marker-darkblue azure_maps_marker_darkblue
marker-red azure_maps_marker_red
marker-yellow azure_maps_marker_yellow

Ayrıca, renk kaynağı adını kullanarak azure_maps_marker_border tüm işaretçilerin kenarlık rengini geçersiz kılabilirsiniz. Bu işaretçilerin renkleri, uygulamanızın dosyasına aynı ada colors.xml sahip bir renk eklenerek geçersiz kılınabilir. Örneğin, aşağıdaki colors.xml dosya varsayılan işaretçi rengini parlak yeşil yapar.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="azure_maps_marker_default">#00FF00</color>
</resources>

Aşağıdaki kod, varsayılan işaretçinin özel sürümlerini oluşturmak için değiştirebileceğiniz varsayılan işaretçi vektör XML'sinin değiştirilmiş bir sürümüdür. Değiştirilen sürüm, uygulamanızın drawable klasörüne eklenebilir ve kullanılarak map.images.addharitalar görüntüsü sprite'sine eklenebilir ve ardından bir sembol katmanıyla kullanılabilir.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24.5dp"
    android:height="36.5dp"
    android:viewportWidth="24.5"
    android:viewportHeight="36.5">
    <path
        android:pathData="M12.25,0.25a12.2543,12.2543 0,0 0,-12 12.4937c0,6.4436 6.4879,12.1093 11.059,22.5641 0.5493,1.2563 1.3327,1.2563 1.882,0C17.7621,24.8529 24.25,19.1857 24.25,12.7437A12.2543,12.2543 0,0 0,12.25 0.25Z"
        android:strokeWidth="0.5"
        android:fillColor="@color/azure_maps_marker_default"
        android:strokeColor="@color/azure_maps_marker_border"/>
</vector>

Sonraki adımlar

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