Přidat vrstvu symbolu (Android SDK)

v tomto článku se dozvíte, jak vykreslovat data bodů ze zdroje dat jako vrstvu symbolů na mapě pomocí Android SDK Azure Maps. Vrstvy symbolů vykreslují body jako obrázek a text na mapě.

Požadavky

Ujistěte se, že jste dokončili kroky v rychlém startu: vytvoření dokumentu aplikace pro Android . Bloky kódu v tomto článku lze vložit do onReady obslužné rutiny události Maps.

Přidání vrstvy symbolů

Předtím, než můžete na mapu přidat vrstvu symbolů, je nutné provést několik kroků. Nejprve vytvořte zdroj dat a přidejte jej do mapy. Vytvoří symbolovou vrstvu. Potom předejte zdroj dat do vrstvy symbolů, aby bylo možné načíst data ze zdroje dat. Nakonec přidejte data do zdroje dat, aby bylo vygenerováno něco.

Následující kód ukazuje, co by mělo být přidáno do mapy poté, co bylo načteno. 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)

Existují tři různé typy datových bodů, které lze přidat do mapy:

• Geometrická geometrie bodu JSON – tento objekt obsahuje pouze souřadnici bodu a nic jiného. Point.fromLngLatStatickou metodu lze použít k snadnému vytváření těchto objektů.
• Geometrická geometrie systému pro data JSON – 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ů.
• Geografická funkce JSON – tento objekt se skládá z libovolného geometrického geometrie 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 na mapu.

Následující ukázka kódu vytvoří geometrii geometrického bodu JSON a předá ji do funkce "geometrické JSON" a title přidá hodnotu do jejích vlastností. titleVlastnost se zobrazuje 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, že výše vykreslení kódu ukazuje funkci bodu pomocí ikony a textového popisku s vrstvou symbolů.

<a name="add-a-custom-icon-to-a-symbol-layer">Přidání vlastní ikony do vrstvy symbolů

Vrstvy symbolů se vykreslují pomocí WebGL. Jako takové všechny prostředky, například obrázky ikon, je nutné načíst do kontextu WebGL. Tento příklad ukazuje, jak přidat vlastní ikonu k prostředkům mapy. Tato ikona se pak použije k vykreslení dat bodů s vlastním symbolem na mapě. textFieldVlastnost vrstvy symbolů vyžaduje, aby byl zadán výraz. V tomto případě chceme vykreslit vlastnost teploty. Vzhledem k tomu, že teplota je číslo, je nutné ji převést na řetězec. Navíc chceme k němu připojit "°F". Výraz lze použít k provedení tohoto 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))
)

V této ukázce se do nakreslené složky aplikace načte následující obrázek.

showers.png

Následující snímek obrazovky ukazuje, že výše vykreslování kódu funkce Point používá vlastní ikonu a formátovaný textový popisek s vrstvou symbolů.

Upravit barvy symbolů

Azure Maps Android SDK obsahuje sadu předdefinovaných variací barev výchozí ikony značky. Například marker-red může být předán do iconImage Možnosti vrstvy symbolů pro 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 tabulce níže jsou uvedeny všechny dostupné názvy obrázků ikon. Všechny tyto značky vyžádají své barvy z barevných prostředků, které lze přepsat. Kromě přepsání hlavní barvy výplně této značky. Přepsání barvy jednoho z těchto značek však platí pro všechny vrstvy, které používají tuto ikonu obrázku.

Můžete také přepsat barvu ohraničení všech značek pomocí azure_maps_marker_border názvu barevného prostředku. Barvy těchto značek lze přepsat přidáním barvy se stejným názvem do colors.xml souboru aplikace. Například následující colors.xml soubor nastaví barvu výchozí 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 upravenou verzí výchozího vektoru XML značky, kterou lze upravit pro vytvoření vlastní verze výchozí značky. Upravenou verzi lze přidat do drawable složky aplikace a přidat ji do Sprite obrázku mapy pomocí map.images.add a potom 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 vašich map najdete v následujících článcích: