Přidání vrstvy symbolů (Android SDK)

Tento článek ukazuje, jak vykreslit data bodů ze zdroje dat jako vrstvu symbolů na mapě pomocí sady Azure Mapy Android SDK. Vrstvy symbolů vykreslují body jako obrázek a text na mapě.

Poznámka:

Vyřazení sady Azure Mapy Android SDK

Sada Azure Mapy Native SDK pro Android je teď zastaralá a bude vyřazena 31. 31. 25. Pokud se chcete vyhnout přerušení služeb, proveďte migraci do sady Azure Mapy Web SDK do 31. 31. 25. Další informace najdete v průvodci migrací sady Azure Mapy Android SDK.

Tip

Vrstvy symbolů ve výchozím nastavení vykreslují souřadnice všech geometrií ve zdroji dat. Chcete-li omezit vrstvu tak, aby vykreslovat pouze funkce geometrie bodu, nastavte filter možnost vrstvy na eq(geometryType(), "Point"). Pokud chcete zahrnout i funkce Systému MultiPoint, nastavte filter možnost vrstvy na any(eq(geometryType(), "Point"), eq(geometryType(), "MultiPoint"))hodnotu .

Požadavky

Nezapomeňte dokončit kroky v rychlém startu : Vytvoření dokumentu aplikace pro Android. Bloky kódu v tomto článku lze vložit do obslužné rutiny události mapy onReady .

Přidání vrstvy symbolů

Než do mapy přidáte vrstvu symbolů, musíte provést několik kroků. Nejprve vytvořte zdroj dat a přidejte ho do mapy. Vytvořte vrstvu symbolů. Potom předejte zdroj dat do vrstvy symbolů a načtěte data ze zdroje dat. Nakonec přidejte data do zdroje dat, aby se něco vykreslilo.

Následující kód ukazuje, co by se mělo přidat do mapy po načtení. Tato ukázka vykreslí jeden bod na mapě pomocí vrstvy symbolů.

//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)

Do mapy se dají přidat tři různé typy dat bodů:

• Geometrie GeoJSON Point – tento objekt obsahuje pouze souřadnici bodu a nic jiného. Statickou metodu Point.fromLngLat lze použít k snadnému vytvoření těchto objektů.
• GeoJSON MultiPoint geometry - Tento objekt obsahuje souřadnice více bodů a nic jiného. Předejte pole bodů do MultiPoint třídy pro vytvoření těchto objektů.
• Funkce GeoJSON – Tento objekt se skládá z jakékoli geometrie GeoJSON a sady vlastností, které obsahují metadata přidružená k geometrii.

Další informace najdete v dokumentu Vytvoření zdroje dat při vytváření a přidávání dat do mapy.

Následující ukázka kódu vytvoří geometrii GeoJSON Point a předá ji do funkce GeoJSON a má přidanou title hodnotu k jeho vlastnostem. Vlastnost title se zobrazí jako text nad ikonou symbolu na mapě.

//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)

Následující snímek obrazovky ukazuje výše uvedený kód vykreslovací funkci bodu pomocí ikony a textového popisku s vrstvou symbolů.

Tip

Ve výchozím nastavení vrstvy symbolů optimalizují vykreslování symbolů skrytím symbolů, které se překrývají. Při přiblížení se skryté symboly stanou viditelnými. Chcete-li tuto funkci zakázat a vykreslit všechny symboly za všech okolností, nastavte možnost a textAllowOverlap nastavte iconAllowOverlap možnost true.

Přidání vlastní ikony do vrstvy symbolů

Vrstvy symbolů se vykreslují pomocí WebGL. Proto musí být všechny prostředky, jako jsou obrázky ikon, načteny do kontextu WebGL. Tato ukázka ukazuje, jak do prostředků mapy přidat vlastní ikonu. Tato ikona se pak použije k vykreslení dat bodu pomocí vlastního symbolu na mapě. Vlastnost textField vrstvy symbolů vyžaduje zadání výrazu. V tomto případě chceme vykreslit vlastnost teploty. Vzhledem k tomu, že teplota je číslo, je potřeba ji převést na řetězec. Kromě toho k němu chceme připojit "°F". Výraz lze použít k tomuto zřetězení; 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))
)

Pro tuto ukázku se následující obrázek načte do nakreslené složky aplikace.

showers.png

Následující snímek obrazovky znázorňuje výše uvedenou funkci vykreslování kódu pomocí vlastní ikony a formátovaného textového popisku s vrstvou symbolů.

Tip

Pokud chcete vykreslit pouze text s vrstvou symbolů, můžete ikonu skrýt nastavením iconImage vlastnosti možností ikony na "none".

Úprava barev symbolů

Sada Azure Mapy Android SDK obsahuje sadu předdefinovaných barevných variant výchozí ikony značky. Můžete například marker-red předat iconImage možnost vrstvy symbolů k vykreslení červené verze ikony značky v této vrstvě.

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

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

V následující tabulce jsou uvedeny všechny dostupné názvy předdefinovaných obrázků ikon. Tyto značky přetahují barvy z barevných prostředků, které je možné přepsat. Přepsání barvy jedné z těchto značek by se ale použilo u všech vrstev, které tento obrázek ikony používají.

Název obrázku ikony	Název barevného prostředku
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

Barvu ohraničení všech značek můžete také přepsat pomocí názvu barevného azure_maps_marker_border prostředku. Barvy těchto značek je možné přepsat přidáním barvy se stejným názvem v colors.xml souboru aplikace. Například následující colors.xml soubor nastaví výchozí barvu značky jasně zelenou.

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

Následující kód je upravená verze výchozího formátu XML vektoru značky, kterou můžete upravit a vytvořit vlastní verze výchozí značky. Upravenou verzi můžete přidat do drawable složky vaší aplikace a přidat ji do spritu obrázků map pomocí map.images.adda pak použít s vrstvou symbolů.

<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>

Další kroky

Další ukázky kódu pro přidání do map najdete v následujících článcích:

Vytvoření zdroje dat

Data bodu clusteru

Přidání bublinové vrstvy

Použití výrazů stylu řízených daty

Zobrazení informací o funkcích