Sembol katmanı ekleme (Android SDK)

Bu makalede, Azure veri kaynağını kullanarak bir veri kaynağından gelen nokta verilerini harita üzerinde sembol katmanı olarak işleme Haritalar Android SDK. Sembol katmanları, noktaları görüntü ve metin olarak harita üzerinde işler.

Önkoşullar

Hızlı Başlangıç: Android uygulaması oluşturma belgesinde yer alan adımları tamamlayın. Bu makaledeki kod blokları haritalar olay onReady işleyicisine eklenebilir.

Sembol katmanı ekleme

Haritaya sembol katmanı ekleymeden önce birkaç adım atılması gerekir. İlk olarak bir veri kaynağı oluşturun ve haritaya ekleyin. Sembol katmanı oluşturun. Ardından, veri kaynağından verileri almak için veri kaynağını sembol katmanına iletirsiniz. Son olarak, işlenecek bir şey olması için veri kaynağına veri ekleyin.

Aşağıdaki kod, harita yüklendikten sonra haritaya nelerin ekli olması gerektiğini gösterir. Bu örnek, sembol katmanı kullanarak haritada tek bir nokta oluşturur.

//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 eklenilen üç farklı tür nokta verisi vardır:

• GeoJSON Noktası geometrisi - Bu nesne yalnızca bir noktanın koordinatı içerir ve başka bir şey içerir. 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çerir. Bu nesneleri oluşturmak için sınıfa MultiPoint bir nokta dizisi iletir.
• GeoJSON Özelliği - Bu nesne tüm GeoJSON geometrilerinden ve geometriyle ilişkili meta verileri içeren bir özellik kümesine sahiptir.

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 iletir ve özelliklerine title eklenen bir değere sahiptir. özelliği, title harita üzerindeki 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, sembol katmanına sahip bir simge ve metin etiketi kullanılarak bir nokta özelliğinin işlenmiş olduğu yukarıdaki kod gösterilir.

<a name="add-a-custom-icon-to-a-symbol-layer">Sembol katmanına özel simge ekleme

Sembol katmanları WebGL kullanılarak işlenir. Bu nedenle simge görüntüleri gibi tüm kaynakların WebGL bağlamına yüklenmiş olması gerekir. Bu örnekte harita kaynaklarına özel simge ekleme gösterilir. Bu simge daha sonra harita üzerinde özel bir sembolle nokta verilerini işlemek için kullanılır. Sembol textField katmanının özelliği, bir ifadenin belirtilmelidir. Bu durumda temperature özelliğini işlemek istiyoruz. Sıcaklık bir sayı olduğu için dizeye dönüştürülmesi gerekir. Ayrıca buna "°F" eklemek de istiyor. Bir ifade, bu concatenation'ı yapmak için kullanılabilir; concat(Expression.toString(get("temperature")), literal("°F")).

//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 drawable klasörüne yüklenir.

showers.png

Aşağıdaki ekran görüntüsünde, özel bir simge ve simge katmanı ile biçimlendirilmiş metin etiketi kullanan bir nokta özelliğini işleme yukarıdaki kod gösterilir.

Sembol renklerini değiştirme

Azure Haritalar Android SDK, varsayılan işaretçi simgesinin önceden tanımlanmış renk varyasyonları kümesiyle birlikte gelir. Örneğin, marker-red işaretleyici simgesinin kırmızı bir sürümünü o katmanda işlemek iconImage için bir sembol katmanı seçeneğine geçirebilirsiniz.

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 görüntü adları listelenmiştir. Tüm bu işaretçiler renklerini geçersiz kılarak renk kaynaklarından çeker. Bu işaretçinin ana dolgu rengini geçersiz kılmaya ek olarak. Ancak, bu işaretçilerden birinin rengini geçersiz kılma, bu simge görüntüsünü kullanan tüm katmanlar için geçerli olur.

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

<?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ştirilebilirsiniz varsayılan işaretçi vektör XML'lerinin değiştirilmiş bir sürümüdür. Değiştirilen sürüm, uygulamanın klasörüne eklenebilir ve kullanılarak haritalar görüntüsü drawable sprite'e eklenebilir map.images.add 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ızı eklemek üzere daha fazla kod örneği için aşağıdaki makalelere bakın: